Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.
The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.
The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.
The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.
Se você já conhece os layouts canônicos de apps adaptáveis, mas não sabe quais APIs do Android usar, acesse a seção Aplicabilidade para saber qual é o layout ideal para os casos de uso do seu app.
List-detail
The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.
The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.
Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.
Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.
Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:
- If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
- If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
- If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together
List-detail is ideal for messaging apps, contact managers, interactive media browsers or any app where the content can be organized as a list of items that reveal additional information.
Implementation
您可以使用各种技术创建列表-详情布局，包括 Compose、View 和 activity 嵌入（适用于旧版应用）。如需我们帮助您确定哪项技术最适用于您的应用，请参阅适用性部分。
SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。
首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（View 或 fragment），用于表示列表和详情内容。
实现一种通信方法，以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel，因为它能存储业务逻辑，并且可在配置更改后继续留存。
SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情，二者会并排显示。如果窗口空间不足，系统会根据用户与应用的互动单独显示列表或详情。
如需查看示例实现，请参阅包含滑动窗格的列表-详情示例。
Incorporação de atividades
Use a incorporação de atividades para permitir que apps legados com várias atividades mostrem duas atividades lado a lado na mesma tela ou empilhadas (uma sobrepondo a outra). Se o app implementar a lista e os detalhes de um layout de detalhes e listas em atividades separadas, a incorporação de atividades vai permitir que você crie um layout de detalhes e listas com pouca ou nenhuma refatoração de código.
Implemente a incorporação de atividades especificando uma divisão da janela de tarefas usando um arquivo de configuração XML. A divisão define a atividade principal, que inicia a divisão, além de uma atividade secundária. Especifique uma largura mínima de exibição para a divisão usando os pontos de interrupção da classe de tamanho da janela. Quando a largura da tela fica abaixo do ponto de interrupção mínimo, as atividades aparecem uma sobre a outra. Por exemplo, se a largura mínima for 600 dp, as atividades vão aparecer uma sobrepondo a outra em telas compactas, mas lado a lado em telas médias e expandidas.
A incorporação de atividades pode ser realizada no Android 12L (nível 32 da API) e versões mais recentes. No entanto, ela também pode estar disponível em níveis mais baixos da API, se implementada pelos fabricantes de dispositivos. Quando a incorporação de atividades não está disponível em um dispositivo, o comportamento alternativo resulta nas atividades de lista ou de detalhes ocupando a janela inteira do app com base na interação do usuário.
Para mais informações, consulte Incorporação de atividades.
Para conferir um exemplo de implementação, consulte Detalhes e listas com incorporação de atividades.
Feed
A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.
Size and position establish relationships among the content elements.
Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.
Cards and lists are common components of feed layouts.
A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.
Feeds are especially well suited for news and social media apps.
Implementation
RecyclerView 可在单个列中高效呈现大量的项。GridLayoutManager 以网格形式排列各个项，支持配置项的大小和 span。
根据可用显示区域的大小配置网格列，以设置项允许的最小宽度。
如需替换 GridLayoutManager 的默认 span 设置策略（即每个项对应一个 span），可以创建自定义 SpanSizeLookup。调整 span 即可让某些项比其他项更为醒目。
如果显示屏因宽度较小而只够显示一个列，请使用 LinearLayoutManager，而不是 GridLayoutManager。
如需查看示例实现，请参阅使用 View 构建 Feed 示例。
Supporting pane
Supporting pane layout organizes app content into primary and secondary display areas.
The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.
Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.
A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.
Use cases for supporting pane include:
- Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
- Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
- Tools and settings: A media editing tool with palettes, effects, and other settings in a support pane
Implementation
辅助窗格布局是使用 LinearLayout 或 ConstraintLayout 等辅助布局实现的。建立窗口大小类别
用于将应用可用的横向显示空间量
三个类别：较小 (< 600dp)、中等 (>= 600dp) 和较大
(>= 840dp)。
针对每个窗口大小类别，按以下方式定义布局：
- 紧凑：在应用资源
layout文件夹中，放置 在主要内容下方或底部动作条内呈现辅助窗格 - 中等：在
layout-w600dp文件夹中提供辅助窗格内容，使主要内容和辅助窗格并排呈现，并平均分配横向显示空间 - 展开：在
layout-w840dp文件夹中添加辅助窗格内容，使主要内容和辅助窗格并排呈现；不过，让辅助窗格只占据横向空间的 30%，并将其余 70% 的空间留给主要内容
使用 ViewModel 在主要内容和
无论是使用 View、fragment 还是二者结合使用，都可以在辅助窗格中显示。
如需查看实现示例，请参阅以下示例：
Aplicabilidade
Os layouts canônicos criam apresentações multifacetadas de conteúdo para facilitar o acesso e a análise detalhada. Use o fluxograma a seguir para determinar qual layout e estratégia de implementação são melhores para os casos de uso do seu app.
Para encontrar exemplos de layouts canônicos implementados em diferentes tipos de app, consulte a galeria de telas grandes.
Additional resources
- Material Design — Canonical layouts