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

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和“详细信息”窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或“详细信息”窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示“详细信息”窗格时，添加 BackHandler 即可移除“详细信息”窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一个高级可组合项，可简化列表详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

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

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和“详细信息”窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

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

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。

如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。

以下是使用 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)
        }
    }
}

自适应 Feed 的关键在于 columns 配置。GridCells.Adaptive(minSize = 180.dp) 会创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示可用空间中可容纳的列数。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

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 支持用于做出如下判断的窗口大小类别逻辑：同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和展开宽度，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一个高级可组合项，可简化辅助窗格布局的实现。该可组合项会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持在窗格之间导航。

以下是最小实现：

@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
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：可组合项，用于创建导航器来管理窗格可见性（例如，在较小屏幕上隐藏或显示辅助窗格）
  • mainPane：显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

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