Os layouts canônicos são comprovados e versáteis, oferecendo uma experiência ideal ao usuário em vários formatos.
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.
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.
Detalhes de lista
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.
Implementação
Um layout de detalhes e listas pode ser criado com várias tecnologias, incluindo Compose, visualizações e incorporação de atividades (para apps legados). Consulte a seção Aplicabilidade para decidir qual tecnologia é mais adequada para seu app.
A biblioteca SlidingPaneLayout foi criada para a implementação de
layouts de detalhes e listas com base em visualizações ou fragmentos.
Primeiro, declare um SlidingPaneLayout como o elemento raiz do seu layout XML.
Em seguida, adicione os dois elementos filhos (visualizações ou fragmentos) que
representam a lista e o conteúdo detalhado.
Implemente uma metodologia de comunicação para transmitir dados entre as visualizações ou os fragmentos de detalhes e listas. O ViewModel é recomendado devido à capacidade de armazenar
a lógica de negócios e sobreviver a mudanças de configuração.
SlidingPaneLayout determina automaticamente se a lista e os detalhes vão aparecer juntos ou individualmente. Em uma janela com espaço horizontal suficiente para
acomodar ambos, a lista e os detalhes aparecem lado a lado. Em uma janela sem espaço suficiente, a lista ou os detalhes vão aparecer dependendo da interação do usuário com o app.
Para conferir um exemplo de implementação, consulte o exemplo Detalhes da lista com painel deslizante.
activity 嵌入
借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。
如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。
Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。
如需了解详情，请参阅 activity 嵌入。
如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。
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.
Implementação
Uma RecyclerView renderiza um grande número de itens em uma única
coluna de maneira eficiente. Um GridLayoutManager mostra os itens em uma grade, permitindo
a configuração dos tamanhos e comprimentos deles.
Configure as colunas da grade com base no tamanho da área de exibição disponível para definir a largura mínima permitida para itens.
A estratégia de tamanho padrão de GridLayoutManager, que é um tamanho por item,
pode ser substituída criando um SpanSizeLookup personalizado. Ajuste o tamanho para
destacar alguns itens em vez de outros.
Em telas de largura compacta que têm espaço suficiente para apenas uma coluna, use
LinearLayoutManager em vez de GridLayoutManager.
Para conferir um exemplo de implementação, consulte o exemplo Feed com visualizações.
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:
- Apps de produtividade:um documento ou planilha com comentários de revisores em um painel de suporte.
- Apps de mídia:um streaming de vídeo complementado por uma lista de vídeos relacionados em um painel de suporte ou a representação de um álbum de músicas complementado por uma playlist.
- Ferramentas e configurações:uma ferramenta de edição de mídia com paletas, efeitos e outras configurações em um painel de suporte.
Implementação
辅助窗格布局是使用 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.
Outros recursos
- Material Design: Layouts canônicos (link em inglês)