Pour les pages qui contiennent plus d'informations que la hauteur de l'écran ou qui nécessitent des parcours plus longs et plus immersifs, utilisez une vue de défilement.
Composants de mise en page à défilement prédéfinis
Boîte de dialogue avec pile de boutons en bas
Boîte de dialogue avec pile de boutons en bas
Boîte de dialogue avec deux boutons en bas
Exemples de mise en page de défilement personnalisée
Les écrans d'application à faire défiler ne sont pas limités aux composants définis, mais peuvent combiner des éléments pour créer la mise en page souhaitée. Faites attention à la longueur d'un écran défilant et à l'utilisation de marges et de marges intérieures responsives (en pourcentage) pour vérifier que les composants s'adaptent à la taille d'écran disponible.
Contenu supplémentaire sur les grands écrans
Liste de boutons : boutons d'icône avec une taille d'icône de 26 dp
Liste de boutons : boutons d'application avec une taille d'icône de 32 dp
Liste de boutons : boutons d'application avec une taille d'icône de 36 dp
Liste de boutons avec boutons à bascule
Liste mixte avec des éléments sur une seule ligne
Liste mixte avec des éléments sur plusieurs lignes
Liste de fiches avec des fiches d'application
Liste de cartes avec des cartes de titre
Liste de fiches avec des fiches personnalisées
Liste de texte
Comportement réactif et adaptatif
Tous les composants de la bibliothèque Compose s'adaptent automatiquement à la taille de l'écran plus large et gagnent en largeur et en hauteur. Les vues de défilement qui utilisent des pratiques de conception responsives s'adaptent généralement à une gamme de tailles d'écran. Toutefois, dans certains cas particuliers, vous pouvez utiliser un point d'arrêt pour remplacer les dimensions et augmenter les mises en page, ce qui permet d'étendre les fonctionnalités, d'améliorer la lisibilité ou de mieux adapter le contenu à l'écran.
Pour vérifier que les paramètres responsifs sont correctement définis, utilisez la checklist suivante :
- Appliquez les marges supérieure, inférieure et latérales recommandées.
- Définissez les marges extérieures en valeurs de pourcentage pour éviter le rognage au début et à la fin du conteneur à faire défiler.
- Appliquez des marges avec des valeurs DP fixes entre les éléments de l'UI.
- Envisagez d'appliquer un point d'arrêt à 225 dp pour ajouter du contenu ou rendre le contenu existant plus lisible sur les grands écrans.
