Une mise en page définit la structure visuelle permettant à un utilisateur d'interagir avec votre application, par exemple dans une activité. Android propose une gamme de bibliothèques, de points de départ canoniques et de techniques pour afficher et positionner du contenu.
Points à retenir
Respectez les zones sécurisées de l'appareil, qui incluent des parties de l'interface utilisateur telles que les encoches d'affichage, les encarts bord à bord, les écrans de bord, les claviers logiciels et les barres système.
À faire:fournissez une mise en page flexible pour que les utilisateurs puissent interagir avec le clavier.
Vidéo 1: Fournir une mise en page flexible pour permettre aux utilisateurs d'interagir
Maintenez les interactions essentielles, comme la navigation principale, dans une zone d'écran accessible.
Figure 1:Les boutons d'action flottants (FAB) fournissent un point d'interaction proéminent et accessible Utilisez la structuration pour regrouper des contenus associés afin de guider l'utilisateur dans le contenu et les actions.
Figure 2:Cartes utilisant la structuration explicite pour regrouper le contenu avec des actions associées Assurez-vous que les contenus et les éléments d'interface utilisateur similaires sont alignés de manière cohérente.
À ne pas faire:ne perturbez pas la lisibilité en espaçant de manière incohérente des éléments similaires, ce qui peut donner l'impression que les conceptions sont désordonnées.
À faire:établissez un espacement cohérent entre les éléments similaires.
Figure 3:Ne pas perturber la lisibilité Ne vous limitez pas au mode portrait ni à une mise en page idéalisée: tenez compte des différents formats, classes de taille et résolutions que les utilisateurs peuvent rencontrer.
Ne submergez pas l'utilisateur avec un trop grand nombre d'actions par vue.
Lorsque vous créez des mises en page personnalisées, indiquez comment le contenu doit se trouver dans la mise en page à l'aide d'alignement, de contraintes ou de termes de gravité. Indiquez comment les images doivent répondre à leur conteneur pour s'afficher correctement.
Composantes d'un écran d'application Android standard
La plupart des applications Android se composent de zones que l'on appelle les barres système, la zone de navigation et le corps.
Barres système
La barre d'état et la barre de navigation (appelées collectivement barres système) affichent des informations importantes telles que le niveau de la batterie, l'heure et les alertes de notification, et permettent d'interagir directement avec l'appareil où que vous soyez. En savoir plus sur les barres système
Région de navigation
La zone de navigation représente les différentes affordances qui permettent à l'utilisateur de naviguer dans l'application et sur la plate-forme Android, mais aussi d'accéder aux actions importantes.
Région du corps
La région du corps contient le contenu de l'écran. Il se compose de regroupements et de paramètres de mise en page supplémentaires. Il doit se trouver sous la zone de navigation et la barre système.
Déclarez WindowCompat.setDecorFitsSystemWindows(window, false) pour les encarts de bord à bord.
Pour déterminer les modèles de composition et de navigation appropriés pour votre mise en page, essayez de comprendre comment les utilisateurs interagissent avec votre contenu et comment ils naviguent dans l'architecture de l'information de votre application. Cette compréhension peut guider votre conception vers une approche plus centrée sur l'utilisateur en créant une interface utilisateur sur laquelle les utilisateurs peuvent agir.
Composition et structure du contenu
Créez un flux et un rythme flexibles grâce à des méthodes de structuration et de structuration de votre contenu.
Structure de base: utilisez des marges et des colonnes pour les garde-corps visuels
Pour commencer à créer une structure solide avec des garde-corps cohérents, ajoutez des marges et des colonnes à vos mises en page.
Les marges permettent d'espacer les bords gauche et droit de l'écran et du contenu. La valeur de marge standard pour la taille compacte est de 16 dp, mais les marges doivent s'adapter pour s'adapter aux écrans plus grands. Le contenu et les actions du corps de votre application doivent respecter ces marges et s'y aligner.
Vous pouvez également vérifier les zones de sécurité ou les encarts intégrés à cette étape. Les encarts de la barre système empêchent les actions cruciales de se trouver sous les barres système. Pour en savoir plus, consultez 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 définir verticalement une mise en page en divisant le contenu dans la zone du corps. Le contenu est placé dans les zones de l'écran contenant des colonnes. Ces colonnes structurent votre mise en page et vous permettent de disposer facilement les éléments.
Utilisez une grille de colonnes pour aligner le contenu sur une grille sous-jacente, tout en conservant une mise à l'échelle flexible. La grille de colonnes peut s'adapter à différents facteurs de forme en modifiant les tailles et le nombre de colonnes en fonction de la taille de l'écran à certains moments, tout en permettant au contenu de s'adapter. Évitez d'être trop précis avec la grille de colonnes. C'est à cela que sert la grille de référence : fournir des unités d'espacement cohérentes.
Veillez à ne pas établir de grille de lignes associée, car elle peut limiter le scaling horizontal du contenu selon les orientations et les facteurs de forme. En règle générale, l'établissement de règles de marge intérieure fournit la cohérence visuelle requise.
Utiliser la structuration pour regrouper visuellement des é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 même 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.
Vous pouvez regrouper des éléments similaires avec des espaces négatifs ou des divisions visibles pour accompagner l'utilisateur tout au long du 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 la copie principale. La grille de colonnes permet d'aligner et de créer des regroupements. Les faits saillants sont explicitement inclus dans les fiches. Utilisation de l'iconographie et de la hiérarchie des types pour une meilleure séparation visuelle.
Positionnement du contenu
Android propose plusieurs façons de gérer les éléments de contenu dans leurs conteneurs respectifs, ce qui peut aider à les positionner correctement, y compris la gravité, l'espacement et la mise à l'échelle.
Gravity est une norme qui permet de placer un objet dans un conteneur potentiellement plus grand pour des cas d'utilisation spécifiques. La figure suivante montre des exemples de positionnement des objets au début et au centre (1), en haut et au centre horizontalement (2), en bas à gauche (3) et à la fin et à droite (1).
Mettre à l'échelle
Le scaling est essentiel 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.
Il est important de noter comment les images sont affichées dans leurs conteneurs avec la mise à l'échelle et la position pour vous assurer qu'elles apparaissent comme vous le souhaitez, quel que soit le contexte de l'appareil. Sinon, l'élément principal de l'image pourrait sembler tronqué, les images pourraient être trop petites ou trop grandes pour la mise en page, ou d'autres effets indésirables pourraient se produire.
Les contenus non notés peuvent s'afficher différemment de ce que vous attendez ou souhaitez.
Contenu épinglé
De nombreux éléments intègrent des interactions, un défilement et un positionnement avec des emplacements ou des échafaudages. 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 (FAB) qui hébergent des actions critiques.
Emplacement D
Utilisez AlignmentLine pour créer des lignes d'alignement personnalisées que les mises en page parentes peuvent utiliser pour aligner et positionner leurs enfants.
À ne pas faire:ne perturbez pas la lisibilité en espaçant de manière incohérente des éléments similaires, ce qui peut donner l'impression que les conceptions sont désordonnées.
À faire:établissez un espacement cohérent entre les éléments similaires.
Mise en page des composants
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
Mises en page et modèles de navigation
Si votre application contient plusieurs destinations que les utilisateurs peuvent parcourir, nous vous recommandons d'utiliser des associations de mise en page et de navigation couramment utilisées par d'autres applications. Étant donné que de nombreux utilisateurs possèdent déjà les modèles mentaux de ces associations, votre application sera plus intuitive pour eux.
Associations de mise en page et de navigation
La barre de navigation et le panneau de navigation modal sont utilisés comme modèles de navigation principaux pour les vues de mise en page parente et les destinations de navigation principales.
La barre de navigation peut contenir trois à cinq destinations de navigation au même niveau hiérarchique. Ce composant se traduit par le rail de navigation pour les grands écrans.
Bien que le panneau de navigation puisse contenir plus de cinq destinations de navigation, le modèle n'est pas aussi idéal que la barre de navigation, car il faut atteindre la barre supérieure sur les tailles compactes.
Les onglets Material 3 et la barre d'application inférieure sont des modèles de navigation secondaires que vous pouvez utiliser pour compléter la navigation principale ou pour apparaître dans les vues enfants.
Actions de mise en page
Fournissez des commandes permettant aux utilisateurs d'effectuer des actions. Les modèles courants incluent les actions de la barre supérieure, le bouton d'action flottant (FAB) et les menus.
Pour les actions les plus importantes, un bouton d'action flottant fournit un bouton grand et proéminent à l'utilisateur. Ne fournissez qu'une seule action à la fois à ce niveau. Un bouton d'action flottant peut apparaître dans plusieurs tailles et sous une forme développée, qui comprend un libellé. Utilisez Scaffold pour épingler un bouton d'action flottant, en vous assurant qu'il est toujours visible, même lorsque vous faites défiler l'écran.
Vous pouvez placer les actions secondaires dans la barre supérieure ou, si elles sont regroupées à proximité de contenus associés, sur la page.
Pour toutes les actions supplémentaires qui ne sont pas nécessaires rapidement ou fréquemment, ajoutez-les dans un menu à développer.
Mises en page canoniques
Utilisez les mises en page canoniques comme point de départ. Il s'agit de compositions prêtes à l'emploi qui aident les mises en page à s'adapter aux cas d'utilisation et aux tailles d'écran courants. Ces mises en page sont à la fois esthétiques et fonctionnelles, et dérivées des consignes Material 3.
Le framework Android inclut des composants spécialisés qui permettent d'implémenter ces mises en page de manière simple et fiable, à l'aide des API Jetpack Compose ou Views.
Mise en page Liste/Détails
Une mise en page Liste/Détail permet aux utilisateurs d'explorer des listes d'éléments avec des informations descriptives, explicatives ou complémentaires sur ces derniers sous forme de vue détaillée. Pour les tailles d'écran compactes, seule la vue Liste ou Détail est visible. Les listes, qui affichent une collection de contenus dans une mise en page basée sur des lignes, constituent la forme de mise en page la plus courante pour les applications. La mise en page "Liste et vue détaillée" est idéale pour les applications de messagerie, les gestionnaires de contacts, les explorateurs de fichiers et toute application dont le contenu peut être organisé sous la forme d'une liste d'éléments et d'une vue détaillée avec des informations supplémentaires.
Le contenu peut être statique ou dynamique.
- Le contenu dynamique est un contenu que votre application diffuse instantanément. Il est idéal pour afficher du contenu généré par l'utilisateur ou pour refléter les préférences ou les actions de l'utilisateur. Par exemple, imaginez une application photo avec une liste déroulante de photos générées par l'utilisateur, qui est unique pour chaque utilisateur et qui change à mesure que l'utilisateur importe d'autres images. Ces images sont du contenu dynamique.
- Le contenu statique représente du contenu codé en dur, qui ne peut être modifié qu'en apportant des modifications directement au code de votre application. Les images et le texte que tous les utilisateurs peuvent voir sont des exemples de contenu statique.
Le fichier Figma Now in Android fournit plusieurs exemples de mise en page. L'exemple suivant montre une collection de contenus unidimensionnelle.
Consultez Listes Material 3 pour obtenir des conseils de conception sur les composants et les spécifications des listes.
Mise en page du flux
Une mise en page de type "Flux" organise des éléments de contenu équivalents dans une grille configurable afin d'afficher rapidement et facilement une grande quantité de contenu. (Consultez les consignes Material 3 pour l'utilisation des fiches dans une collection.) Les flux peuvent être configurés en liste ou en grille sur des écrans compacts, généralement sous forme de cartes ou de cartes. Le contenu peut être dynamique, ce qui signifie qu'il est "alimenté" à partir d'une source externe dynamique telle qu'une API.
Une mise en page en grille se compose à la fois de lignes et de colonnes, qui sont constituées de principes de structuration implicites ou explicites. (Pour en savoir plus, consultez la section confinement de cette page.) Une mise en page en grille peut être appliquée de manière plus rigide ou décalée pour varier les lignes et les colonnes. Les deux doivent appliquer une mise en page et une logique cohérentes pour éviter de créer de la confusion chez les utilisateurs. Consultez les consignes Material 3 concernant la conception de flux.
Vous pouvez implémenter une mise en page de flux dans Compose avec des listes ou des grilles lazy, ou dans les vues avec RecyclerView ou CardView.
Mise en page avec volet secondaire
Une vue mobile peut nécessiter du contenu ou des commandes supplémentaires. Généralement sous la forme de feuilles ou de boîtes de dialogue, ils peuvent aider à ce que la vue principale reste claire et épurée. Consultez les conseils M3 pour utiliser la mise en page canonique du volet secondaire.
Découvrez les consignes M3 concernant les bottom sheets.
Mises en page relatives
Les entrées, le contenu ou d'autres actions peuvent apparaître par rapport à l'autre ou être limités à un conteneur parent. Les mises en page peuvent être plus personnalisées, mais veillez à respecter un regroupement, des colonnes et un espacement cohérents.
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 verticale.
Vous pouvez présenter du contenu dans des lignes ou des colonnes à défilement avec des lignes et des colonnes différées.
Découvrez les principes de base de la mise en page Compose et les éléments qui composent un composable.
L'authentification est une mise en page relative courante, comme illustré dans la figure suivante.
La mise en page plein écran est une autre mise en page courante, utilisée en mode immersif.
Si vous travaillez avec des vues plutôt qu'avec Compose, vous pouvez utiliser ConstraintLayout pour mettre en page les vues en fonction des relations entre les vues sœurs et la mise en page parente, ce qui permet de créer des mises en page volumineuses et complexes.
ConstraintLayout vous permet de créer entièrement par glisser-déposer au lieu de modifier le code XML à l'aide de l'éditeur de mise en page. Découvrez comment créer une UI avec l'éditeur de mise en page.
Adapter les mises en page
La conception adaptative consiste à concevoir des mises en page qui s'adaptent à des points d'arrêt et appareils spécifiques. Nous considérons généralement que la largeur de l'appareil détermine où la mise en page doit changer ou s'adapter. Le Web et Android utilisent des concepts de conception responsive, comme les grilles et les images flexibles, pour créer des mises en page qui répondent mieux à leur contexte.
Pour obtenir des consignes de conception sur l'adaptation des mises en page aux tailles d'écran agrandies, consultez le guide du développeur Assurer la compatibilité avec différentes tailles d'écran dans Compose et la page M3 Appliquer une mise en page. Vous pouvez également consulter la galerie Android standards sur grand écran pour trouver l'inspiration et implémenter des mises en page pour les grands écrans.
Si l'adaptation à toutes les tailles d'écran n'est pas nécessaire pour toutes les applis, elle offre malgré tout une plus grande liberté pour vos utilisateurs et améliore donc leur expérience du point de vue de l'ergonomie, de la facilité d'utilisation et de la qualité.
- Vous pouvez concevoir des écrans clés (communiquant les concepts essentiels de votre application) avec des tailles de classe comme points de rupture pour servir de guides.
- Vous pouvez également concevoir le contenu pour qu'il réagisse de manière responsive en indiquant comment il doit être contraint, développé ou réorganisé.
Pour en savoir plus sur les mises en page, consultez la page Material Design 3 (M3) Understanding layout (Comprendre la mise en page).
WebViews
Une WebView est une vue qui affiche des pages Web dans l'application. Dans la plupart des cas, nous vous recommandons d'utiliser un navigateur Web standard, comme Chrome, pour diffuser du contenu auprès de l'utilisateur. Pour en savoir plus sur les navigateurs Web, consultez le guide sur l'appel d'un navigateur avec un intent.