Esta seção fornece diretrizes de design para layouts de tela que podem ser dimensionados para uma variedade de tamanhos de tela.
Os valores de preenchimento e espaçamento definidos aqui são usados em Componentes , especificações de Mídia , especificações da Central de Notificações e especificações do Discador .
Guia resumido (TL;DR):
- Baseie os layouts em categorias de tamanho de tela apropriadas.
- Use uma grade de 8 casas decimais para alinhamento.
- Defina as margens para 12% da área de trabalho do aplicativo.
- Coloque as barras de rolagem e os elementos de navegação nas margens.
- Use preenchimento para espaçamento fixo entre elementos.
Conceitos-chave de layout
- Espaço de trabalho do aplicativo: a área da tela disponível para um aplicativo após considerar o espaço ocupado pela fabricante do carro e pelos recursos da interface do usuário do sistema.
- Categorias de tamanho de tela: Um conjunto de 4 faixas de largura de tela (padrão, larga, extra larga e super larga) e 3 faixas de altura de tela (curta, padrão e alta), onde "tela" se refere ao espaço de trabalho do aplicativo, e não ao espaço total de uma extremidade à outra.
- Padding: Um conjunto de valores de espaçamento que especificam o espaçamento vertical e horizontal fixo entre elementos e componentes em um layout.
- Linhas-chave: Um conjunto de valores de espaçamento de largura variável – determinados por categorias de largura – que indicam o espaço horizontal entre uma margem ou borda de componente e um elemento em um layout.
- Área flexível: Uma parte de um componente, às vezes com um valor mínimo ou máximo atribuído, que pode ser dimensionada para se ajustar ao tamanho da tela.
Espaço de trabalho do aplicativo
O espaço de trabalho de um aplicativo é a área disponível na tela após considerar o espaço ocupado pelo fabricante do carro e pelos recursos da interface do sistema. O espaço de trabalho do aplicativo deve conter as margens esquerda e direita e a tela do aplicativo, que é a área de conteúdo principal do aplicativo.
Cada margem deve ser igual a 12% da largura da área de trabalho do aplicativo. As margens geralmente contêm barras de rolagem e elementos de navegação do aplicativo.
Tamanhos de tela
Os layouts de especificação de referência são vinculados a um conjunto de categorias de tamanho de tela com base na largura e altura do espaço de trabalho do aplicativo .
Nas especificações ao longo destas diretrizes, essas categorias são referidas pelo nome. Por exemplo, "Wide" refere-se a todas as larguras de tela no intervalo de 930dp a 1279dp.
As categorias de tamanho de tela afetam as recomendações para:
- Espaçamento entre linhas-chave em componentes e elementos
- Dimensionamento das áreas flexíveis dos componentes
- Quando ocultar ou exibir elementos opcionais, como a capa do álbum na barra de controle minimizada.
Categorias de largura
| Padrão | Largo | Extra largo | Super amplo | |
|---|---|---|---|---|
| Faixa de largura da tela | 690 – 929dp | 930 – 1279dp | 1280 – 1919dp | ≥ 1920 dp |
Categorias de altura
| Curto | Padrão | Alto | |
|---|---|---|---|
| Faixa de altura da tela | 0 – 609 dp | 610 – 1199dp | ≥ 1200 dp |
Espaçamento
Os layouts das especificações de referência são estruturados em uma grade de 8dp. Na prática, isso significa que os componentes e elementos da interface do usuário nas especificações são espaçados por múltiplos de 8dp.
Existem dois tipos de espaçamento:
Preenchimento (padding) , para espaçamento de largura e altura fixas.
Linhas-chave , para espaçamento de largura variável
Acolchoamento
O preenchimento (padding) define um espaçamento fixo de largura e altura entre os componentes em um layout de especificação de referência. Ele também pode determinar o espaçamento fixo entre elementos dentro de um componente, como o espaço entre alvos numéricos adjacentes no componente do teclado numérico. Normalmente, quanto mais próxima a relação entre dois elementos, menor o preenchimento entre eles.
Existem 9 valores de preenchimento, designados como P0 – P8.
Aqui estão os valores de preenchimento e seus respectivos tamanhos:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
Ao contrário das linhas-chave , que alteram os valores de espaçamento com base nas categorias de largura da tela, os valores de preenchimento permanecem constantes. Por exemplo, P1 é sempre 8dp. Em alguns casos, no entanto, a distância entre um conjunto específico de componentes ou elementos pode ter valores de preenchimento diferentes nos layouts de referência para diferentes tamanhos de tela. Por exemplo, o espaçamento vertical recomendado entre os itens da grade é P4 para telas curtas e P5 para telas padrão e altas.
Linhas-chave
Em vez de indicar o espaçamento entre elementos em uma especificação de referência, as linhas-chave especificam a distância de um elemento até a margem ou borda mais próxima de um componente. Os valores das linhas-chave variam de acordo com a largura da tela. Elas oferecem uma maneira prática de dimensionar um layout para diferentes tamanhos de tela, mantendo o espaçamento horizontal proporcional entre os elementos.
Existem 5 linhas principais, designadas como KL0 a KL4.
Aqui estão os valores das linhas-chave para cada largura de tela:
| Largura da tela | Padrão | Largo | Extra largo | Super amplo |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | 112dp |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | 168dp |
estratégias de escalonamento
Os layouts de especificação de referência fornecem diretrizes para dimensionar aplicativos para diferentes tamanhos de tela. Para auxiliar em um dimensionamento suave, as especificações normalmente incluem:
- Uma área flexível é uma parte de um componente que as montadoras devem expandir ou contrair para se ajustar ao tamanho específico da tela.
- Larguras mínimas e máximas recomendadas (opcionais) para a área flexível, destinadas a evitar o dimensionamento de componentes para tamanhos indesejáveis.
- Linhas-guia são usadas para manter o espaçamento horizontal proporcional dos elementos, que são dimensionados de forma diferente com base na categoria de largura da tela.
- Padding , para especificar espaçamento fixo entre componentes e elementos.
Opcionalmente, algumas especificações definem se certos elementos devem ser ocultados ou exibidos com base na largura da tela.
Exemplo 1: Barra de controle minimizada
A barra de controle minimizada é um exemplo de componente para o qual o layout de referência recomenda ajustar a largura do componente e ocultar um elemento não essencial em telas menores.
A especificação para uma barra de controle minimizada inclui 2 diretrizes de dimensionamento:
- O elemento quadrado à esquerda (normalmente usado para capas de álbuns) deve aparecer apenas quando a largura da tela for de 930dp ou maior, e
- A seção de largura flexível no meio nunca deve ser mais estreita que 440 dp e pode ser ampliada para telas mais largas, desde que a largura total do componente não exceda 1028 dp.
Exemplo 2: Grades
As grades são um exemplo de componentes que podem ser posicionados e dimensionados em colunas e linhas dentro de um layout.
O número recomendado de colunas (3 em telas mais estreitas, 4 em telas mais largas) depende do tamanho da tela. A largura da coluna e a altura da linha podem ser ajustadas dentro de uma categoria de tela, desde que as grades nunca sejam menores que as larguras mínimas recomendadas. A animação abaixo mostra como as grades podem ser dimensionadas para telas mais largas e mais estreitas, seguindo as recomendações nos layouts de referência.
