Les dispositions de vue d'application à défilement incluent les listes (TransformingLazyColumn) et les boîtes de dialogue.
Ces mises en page constituent la majorité des écrans d'application et représentent un ensemble de composants qui doivent s'adapter aux tailles d'écran plus grandes. Vérifiez que les composants sont responsifs, c'est-à-dire qu'ils remplissent la largeur disponible et adoptent les ajustements TransformingLazyColumn lorsque la hauteur de l'écran est plus importante. Ces mises en page sont déjà conçues de manière responsive. Nous avons quelques recommandations supplémentaires pour exploiter pleinement l'espace disponible.
Créer des conceptions responsives et optimisées
Pour aider vos mises en page à s'adapter aux tailles d'écran plus grandes, nous avons mis à jour le comportement de nos mises en page et composants pour qu'ils disposent d'un comportement responsif intégré, y compris des marges et des marges intérieures basées sur des pourcentages. Pour y remédier, nous avons mis à jour les mises en page et les composants de notre bibliothèque d'UI Android avec un comportement responsif intégré, y compris des marges et des marges intérieures basées sur des pourcentages. Si vous utilisez nos composants Compose, vous pouvez hériter automatiquement de cette réactivité.
Pour les conceptions d'écran uniques, effectuez des tests approfondis sur différentes tailles d'écran, en vous assurant que les composants et les éléments s'adaptent facilement et en évitant le recadrage du contenu. Nos marges en pourcentage aident les espaces à s'adapter efficacement. Nous vous recommandons d'utiliser un point d'inflexion à 225 dp pour ajouter des informations supplémentaires et améliorer les fonctionnalités sur les écrans de montre plus grands.
Vérifier que les composants remplissent la largeur disponible
Tous les composants sont conçus de manière responsive, ce qui signifie qu'ils remplissent la largeur et la hauteur disponibles. Assurez-vous de disposer des marges nécessaires pour que le contenu ne soit pas rogné par l'écran arrondi.
Afficher des caractères de texte supplémentaires
La plupart des composants comportent des zones de texte qui remplissent la largeur disponible. Cela signifie qu'ils gagnent automatiquement en nombre de caractères à mesure que la largeur de l'écran augmente.
Créer des conceptions adaptatives et différenciées
Comme les mises en page à défilement affichent automatiquement plus de ce qui était auparavant masqué sous le pli de l'écran, vous n'avez pas besoin de faire grand-chose pour ajouter de la valeur. Chaque composant remplit la largeur disponible. Dans certains cas, un composant peut gagner des lignes de texte supplémentaires (comme les fiches) ou s'étirer pour remplir la largeur disponible (comme les boutons d'icônes).
Pour exploiter au mieux l'espace supplémentaire sur les écrans plus grands, ajoutez un point d'arrêt de taille à 225 dp. Ce point d'inflexion permet d'afficher du contenu supplémentaire, d'inclure plus de boutons ou de données, ou de modifier la mise en page pour mieux l'adapter à l'écran plus grand. Cela nécessite une conception différente pour chaque point d'arrêt. La conception pour les écrans plus grands (225 et plus) peut inclure les éléments supplémentaires suivants:
Augmenter la taille ou modifier l'état des composants existants
Cela peut être fait pour afficher plus de détails ou rendre le contenu plus lisible.
Mises en page optimisées et différenciées
La mise en page peut légèrement changer après le point d'arrêt de 225 dp, de sorte que le contenu au-dessus de la ligne de flottaison dans la vue par défaut soit optimisé. Toutefois, tout le contenu en dessous de la ligne de flottaison doit toujours être disponible, quelle que soit la taille de l'écran.
Comportement responsif et adaptatif
Tous les composants de la bibliothèque Compose s'adaptent automatiquement à la taille d'écran plus large, et gagnent en largeur et en hauteur. Les vues de défilement qui utilisent les pratiques de responsive design s'adaptent généralement à différentes tailles d'écran. Toutefois, dans certains cas particuliers, vous pouvez utiliser un point d'arrêt pour remplacer les dimensions et améliorer les mises en page, ce qui permet d'étendre les fonctionnalités, d'améliorer la visibilité ou d'adapter le contenu à l'écran.
Toutes les marges supérieure, inférieure et latérale doivent être définies en pourcentages pour éviter le recadrage et assurer une mise à l'échelle proportionnelle des éléments. Notez que le PositionIndicator s'affiche lorsque l'utilisateur fait défiler l'écran et qu'il épouse automatiquement le contour de l'écran, quelle que soit sa taille.
Checklist
- Appliquez les marges recommandées en haut, en bas et sur les côtés.
- Définissez les marges extérieures en valeurs de pourcentage pour éviter le recadrage au début et à la fin du conteneur à faire défiler.
- Appliquez des marges en valeurs DP fixes entre les éléments d'interface utilisateur.
- Envisagez d'appliquer un point d'arrêt à 225 dp pour présenter du contenu supplémentaire ou rendre le contenu existant plus visible sur les écrans de plus grande taille.
Créer des expériences différenciées
Les vues à défilement sont hautement personnalisables et vous pouvez ajouter n'importe quelle combinaison de composants dans n'importe quel ordre. Les marges supérieure et inférieure peuvent changer en fonction des composants situés en haut et en bas. Cela permet d'éviter que le contenu ne soit coupé par la courbe croissante de l'écran.
