Les mises en page standards sont éprouvées et polyvalentes. Elles offrent une expérience utilisateur optimale sur différents facteurs de forme.
Les mises en page standards sont compatibles avec les petits écrans de téléphone, les tablettes, les appareils pliables et les appareils ChromeOS. Inspirées des consignes Material Design, ces mises en page sont à la fois esthétiques et fonctionnelles.
Le framework Android inclut des composants spécialisés qui permettent d'implémenter ces mises en page de manière simple et fiable.
Les mises en page standards permettent de créer des interfaces utilisateur attrayantes et qui favorisent la productivité, ce qui est la base d'une application de qualité.
Si vous connaissez déjà les mises en page standards des applications adaptatives, mais que vous ne les savoir quelles API Android utiliser, passez à la section Applicabilité pour déterminer quelle mise en page convient aux cas d'utilisation de votre application.
Liste/détails
Cette mise en page permet aux utilisateurs d'explorer une liste d'éléments ainsi que des informations descriptives, explicatives ou complémentaires sur ces derniers sous forme de vue détaillée.
La mise en page divise la fenêtre de l'application en deux volets côte à côte : un pour la liste et un pour la vue détaillée. Les utilisateurs doivent sélectionner un élément dans la liste pour en afficher le détail. Le contenu supplémentaire de la vue détaillée est généré à l'aide de liens profonds.
Les écrans larges (voir Utiliser les classes de taille de fenêtre) affichent en même temps la liste et la vue détaillée. Quand l'utilisateur sélectionne un élément dans la liste, la vue détaillée est mise à jour avec le détail de cet élément.
Les petits et moyens écrans affichent soit la liste, soit la vue détaillée, selon ce que l'utilisateur est en train de faire. Si la liste est affichée au départ et que l'utilisateur sélectionne un élément, la vue détaillée de cet élément s'affichera à la place de la liste. Lorsque seule la vue détaillée est visible, l'utilisateur peut appuyer sur le bouton "Retour" pour afficher de nouveau la liste.
Les changements de configuration, tels que les changements d'orientation de l'appareil ou de la taille de fenêtre de l'application, peuvent modifier la classe de taille de la fenêtre de l'écran. Une mise en page de type "Liste et vue détaillée" se comporte en conséquence, en préservant l'état de l'application :
- Si un grand écran affiche au départ à la fois la liste et la vue détaillée, puis que cet écran est rétréci et ne fait plus qu'une taille moyenne ou petite, la vue détaillée restera visible tandis que la liste sera masquée.
- Si un petit ou moyen écran n'affiche au départ que la vue détaillée, puis que cet écran est élargi, la liste et la vue détaillée seront affichées. De plus, l'élément sélectionné dans la liste sera mis en avant.
- Si un petit ou moyen écran n'affiche au départ que la liste, puis que cet écran est élargi, la liste et un espace réservé pour la vue détaillée seront affichés.
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 multimédias interactifs 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.
Implémentation
A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.
The SlidingPaneLayout library is designed for implementation of
list‑detail layouts based on views or fragments.
First, declare a SlidingPaneLayout as the root element of your XML layout.
Next, add the two child elements—either views or fragments—that
represent the list and detail content.
Implement a communication methodology to pass data between the list-detail views
or fragments. ViewModel is recommended because of its ability to store
business logic and survive configuration changes.
SlidingPaneLayout automatically determines whether to display the list and
detail together or individually. In a window that has enough horizontal space to
accommodate both, the list and detail appear side by side. In a window that
lacks sufficient space, either the list or detail is displayed depending on the
user's interaction with the app.
For an example implementation, see the List-detail with sliding pane sample.
Intégration d'activités
Utilisez l'intégration d'activités pour permettre aux anciennes applications multi-activités d'afficher deux activités côte à côte sur le même écran ou de les empiler les unes sur les autres. Si votre application implémente la liste et la vue détaillée d'une mise en page "Liste/Détail" dans des activités distinctes, l'intégration d'activités vous permet de créer facilement une mise en page de ce type avec peu de, voire aucune refactorisation du code.
Implémentez l'intégration d'activités en spécifiant un fractionnement de la fenêtre de tâche à l'aide d'un fichier de configuration XML. Le fractionnement distingue l'activité principale, qui en est à l'origine, de l'activité secondaire. Spécifiez une largeur d'écran minimale pour le fractionnement à l'aide des points d'arrêt de classe de taille de fenêtre. Lorsque la largeur d'affichage passe en dessous du point d'arrêt minimal, les activités sont affichées l'une en superposition sur l'autre. Par exemple, si la largeur d'écran minimale est de 600 dp, les activités sont affichées l'une en superposition sur les écrans compacts, mais côte à côte sur les écrans de taille moyenne et étendus.
L'intégration d'activités est compatible avec Android 12L (niveau d'API 32) ou version ultérieure, mais peut également être disponible à des niveaux d'API inférieurs si les fabricants des appareils l'ont configurée. Lorsque l'intégration d'activités n'est pas disponible sur un appareil, la solution de remplacement consiste à afficher soit la liste, soit la vue détaillée dans l'intégralité de la fenêtre d'application, selon ce que l'utilisateur est en train de faire.
Pour en savoir plus, consultez Intégration d'activités.
Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec intégration d'activités.
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.
La taille et la position établissent les relations entre les éléments de contenu.
Pour créer des groupes de contenu, vous devez créer des éléments de la même taille et les positionner ensemble. Vous pouvez attirer l'attention sur certains éléments en les créant plus grands que ceux qui se trouvent à côté.
Les cartes et les listes sont des composants courants des mises en page de type "Flux".
Une mise en page de type "Flux" est compatible avec presque tous les formats d'écran, car la grille peut occuper une ou plusieurs colonnes selon les besoins, et l'utilisateur peut faire défiler le contenu.
Cette mise en page est particulièrement adaptée aux applications d'actualités et de réseaux sociaux.
Implémentation
A RecyclerView efficiently renders a large number of items in a single
column. A GridLayoutManager lays out items in a grid, allowing
configuration of the item sizes and spans.
Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.
The GridLayoutManager default spanning strategy, which is one span per item,
can be overridden by creating a custom SpanSizeLookup. Adjust the span to
emphasize some items over others.
On compact-width displays that have enough space for only one column, use
LinearLayoutManager instead of GridLayoutManager.
For an example implementation, see the Feed with views sample.
Volet secondaire
La mise en page de type "Volet secondaire" organise le contenu de l'application en deux zones d'affichage : une principale et une secondaire.
La zone d'affichage principale occupe la majeure partie de la fenêtre de l'application (généralement environ les deux tiers) et contient le contenu principal. La zone d'affichage secondaire est un volet qui occupe le reste de la fenêtre de l'application et qui vient en renfort du contenu principal.
Cette mise en page convient aux grands écrans (voir Utiliser des classes de taille de fenêtre) en mode paysage. Elle fonctionne également sur les petits et moyens écrans à condition que le contenu puisse s'adapter à des espaces plus étroits, ou si le contenu supplémentaire peut d'abord être caché dans une bottom sheet ou un espace latéral accessible via une commande, comme un menu ou un bouton.
Cette mise en page diffère de la mise en page "Liste et vue détaillée" à cause de la relation entre le contenu principal et le contenu secondaire. Le contenu du volet secondaire n'a de sens qu'en relation avec le contenu principal. Par exemple, un volet secondaire pour un outil ne peut pas être utilisé seul. En revanche, le contenu supplémentaire qui se trouve dans le volet des détails d'une mise en page "Liste et vue détaillée" est utile même sans le contenu principal (par exemple la description d'un produit sélectionné dans une liste).
Voici quelques cas d'utilisation du volet secondaire :
- Applications de productivité : document ou feuille de calcul en contenu principal, avec les commentaires du relecteur dans un volet secondaire
- Applications multimédias : vidéo en streaming en contenu principal, et liste de vidéos similaires dans un volet secondaire ; description d'un album de musique en contenu principal, et playlist dans un volet secondaire
- Outils et paramètres : outil de montage multimédia avec des palettes, des effets et d'autres paramètres dans un volet d'assistance
Implémentation
A supporting pane layout is implemented using a helper layout such as
LinearLayout or ConstraintLayout. Establish the window size classes
that divide the amount of horizontal display space available for your app into
three categories: compact (< 600dp), medium (>= 600dp), and expanded
(>= 840dp).
For each window size class, define layouts as follows:
- Compact: In the app resources
layoutfolder, place content that renders the supporting pane below the main content or inside a bottom sheet - Medium: In the
layout-w600dpfolder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally - Expanded: In the
layout-w840dpfolder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content
Use a ViewModel for communication between the main content and the
supporting pane whether using views, fragments, or a combination.
For implementation examples, see the following samples:
Applicabilité
Les mises en page standards permettent de présenter le contenu de plusieurs manières pour en faciliter l'accès et l'exploration. L'organigramme suivant vous permet de déterminer la mise en page et la stratégie d'implémentation les plus adaptées aux cas d'utilisation de votre application.
Pour obtenir des exemples de mises en page standards mises en œuvre dans différents types d'applications, consultez la galerie sur grand écran.
Ressources supplémentaires
- Material Design — Mises en page standards