de cette nouvelle génération d’appareils pliables, les appareils à double écran, qui fournissent des écrans symétriques qui fonctionnent ensemble de manière unique, sont particulièrement intéressants. Mais, ils présentent également des défis uniques.
Une caractéristique clé de ces interfaces utilisateur pliables et réactives est que les tailles d’écran peuvent changer au cours de l’exécution. Cela signifie que les applications doivent reconnaître les changements d’écran lors de l’exécution, ce qui pourrait être une fonctionnalité difficile à mettre en œuvre pour les développeurs qui doivent se concentrer sur le code métier.
Pour contourner ce défi, Google a proposé une nouvelle solution : le Jetpack WindowManager. Maintenant que la bibliothèque est dans la version stable, Google encourage tous les développeurs à adopter Jetpack WindowManager avec ses API indépendantes de l’appareil, ses API de test et WindowMetrics afin que vous puissiez réagir facilement aux changements d’écran.
Dans cet article, vous apprendrez à configurer l’émulateur de périphérique pliable et à utiliser la bibliothèque Jetpack WindowManager pour créer des interfaces utilisateur réactives pour Android.
Pour une aide supplémentaire, consultez les liens ci-dessous :
Pour commencer, vous devez installer un émulateur pliable. Dans ce didacticiel, vous utiliserez l’émulateur Surface Duo 2 de Microsoft pour exécuter le projet de démonstration. Pour exécuter l’émulateur, vous apprendrez à installer et à exécuter l’émulateur pliable sur Android Studio.
Pour commencer, vous pouvez suivre les instructions des ressources ci-dessous :
Remarque : Si vous construisez avec d’autres émulateurs pliables, ce projet peut ne pas fonctionner correctement sur votre émulateur.
Vous pouvez télécharger l’image de l’émulateur Surface Duo en suivant les étapes ci-dessous :
Accédez au Centre de téléchargement Microsoft.
Clique le Télécharger bouton sur la page.
Choisissez une option de téléchargement comme dans la figure ci-dessous. Vous devez sélectionner l’option qui correspond à votre environnement PC.
Clique le Suivant bouton et commencez à télécharger le fichier de l’émulateur.
Après avoir téléchargé l’émulateur, suivez les instructions ci-dessous pour l’installer sur votre PC :
👉 Instructions pour Mac :
ouvrir le SurfaceDuoEmulator.dmg filet.
Copiez le .pot fichier et le contenu du dossier de l’émulateur vers un nouvel emplacement sur votre disque dur local. (Le nom du dossier de l’émulateur ne peut pas contenir de points.)
Naviguez vers le SurfaceDuoEmulator dossier dans lequel vous avez copié les fichiers de l’émulateur.
exécuter le ./run.sh en double-cliquant (ou en le tapant sur le terminal) pour démarrer le processus d’installation. Cela peut prendre un certain temps, mais à la fin du processus, vous verrez le lancement de l’émulateur.
👉 Instructions de fenêtre :
Décompressez le fichier téléchargé.
Lancez le programme d’installation.
Après avoir terminé la configuration du SDK, lancez le Émulateur Surface Duo via le lien du menu de démarrage.
Remarque : Si l’émulateur ne démarre pas, vous devrez peut-être mettre à jour le pointeur vers votre installation Android SDK.
Après avoir exécuté l’émulateur Surface Duo 2, vous verrez le résultat ci-dessous sur votre PC :
L’émulateur Surface Duo 2 apparaîtra automatiquement dans la liste des appareils Android Studio disponibles, comme illustré ci-dessous. Ensuite, vous pouvez exécuter ce projet de démonstration sur votre émulateur Duo 2 :
Après avoir exécuté ce projet de démonstration, vous verrez le résultat ci-dessous :
Maintenant, vous pouvez contrôler l’état et le degré de pliage de l’appareil sur le capteurs virtuels onglet sur le contrôleur de l’émulateur :
Toutes nos félicitations! 🎉 Vous pouvez désormais créer des projets pour des interfaces utilisateur réactives sur l’émulateur Surface Duo 2. Plongeons maintenant dans le Jetpack WindowManager pour voir comment fonctionne l’application responsable.
La bibliothèque Jetpack WindowManager permet aux développeurs d’applications de prendre en charge de nouveaux facteurs de forme d’appareil et d’implémenter des interfaces utilisateur réactives. Si vous souhaitez utiliser cette bibliothèque dans votre projet, ajoutez la dépendance suivante dans le build.gradle fichier pour votre application :
La version 1.0.0 de Jetpack WindowManager contient les fonctionnalités clés suivantes :
WindowMetricsCalculator: Interface pour calculer les WindowMetrics d’une Activity. Il calcule la taille et la position de la zone que la fenêtre occuperait avec la largeur et la hauteur MATCH_PARENT.
WindowInfoTracker: Fournit le WindowLayoutInfoqui contient les fonctionnalités d’affichage d’une fenêtre en tant que type observable tel que Flow ou RxJava.
WindowLayoutInfo: Contient les fonctions d’affichage d’une fenêtre pour distinguer si la fenêtre contient un pli ou une charnière.
Fonction de pliage: vous permet de surveiller l’état plié d’un appareil pliable pour déterminer les postures de l’appareil.
Cet article vous guidera à travers les principales fonctionnalités de Jetpack WIndowManager.
Avant d’approfondir l’API WindowManager, vous devez configurer un exemple de mise en page sur votre activité pour observer les états pliés et les configurations d’affichage.
Tout d’abord, ouvrez le activity_main.xml fichier et copiez-collez le code suivant :
Ensuite, active la liaison de vue dans le build.gradle fichier avec le code suivant :
Enfin, après avoir cliqué sur le synchroniser sur Android Studio, initialisez les mises en page avec la liaison de vue avec l’exemple suivant :
Maintenant, obtenons la taille de la fenêtre avec le WindowMetricsCalculator. le WindowMetricsCalculator trouve les dimensions maximales et la position d’une zone pour la fenêtre en calculant MATCH_PARENT la largeur et la hauteur et tous les drapeaux qui permettent à la fenêtre de s’étendre derrière les zones de découpe.
Tout d’abord, vous créez une instance de WindowMetricsCaculator en utilisant le getOrCreate() méthode statique :
Ensuite, vous pouvez obtenir le WindowMetricsqui contient les informations de taille du Window:
Après la construction, vous obtiendrez le résultat suivant :
renversé:
Enjambé :
L’API WindowManager fournit des interfaces de suivi des WindowLayoutInfo, qui contient la liste des DisplayFeatures situées dans la fenêtre. Nous pouvons observer les changements de disposition des fenêtres en utilisant le windowLayoutInfo(activity) méthode, qui fournit le flux de WindowLayoutInfo à travers les récréations d’activité avec le code ci-dessous :
le windowLayoutInfo(activity) la méthode renvoie Flow<WindowLayoutInfo>. Nous pouvons observer la WindowLayoutInfo dans notre activité avec le code ci-dessous :
L’API WindowManager vous fournit FoldingFeature, qui décrit les plis et les charnières de l’écran. Son API donne accès à des informations importantes liées aux méthodes de l’appareil ci-dessous :
Etat(): Représente l’état de posture actuel de l’appareil pliable tel que STATE_FLAT et STATE_HALF_OPENED.
isSeparating(): Détermine si un FoldingFeature doit diviser la fenêtre en plusieurs zones physiques que les utilisateurs verront comme logiquement séparées.
orientation(): Retour FoldingFeature.Orientation.HORIZONTAL si la largeur de FoldingFeature est supérieure à la hauteur, ou FoldingFeature.Orientation.VERTICAL autrement.
FoldingFeature fournit deux états de pliage : FLAT et HALF_OPENED. FLAT signifie que l’état de posture doit être ouvert entièrement à plat, et HALF_OPENDED signifie que deux zones d’écran logiques doivent être pliées entre 30 et 150 degrés, comme le montre la figure ci-dessous :
Illustration par Google
FoldingFeature inclut des informations telles que l’orientation de la charnière et l’état de posture que vous avez géré ci-dessus, nous pouvons donc utiliser ces valeurs pour vérifier si l’appareil est en mode table ou en mode livre.
Illustration par Google
Vous pouvez vérifier si l’appareil est en mode table (à moitié ouvert avec la charnière horizontale) avec le code ci-dessous :
Vous pouvez vérifier si l’appareil est en mode livre (à moitié ouvert avec la charnière verticale) avec le code ci-dessous :
👉 Vous pouvez trouver l’exemple de code complet dans cet article sur GitHub.
Pour plus d’informations, vous pouvez également consulter les références ci-dessous :
Voyons comment vous pouvez utiliser ces API dans notre prochaine application. Dans la capture d’écran ci-dessous, vous verrez l’exemple réel de l’interface utilisateur réactive avec Jetpack WindowManager :
Les appareils pliables peuvent avoir des tailles d’écran flexibles en fonction des états pliés, nous pouvons donc créer des mises en page réactives basées sur des points d’arrêt spécifiques suivant les différents écrans. La conception matérielle de Google suggère quelques directives de point d’arrêt sur la façon dont le contenu se redistribue sur différents écrans.
En suivant les conseils de Material Design, nous pouvons calculer les tailles d’écran et définir les points d’arrêt des états de pliage avec le code ci-dessous :
Si vous utilisez Jetpack Compose pour créer des interfaces utilisateur sur votre application, vous pouvez observer la taille de l’écran avec l’exemple suivant :
le rememberWindowSizeClass() stocke le WindowSize objet dans la composition, et il sera mis à jour si la taille de l’écran change. Vous pouvez donc créer les interfaces utilisateur réactives avec l’exemple ci-dessous :
👉 Vous pouvez trouver les exemples de codes complets dans cet article sur GitHub. Cet exemple du monde réel a été construit avec l’API Jetpack Compose de Stream, alors vérifiez-le si vous avez d’autres intérêts.
Dans cet article, vous avez appris à configurer l’émulateur pliable et le Jetpack WindowManager pour créer des interfaces utilisateur réactives. Les appareils pliables offrent un écran plus grand, ce qui offre une expérience utilisateur plus immersive qui améliore la productivité. Vous pouvez ainsi offrir de meilleures expériences utilisateur en prenant en charge des interfaces utilisateur réactives pour votre application Android.
Encore une fois, vous pouvez trouver les exemples de codes complets avec des exemples dans cet article sur GitHub.
Pour en savoir plus sur les appareils pliables et leur utilisation, consultez cet article En savoir plus sur les appareils pliables.
Si vous avez des commentaires sur cet article, contactez l’équipe sur Twitter @getstream_io ou l’auteur @github_skydoves.
Commentaires
Laisser un commentaire