Layouts canônicos

Os layouts canônicos são comprovados e versáteis, oferecendo uma experiência ideal ao usuário em vários formatos.

Representação de dispositivos de tela grande mostrando os layouts canônicos.

Os layouts canônicos têm suporte a smartphones de tela pequena, assim como tablets, dobráveis e dispositivos ChromeOS. Derivados das orientações do Material Design, os layouts são estéticos e funcionais.

O framework do Android inclui componentes especializados que tornam a implementação dos layouts direta e confiável.

Os layouts canônicos criam IUs envolventes e que melhoram a produtividade e formam a base de ótimos apps.

Detalhes de lista

Wireframe do layout de detalhes e listas.

O layout de detalhes e listas permite que os usuários descubram listas de itens que têm informações descritivas, explicativas ou outras informações complementares: os detalhes do item.

O layout divide a janela do app em dois painéis lado a lado: um para a lista e outro para os detalhes. Os usuários selecionam itens da lista para mostrar detalhes deles. Os links diretos no detalhe revelam mais conteúdo no painel de detalhes.

Telas de largura expandida (consulte Usar classes de tamanho de janela) acomodam a lista e os detalhes ao mesmo tempo. A seleção de um item da lista atualiza o painel de detalhes para mostrar o conteúdo relacionado ao item selecionado.

Telas de largura média e compacta mostram a lista ou o detalhe, dependendo da interação do usuário com o app. Quando apenas a lista está visível, a seleção de um item mostra o detalhe em vez da lista. Quando apenas o detalhe está visível, o botão "Voltar" mostra a lista novamente.

Mudanças de configuração, por exemplo, na orientação do dispositivo ou no tamanho da janela do app, podem modificar a classe de tamanho da janela da tela. Um layout de detalhes e listas responde de acordo com a mudança, preservando o estado do app:

  • Se uma tela de largura expandida mostrando os painéis de lista e de detalhes se restringir a média ou compacta, o painel de detalhes vai continuar visível, e o painel de lista vai ficar oculto.
  • Se uma tela de largura média ou compacta tiver apenas o painel de detalhes visível e a classe de tamanho da janela expandir, a lista e os detalhes vão ser mostrados juntos, e a lista vai indicar que o item correspondente ao conteúdo do painel de detalhes está selecionado.
  • Se uma tela de largura média ou compacta tiver apenas o painel da lista visível e for expandida, a lista e o painel de detalhes do marcador de posição vão aparecer juntos.

O layout de detalhes e listas é ideal para apps de mensagens, gerenciadores de contatos, navegadores de mídia interativos ou qualquer app em que o conteúdo possa ser organizado como uma lista de itens que revelam informações extras.

Figura 1. App de mensagens mostrando uma lista de conversas e os detalhes de uma conversa selecionada.

Implementação

O paradigma declarativo do Compose oferece suporte para a lógica da classe de tamanho de janela. Ela determina se os painéis de lista e de detalhes vão aparecer simultaneamente (quando a classe de tamanho da janela de largura for expandida) ou não (quando a classe de tamanho da janela de largura for média ou compacta).

Para garantir o fluxo de dados unidirecional, eleve todo o estado, incluindo a classe de tamanho da janela atual e os detalhes do item de lista selecionado, se houver algum. Assim, todos os elementos combináveis vão ter acesso aos dados e poderão ser renderizados corretamente.

Ao mostrar apenas o painel de detalhes em tamanhos de janela pequenos, adicione um BackHandler para remover o painel de detalhes e mostrar somente o painel da lista. O BackHandler não faz parte da navegação geral do app, já que o gerenciador depende da classe de tamanho da janela e do estado de detalhes selecionado.

O ListDetailPaneScaffold é um elemento combinável de alto nível que simplifica a implementação de layouts de detalhes e listas. Ele processa automaticamente a lógica do painel com base nas classes de tamanho de janela e oferece suporte à navegação entre painéis.

Confira uma implementação mínima usando ListDetailPaneScaffold:

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

Estes são os principais componentes neste exemplo:

  • rememberListDetailPaneScaffoldNavigator: cria um navegador para gerenciar a navegação entre os painéis de lista e detalhes.
  • listPane: mostra a lista de itens.
  • detailPane: mostra o conteúdo de um item selecionado.

Para exemplos detalhados de implementação, consulte:

Feed

Wireframe do layout do feed.

Um layout de feed organiza elementos de conteúdo equivalentes em uma grade configurável para uma visualização rápida e conveniente de um grande volume de conteúdo.

O tamanho e a posição estabelecem relações entre os elementos de conteúdo.

Os agrupamentos de conteúdo são criados com o mesmo tamanho dos elementos e posicionados juntos. Para chamar a atenção a um elemento, torne-o maior que elementos próximos.

Cards e listas são componentes comuns de layouts de feed.

Um layout de feed oferece suporte a exibições de quase todos os tamanhos, porque a grade pode se adaptar de uma única coluna de rolagem a um feed de conteúdo com várias colunas.

Os feeds são especialmente adequados para apps de rede social e notícias.

Figura 2. App de rede social mostrando postagens em cards de tamanhos variados.

Implementação

Um feed consiste em um grande número de elementos de conteúdo em um contêiner de rolagem vertical disposto em uma grade. As listas lentas renderizam um grande número de itens em colunas ou linhas de maneira eficiente. As grades lentas renderizam itens em grades, com suporte à configuração de tamanhos e comprimentos deles.

Configure as colunas do layout de grade com base na área de exibição disponível para definir a largura mínima permitida para itens da grade. Ao definir itens de grade, ajuste o tamanho das colunas para enfatizar alguns itens em detrimento de outros.

Para cabeçalhos de seção, divisores ou outros itens criados para ocupar toda a largura do feed, use maxLineSpan para ocupar a largura total do layout.

Em telas de largura compacta que não têm espaço suficiente para mostrar mais de uma coluna, o LazyVerticalGrid se comporta como uma LazyColumn.

Confira uma implementação mínima usando 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)
        }
    }
}
CanonicalLayoutSamples.kt

A chave para um feed adaptável é a configuração columns. GridCells.Adaptive(minSize = 180.dp) cria uma grade em que cada coluna tem pelo menos 180.dp de largura. A grade mostra o máximo de colunas que cabem no espaço disponível.

Para conferir um exemplo de implementação, consulte Feed com o exemplo do Compose.

Painel de suporte

Wireframe do layout do painel de suporte.

O layout do painel de suporte organiza o conteúdo do app nas áreas de exibição principal e secundária.

A área de exibição principal ocupa a maior parte da janela do app (geralmente cerca de dois terços) e mostra o conteúdo principal. A área de exibição secundária é um painel que ocupa o restante da janela do app e apresenta o conteúdo de suporte ao principal.

Os layouts de painel de suporte funcionam bem em telas de largura expandida (consulte Usar classes de tamanho de janela) na orientação paisagem. Telas de largura média ou compacta podem mostrar as áreas de exibição principal e secundária se o conteúdo se adaptar a espaços de exibição mais estreitos. Elas também oferecem suporte se o conteúdo extra puder estar inicialmente oculto em uma página inferior ou lateral, acessível por um controle, como um menu ou botão.

Um layout de painel de suporte difere de um layout de detalhes e listas em relação ao conteúdo principal e secundário. O conteúdo do painel secundário só é significativo em relação ao conteúdo principal. Por exemplo, uma janela de ferramentas do painel de suporte é irrelevante por si só. No entanto, o conteúdo suplementar no painel de detalhes de um layout de detalhes e listas é significativo, mesmo sem o conteúdo principal. Por exemplo, a descrição de um produto em uma lista de produtos.

Os casos de uso do painel de suporte incluem:

Figura 3. App de compras com descrições de produtos em um painel de suporte.

Implementação

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

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

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

Outros recursos

Anterior
Orientação, proporção e capacidade de redimensionamento do app
Avançar
Ofereça suporte a diferentes tamanhos de tela