Plus de 300 millions d'appareils Android à grand écran, dont des tablettes, les appareils pliables, les appareils ChromeOS, les écrans de voiture et les téléviseurs sont d'ores et déjà utilisés. en continu. Afin d'offrir une expérience utilisateur optimale sur le nombre croissant et la diversité des appareils à grand écran, ainsi que sur les téléphones standards des applications adaptatives.
Que sont les applications adaptatives ?
La refonte adaptative des mises en page d'applications en fonction des modifications apportées à l'affichage des applications, principalement les changements de taille de la fenêtre de l'application. Mais les applications adaptatives s'adaptent également des changements dans la position des appareils pliables (position à plat ou livre, par exemple) ; et les changements de densité d'écran et de taille de police.
Au lieu de simplement étirer ou réduire les éléments de l'interface utilisateur en réponse à différentes tailles de fenêtre, les applications adaptatives remplacent les composants de mise en page, et affichent ou masquent le contenu. Par exemple, sur les téléphones standards, une application adaptative peut afficher un bouton une barre de navigation, mais sur les grands écrans, un rail de navigation. Sur les grands écrans, les applications adaptatives affichent davantage de contenu, par exemple une mise en page à deux volets avec vue détaillée en liste ; sur petits écrans, moins de contenu, que ce soit la liste ou les détails.
À l'époque où le téléphone était axé sur les téléphones, les applications s'affichaient en plein écran. Aujourd'hui, les applications fonctionnent dans mode multifenêtre dans des fenêtres de taille arbitraire indépendantes de l'écran de l'appareil la taille de l'image. Les utilisateurs peuvent modifier la taille de la fenêtre à tout moment. Ainsi, même sur un seul appareil, les applications doivent être adaptatives.
Les applications adaptatives offrent un excellent rendu et fonctionnent bien sur n'importe quel appareil, quelle que soit la configuration.
Pourquoi créer des interfaces utilisateur adaptatives ?
Les utilisateurs s'attendent à ce que votre application fonctionne parfaitement sur tous leurs appareils et qu'elle leur offre des fonctionnalités améliorées sur les grands écrans. Les utilisateurs effectuent plusieurs tâches en même temps en mode multifenêtre pour une expérience améliorée dans les applications et une productivité accrue.
Les applications limitées à une seule tâche sur les téléphones standards passent à côté d'un utilisateur en pleine expansion de nombreuses possibilités.
Google Play
Google Play propose des collections d'applications dédiées aux tablettes et aux appareils pliables, des recommandations, qui permettent aux utilisateurs de découvrir des applications de haute qualité.
Play classe les applications et les jeux optimisés pour les grands écrans plus haut que ceux non optimisés applications. Le classement est basé sur les consignes relatives à la qualité des applications sur grand écran. Meilleure qualité le classement augmente la visibilité en permettant aux utilisateurs multi-appareils de voir des notes et des avis spécifiques aux grands écrans sur leur téléphone.
Les applications qui ne répondent pas aux normes de qualité du Play Store sur les grands écrans affichent une sur la page d'informations de l'application. Cet avertissement informe les utilisateurs que l'application de ne pas bien fonctionner sur leurs appareils à grand écran.
Créez des applications adaptatives pour améliorer la visibilité sur Google Play et maximiser les le nombre d'appareils qui peuvent télécharger votre application.
Premiers pas
Pensez à la conception adaptative dans toutes les phases du développement d'applications, de la planification le déploiement. Informer les designers graphiques sur la conception adaptative. Concevez votre application pour être adaptable, et vous créerez une application qui soit gérable, extensible et prête pour les futurs facteurs de forme et modes de fenêtrage.
Pour créer une application adaptative compatible avec toutes les tailles et configurations d'affichage, procédez comme suit : les éléments suivants:
- Utiliser des classes de taille de fenêtre pour prendre des décisions concernant la mise en page
- Compiler avec la bibliothèque Material 3 de Compose Adaptive
- Saisie de données au-delà du toucher
- Tester sur tous les types d'appareils
Classes de taille de fenêtre
Les dimensions de la fenêtre de l'application peuvent varier selon les appareils appareil pliable dans le cas des appareils pliables, même lorsque l'application est en plein écran. Chaque orientation d'appareil produit un format différent. Dans le mode multifenêtre, la taille de la fenêtre de l'application, le format et l'orientation différent de celui affiché sur l'écran de l'appareil.
Les applications adaptatives simplifient et généralisent le problème de détermination et de gestion taille de la fenêtre, format et orientation en ne tenant compte que de la fenêtre de l'application lors de l'affichage des mises en page, ce qui fonctionne également lorsque la fenêtre de l'application est affichée en plein écran.
Les classes de taille de fenêtre classent les fenêtres d'application en trois catégories : compact, moyenne ou développé en fonction de la largeur ou de la hauteur de la fenêtre.
Calculez la WindowSizeClass de votre application à l'aide de la
Fonction de niveau supérieur currentWindowAdaptiveInfo() de Compose
Bibliothèque adaptative Material 3. La fonction renvoie une instance de
WindowAdaptiveInfo, qui contient windowSizeClass. Votre application
reçoit des mises à jour chaque fois que la classe de taille de fenêtre change:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Volets de contenu
La mise en page d'une activité est parfois appelée écran. Par exemple, votre application peut avoir un écran d'accueil, un écran de liste et un écran d'informations sur l'article. La la terminologie implique que chaque activité occupe l'écran de l'appareil.
Toutefois, sur les écrans d'appareils suffisamment grands pour prendre en charge la largeur étendue classe de taille de fenêtre, plusieurs écrans d'activité peuvent s'afficher à l'écran en même temps. Le terme volet est un terme plus précis désignant l'affichage du contenu des activités individuelles.
Les classes de taille de fenêtre vous permettent de déterminer le nombre de volets de contenu à afficher mises en page à plusieurs volets, comme spécifié dans Material Design.
Vous pouvez naviguer dans les volets. Sur les classes de taille de fenêtre compacte et moyenne, les applications affichent une volet unique ; La navigation vers n'importe quelle destination affiche donc un volet.
Avec la classe de taille de fenêtre agrandie, les applications peuvent afficher le contenu associé dans plusieurs volets, tels qu'une mise en page de type "Liste et vue détaillée". La navigation vers l'un ou l'autre volet affiche la mise en page à deux volets. Si la taille de la fenêtre passe à compacte ou moyenne, les applications adaptatives n'affichent qu'un seul volet, la destination de navigation, soit la liste le détail.
|
|
|
Compose Material 3 adaptatif
Jetpack Compose est l'approche déclarative moderne pour créer des applications adaptatives sans la duplication et la charge de maintenance liées à plusieurs fichiers de mise en page.
La bibliothèque adaptative de Compose Material 3 contient des composables qui gèrent les classes de taille de fenêtre, les composants de navigation, les mises en page à plusieurs volets et positions des appareils pliables et emplacement de la charnière, par exemple:
NavigationSuiteScaffold: passe automatiquement d'une barre de navigation à une autre et un rail de navigation en fonction de la classe de taille de fenêtre de l'application et de la position de l'appareil.ListDetailPaneScaffold: implémente la version canonique liste/détails mise en page.Adapte la mise en page à la taille de la fenêtre de l'application. Il présente une liste et le détail un élément de liste dans des volets côte à côte sur la taille de la fenêtre développée mais uniquement la liste ou les détails sur les fenêtres de taille compacte et moyenne classes.
SupportingPaneScaffold: implémente le volet canonique secondaire. mise en page.Présente le volet de contenu principal et un volet secondaire sur la fenêtre développée classe de taille, mais uniquement le volet de contenu principal sur les fenêtres de taille compacte et moyenne classes.
La bibliothèque adaptative de Compose Material 3 est une dépendance indispensable pour développer des applications adaptatives.
Configuration et continuité
Les applications adaptatives préservent la continuité lors des changements de configuration.
Un changement de configuration se produit lorsque la fenêtre de l'application est redimensionnée, la position d'une les changements d'appareils pliables, la densité de l'écran ou les polices.
Par défaut, les modifications de configuration recréent l'activité dans l'application, ainsi que toute l'activité
est perdu. Pour assurer la continuité, les applications adaptatives enregistrent l'état dans le
la méthode onSaveInstanceState() de l'activité ou dans un ViewModel.
Stratégie
Les applications adaptatives réagissent aux changements de position des appareils pliables. Stratégies incluent la position à plat et debout.
L'interface WindowInfoTracker de Jetpack WindowManager vous permet de :
obtenir la liste des objets DisplayFeature pour l'appareil ; Entre les écrans
est FoldingFeature.State, ce qui indique si l'appareil
entièrement ou à moitié ouvert.
La bibliothèque adaptative de Compose Material 3 fournit les
fonction de niveau supérieur currentWindowAdaptiveInfo(), qui renvoie une
Une instance de WindowAdaptiveInfo contenant windowPosture.
Saisie non tactile
Les utilisateurs connectent souvent des claviers, pavés tactiles, souris et stylets externes à des appareils dotés d'un écran. Les périphériques améliorent la productivité des utilisateurs, la précision l’expression personnelle et l’accessibilité. La plupart des appareils ChromeOS sont livrés avec claviers et pavés tactiles intégrés.
Les applications adaptatives prennent en charge les périphériques d'entrée externes, mais une grande partie du travail est faite pour par le framework Android:
Jetpack Compose 1.7 ou version ultérieure: navigation par onglet avec le clavier et souris ou les clics, la sélection et le défilement avec le pavé tactile sont pris en charge par défaut.
Bibliothèque Jetpack
androidx.compose.material3: permet aux utilisateurs d'écrire dans n'importe quel composantTextFieldà l'aide d'un stylet.Outil d'aide pour les raccourcis clavier: crée un clavier pour la plate-forme Android et les applications. et les raccourcis visibles par les utilisateurs. Publier les raccourcis clavier de votre application dans de l'outil d'aide aux raccourcis clavier en remplaçant le paramètre Rappel de fenêtre
onProvideKeyboardShortcuts()
Pour assurer une compatibilité totale avec les facteurs de forme de toutes tailles, les applications adaptatives permettent de saisir de données.
Tester des applications adaptatives
Testez différentes tailles d'écran et de fenêtre, ainsi que différentes configurations d'appareil. Utilisez des captures d'écran côté hôte et des aperçus Compose pour vérifier la mise en page de votre application. Exécutez votre application sur des émulateurs Android Studio et sur des appareils Android distants hébergés dans centres de données Google.
Consignes relatives à la qualité des applications sur grand écran
Les consignes relatives à la qualité des applications sur grand écran garantissent le bon fonctionnement de votre application adaptative. sur les tablettes, les pliables et les appareils ChromeOS. Ces consignes incluent des tests qui vous permettent de vérifier le fonctionnement des applications pour les parcours utilisateur critiques. Bien que le se concentrent sur les grands écrans, elles sont compatibles avec toutes les tailles d'écran.
Configurations multiples
L'interface DeviceConfigurationOverride dans Compose 1.7 et versions ultérieures
vous permet d'ignorer divers aspects de la configuration de l'appareil. L'API
simule différentes configurations d'appareils de manière localisée
le contenu composable que vous souhaitez tester. Par exemple, vous pouvez tester plusieurs
des tailles d'interface utilisateur arbitraires en une seule exécution de votre suite de tests sur un seul appareil ou
émulateur d'application.
La fonction d'extension DeviceConfigurationOverride.then() vous permet d'effectuer les opérations suivantes :
tester plusieurs paramètres de configuration, tels que la taille de police, les paramètres régionaux, le thème
la taille de la mise en page.
Captures d'écran côté hôte
Les tests de captures d'écran côté hôte sont un moyen rapide et évolutif de vérifier l'état visuel l'apparence des mises en page de votre application. Utilisez des captures d'écran côté hôte pour tester votre interface utilisateur pour une différentes tailles d'affichage.
Pour en savoir plus, consultez Test de captures d'écran de l'aperçu de Compose.
Aperçus Compose
Les aperçus Compose vous permettent de vérifier l'interface utilisateur de votre application dans la vue Conception d'Android
dans Google Marketing Platform Studio. Les aperçus utilisent des annotations telles que @PreviewScreenSizes,
@PreviewFontScale et @PreviewLightDark pour afficher des composables
contenus dans différentes configurations. Vous pouvez même interagir avec les aperçus.
Android Studio met également en évidence les problèmes d'usabilité courants dans les aperçus, tels que de boutons ou de champs de texte trop larges.
Pour en savoir plus, consultez Prévisualiser votre UI avec des aperçus composables.
Émulateurs
Android Studio propose plusieurs émulateurs pour tester différentes tailles de mise en page:
- Émulateur redimensionnable: émule un téléphone, une tablette ou un appareil pliable. vous passez de l'un à l'autre à la volée
- Émulateur Pixel Fold: émule le Pixel Fold pour téléphone pliable à grand écran
- Émulateur Pixel Tablet: émule l'appareil Pixel Tablet à grand écran
- Émulateur de bureau: permet de tester le fenêtrage de format libre, le survol avec la souris et raccourcis clavier
Streaming via un appareil distant
Connectez-vous en toute sécurité à des appareils Android distants hébergés dans les centres de données Google et exécutez sur les derniers appareils Pixel et Samsung. Installer et déboguer des applications, exécuter les commandes ADB, et de faire pivoter et plier les appareils pour vous assurer que votre application fonctionne bien sur un d’une variété d’appareils réels.
Le streaming sur des appareils distants est intégré à Android Studio. Pour plus d'informations, consultez la section Android Device Streaming, optimisé par Firebase.
Ressources supplémentaires
- Présentation I/O: Créer des applications Android adaptatives