Mises en page canoniques

Les mises en page standards sont éprouvées et polyvalentes. Elles offrent une expérience utilisateur optimale sur différents facteurs de forme.

Illustration d'écrans de grande taille affichant des mises en page standards.

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 facilitent et fiabilisent l'implémentation des mises en page.

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é.

Liste/détails

Maquette fonctionnelle d'une mise en page avec liste et vue détaillée.

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 grands écrans (voir Utiliser des classes de taille de fenêtre) affichent en même temps la liste et la vue détaillée. Lorsque l'utilisateur sélectionne un élément dans la liste, le volet de détails est mis à jour pour afficher le contenu associé à l'élément sélectionné.

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. Si la vue détaillée est affichée au départ et que l'utilisateur appuie sur le bouton "Retour", la liste s'affichera à nouveau.

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 contenus 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.

Figure 1 : Application de messagerie affichant une liste de conversations et le détail de la conversation sélectionnée.

Implémentation

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

ListDetailPaneScaffold is a high-level composable that simplifies the implementation of list-detail layouts. It automatically handles pane logic based on window size classes and supports navigation between panes.

Here is a minimal implementation using ListDetailPaneScaffold:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

The following are the key components in this example:

  • rememberListDetailPaneScaffoldNavigator: Creates a navigator to manage navigation between the list and detail panes.
  • listPane: Displays the list of items.
  • detailPane: Displays the content of a selected item.

For detailed implementation examples, see:

Flux

Maquette de mise en page de type "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.

Les groupes de contenu sont créés en attribuant la même taille aux éléments et en les positionnant ensemble. L'attention est attirée sur les éléments en les agrandissant par rapport aux éléments voisins.

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.

Figure 2 : Application de réseau social affichant des posts dans des cartes de différentes tailles.

Implémentation

A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.

For section headers, dividers, or other items designed to occupy the full width of the feed, use maxLineSpan to take up the full width of the layout.

On compact-width displays that don't have enough space to show more than one column, LazyVerticalGrid behaves just like a LazyColumn.

Here is a minimal implementation using LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

The key to an adaptive feed is the columns configuration. GridCells.Adaptive(minSize = 180.dp) creates a grid where each column is at least 180.dp wide. The grid then displays as many columns as can fit in the available space.

For an example implementation, see the Feed with Compose sample.

Volet secondaire

Maquette fonctionnelle d&#39;une mise en page avec 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 :

Figure 3 : Application de shopping avec des descriptions de produits dans un volet secondaire.

Implémentation

Compose supports window size class logic, which lets you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.

Hoist all state, including current window size class and information related to the data in the main content and supporting content.

For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 Key components in the example:

  • rememberSupportingPaneScaffoldNavigator: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
  • mainPane: Composable that displays the primary content
  • supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see:

Ressources supplémentaires

Précédent
Informations sur les requêtes pour les mises en page adaptatives
Suivant
Créer une mise en page liste/détails