Créez un flux et un rythme flexibles avec une structure et des méthodes de structuration pour votre contenu. Commencez par concevoir des conteneurs de mise en page, puis ajoutez du contenu.
1. Structure de base : grille de mise en page pour guider le contenu
Pour commencer à créer une structure solide avec des garde-fous cohérents, ajoutez des marges et des colonnes à vos mises en page.
Les marges offrent un espacement sur les bords gauche et droit de l'écran et du contenu. Une valeur de marge standard pour un dimensionnement compact est de 16 dp, mais les marges doivent s'adapter aux écrans plus grands. Le corps du contenu et les actions de votre application doivent rester dans ces marges et s'y aligner.
Vous pouvez également vous assurer que les zones sécurisées ou les encarts sont insérés à cette étape. Les encarts de la barre système empêchent les actions essentielles de tomber sous les barres système. Vous devez dessiner votre contenu derrière les barres système.
Utilisez des colonnes pour créer une structure de grille flexible pour un alignement cohérent et pour fournir une définition verticale à une mise en page en divisant le contenu dans la zone du corps. Le contenu se trouve dans les zones de l'écran contenant des colonnes. Ces colonnes structurent votre mise en page et offrent une structure pratique pour organiser les éléments.
L'importance du contenu, ou la hiérarchie, peut vous aider à déterminer le type de grille de mise en page à utiliser pour apporter plus de structure. Si votre contenu présente une hiérarchie claire, une grille de mise en page hiérarchique est appropriée. Par exemple, une mise en page éditoriale ou un écran de détails avec un grand en-tête et une image clé.
Une grille modulaire est idéale pour un contenu et une mise en page d'importance égale, mais très structurés, comme une galerie photo.
Choisissez une grille de colonnes pour des mises en page unidirectionnelles cohérentes et réactives, ou lorsque vous avez besoin de plus de flexibilité.
Quel que soit le type, la grille de mise en page doit également s'adapter aux différentes tailles et facteurs de forme.
Cet exemple utilise une grille de colonnes grid pour aligner le contenu sur une grille sous-jacente tout en conservant une taille flexible. Pour s'adapter aux différents facteurs de forme, la grille de colonnes modifie la taille et le nombre de colonnes en fonction de la taille de l'écran, ce qui permet également de mettre le contenu à l'échelle. Évitez d'être trop précis avec la grille de mise en page. Utilisez plutôt la grille de référence pour fournir des unités d'espacement cohérentes.
Commencez à ajouter du texte à la structure de mise en page. Les marges protègent le contenu des bords de l'écran. Les colonnes offrent une structure d'espacement et d'alignement cohérente.
Vous pouvez également utiliser une grille de mise en page hiérarchique pour organiser l'écran de détails.
Commencez par une grille de mise en page cohérente. Si votre contenu l'exige, cassez la grille. Même dans ce cas, vous constaterez peut-être qu'une autre grille correspond toujours aux besoins de votre contenu.
En savoir plus sur les conteneurs de mise en page, tels que les pagers et la mise en page de flux.
Les manuscrits et les maçonneries sont d'autres types de grilles de mise en page.
Quelle que soit la grille de mise en page que vous choisissez, vous pouvez également utiliser le concept de structuration des volets pour regrouper le contenu des mises en page adaptatives. Par exemple, l'exemple utilisé est un écran de détails, un volet qui peut être affiché dans une mise en page de type liste/détails.
2. Appliquer la structuration
Utilisez la structuration pour regrouper visuellement les éléments.
La structuration consiste à utiliser des espaces négatifs et des éléments visibles pour créer un regroupement visuel. Un conteneur est une forme qui représente une zone fermée. Dans une seule mise en page, vous pouvez regrouper des éléments qui partagent un contenu ou une fonctionnalité similaires et les séparer des autres éléments à l'aide d'espaces ouverts, de typographie et de séparateurs.
Android utilise des lignes, des colonnes et des cases comme blocs de construction. Vous pouvez donc concevoir la structuration de manière similaire. Regroupez des éléments similaires avec des espaces négatifs ou des divisions visibles pour vous aider à parcourir le contenu.
La structuration implicite utilise des espaces négatifs pour grouper visuellement du contenu et créer des limites de conteneur. La structuration explicite, quant à elle, utilise des objets comme des lignes et des cartes de séparation pour grouper le contenu.
La figure suivante montre un exemple d'utilisation de la structuration implicite pour contenir l'en-tête et le texte principal. La grille de colonnes est utilisée pour aligner et créer des regroupements. Les points forts sont explicitement contenus dans des cartes. Utilisation d'une iconographie et d'une hiérarchie de types pour une meilleure séparation visuelle.
3. Positionner le contenu
Une fois la grille de mise en page choisie et le contenu placé dans des conteneurs, Android propose différentes façons de gérer les éléments de contenu et de les positionner, avec des blocs de construction et des modificateurs de base ou des conteneurs de mise en page tels que la grille et la flexbox.
Déterminez si votre contenu est unidimensionnel ou bidimensionnel. Par exemple, le contenu peut circuler horizontalement, verticalement ou dans les deux sens.
Comme illustré dans la figure suivante, une mise en page d'authentification peut utiliser une mise en page de grille bidimensionnelle.
Les éléments d'interface utilisateur peuvent également être flexibles et circuler dans une seule dimension, comme les filtres ou les tags de contenu. En savoir plus sur la flexbox.
Les mises en page peuvent également utiliser une combinaison de types de mise en page. Par exemple, vous pouvez associer un carrousel ou un défilement horizontal à des cartes verticales. Vous pouvez également présenter un graphique personnalisé avec des données de liste verticales.
Vous pouvez présenter du contenu dans des lignes ou des colonnes défilantes avec des lignes et des colonnes différées.
Alignement
Comme pour le flux et l'alignement de la mise en page automatique, vous pouvez spécifier l'arrangement et l'alignement des éléments d'interface utilisateur arrangement et alignment.
Utilisez AlignmentLine pour créer des lignes d'alignement personnalisées que les mises en page parentes
pourront utiliser pour aligner et positionner leurs enfants.
À faire
À éviter
4. Mettre à l'échelle et recadrer le contenu
La mise à l'échelle est essentielle pour s'adapter au contenu dynamique, à l'orientation de l'appareil et aux tailles d'écran. Les éléments peuvent rester fixes ou être mis à l'échelle.
Spécifiez comment les images sont mises à l'échelle et positionnées dans leurs conteneurs pour vous assurer qu'elles s'affichent correctement sur n'importe quel appareil. Sinon, le point principal d'une image peut être coupé, ou l'image peut être trop petite ou trop grande pour la mise en page.
Adaptez-vous aux différents formats et orientations des appareils grâce à une mise à l'échelle et un recadrage appropriés. Comme les formats peuvent varier considérablement, spécifiez comment votre contenu gère ces scénarios.
Par exemple, une image héros pleine largeur occupe tout l'écran d'un téléphone en mode paysage.
À faire
À éviter
Si le contenu doit conserver ses proportions, comme une vidéo uniquement verticale, limitez les proportions et équilibrez l'espace vide.
À éviter
Contenu épinglé
De nombreux composants sont dotés d'interactions, de défilement et de positionnement intégrés avec des emplacements ou des échafaudages, comme les barres d'application. Certains éléments peuvent être modifiés pour rester fixes au lieu de réagir au défilement, par exemple les boutons d'action flottants qui hébergent des actions critiques. Épinglez des éléments pour une meilleure mise au point dans certains cas d'utilisation. Par exemple, épinglez une entrée de texte à un clavier pour éviter les entrées masquées.
Pour la saisie de texte, comme la messagerie et l'authentification, l'entrée est associée au clavier et la mise au point est unique.
Composants dans la mise en page
Les composants Material 3 fournissent leurs propres configurations et états pour l'interaction et le contenu.
Compose propose des mises en page pratiques pour combiner des composants Material et des modèles d'écran courants. Des composables tels que Scaffold fournissent des emplacements pour divers composants et autres éléments d'écran. En savoir plus sur les composants et la mise en page Material.