Esta seção fornece diretrizes de design para layouts de tela que podem ser dimensionados em vários tamanhos de tela.
Os valores de preenchimento e da linha de chave definidos aqui são usados em Componentes, Especificações de mídia, Especificações da Central de notificações e Especificações do discador.
Resumo da orientação (TL:DR):
- Basear layouts em categorias de tamanho de tela adequadas
- Usar uma grade de 8 dp para alinhamento
- Definir as larguras de margem como 12% do espaço de trabalho do app
- Posicionar barras de rolagem e recursos de navegação nas margens
- Usar padding para espaçamento fixo entre os elementos
Principais conceitos de layout
- Espaço de trabalho do app:a área da tela disponível para um app após considerar o espaço de tela ocupado pelo fabricante do carro e pelos recursos da IU do sistema.
- Categorias de tamanho de tela:um conjunto de quatro intervalos de largura de tela (padrão, grande, extra grande e supergrande) e três intervalos de altura da tela (curto, padrão e alto), em que "tela" refere-se ao espaço de trabalho do app em vez do espaço total de ponta a ponta.
- Padding:é um conjunto de valores de espaçamento que especifica o espaçamento vertical e horizontal fixo entre elementos e componentes em um layout.
- Linhas-chave:é um conjunto de valores de espaçamento entre larguras variáveis (determinados pelas categorias de largura) que indica o espaço horizontal entre uma margem ou uma borda de um componente e um elemento em um layout.
- Área flexível:parte de um componente, às vezes atribuído a um valor mínimo ou máximo, que pode ser dimensionado para se ajustar ao tamanho da tela.
Espaço de trabalho do app
O espaço de trabalho de um app é a área de tela disponível restante depois de considerar o espaço de tela ocupado pelos recursos do fabricante do carro e da IU do sistema. O espaço de trabalho do app precisa conter margens esquerda e direita e a tela do app, que é a área de conteúdo principal do app.
Cada margem precisa ser igual a 12% da largura do espaço de trabalho do app. As margens normalmente contêm barras de rolagem e recursos de navegação do app.
Tamanhos de tela
Os layouts de especificações 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 app.
Nas especificações destas diretrizes, essas categorias são chamadas de nome. Por exemplo, "Amplo" refere-se a todas as larguras de tela no intervalo de 930 dp a 1279 dp.
As categorias de tamanho de tela afetam as recomendações para:
- Espaçamento entre linhas-chave em componentes e elementos
- Escalonamento de áreas flexíveis dos componentes
- Quando ocultar ou exibir elementos opcionais, como a arte do álbum na barra de controle minimizada
Categorias de largura
| Padrão | Ampla | Extra grande | Supergrande | |
|---|---|---|---|---|
| Intervalo da largura da tela | 690 a 929 dp | 930 a 1.279 dp | 1.280 a 1.919 dp | ≥ 1.920 dp |
Categorias de altura
| Short | Padrão | Alta | |
|---|---|---|---|
| Intervalo da altura da tela | 0 a 609 dp | 610 a 1.199 dp | ≥ 1.200 dp |
Espaçamento
Os layouts de especificação de referência são estruturados em uma grade de 8 dp. Na prática, isso significa que os componentes e os elementos da IU nas especificações são espaçados por vários de 8 dp.
Há dois tipos de espaçamento:
Espaçamento, para espaçamento e altura fixa.
Linhas-chave, para o espaçamento entre larguras variáveis
Padding
O padding estabelece o espaçamento fixo entre a largura e a altura entre os componentes em um layout de especificação de referência. Ele também pode ditar o espaçamento fixo entre os elementos em um componente, como o espaço entre os destinos de números adjacentes no componente de teclado. Normalmente, quanto mais próxima a relação for entre dois elementos, mais restrito será o preenchimento entre eles.
Existem nove valores de padding, designados como P0 – P8.
Veja os valores de padding e os tamanhos correspondentes:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4 dp | 8 dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
Diferentemente das linhas-chave, que mudam os valores de espaçamento com base nas categorias de largura de tela, os valores de preenchimento permanecem constantes. Por exemplo, P1 é sempre 8 dp. Em alguns casos, a distância entre um conjunto específico de componentes ou elementos pode ter diferentes valores de padding nos layouts de especificações 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 padding entre os elementos em uma especificação de referência, as linhas-chave especificam a distância entre um elemento e a margem ou borda mais próxima de um componente. As linhas-chave mudam o valor com base na largura da tela. Eles oferecem uma maneira conveniente de dimensionar um layout para diferentes tamanhos de tela, mantendo o espaçamento proporcional e horizontal dos elementos.
Há cinco linhas-chave, designadas de KL0 a KL4.
Veja os valores de linha-chave para cada largura da tela:
| Largura da tela | Padrão | Ampla | Extra grande | Supergrande |
|---|---|---|---|---|
| KL0 (link em alemão) | 16dp | 24dp | 24dp | 32dp |
| KL 1 | 24dp | 32dp | 32dp | 48dp |
| KL 2 | 96dp | 112dp | 112dp | 112dp |
| KL3 (link em alemão) | 112dp | 128dp | 128dp | 152dp |
| KL 4 | 148dp | 168dp | 168dp | 168dp |
Estratégias de escalonamento
Os layouts de especificação de referência fornecem diretrizes para dimensionar apps para diferentes tamanhos de tela. Para facilitar o escalonamento, as especificações normalmente incluem:
- Uma área flexível, que faz parte de um componente que os fabricantes de carros precisam expandir ou reduzir para caber no tamanho específico da tela
- Larguras mínima e máxima recomendadas para a área flexível, com o objetivo de impedir que componentes de dimensionamento tenham tamanhos indesejáveis
- Linhas-chave são usadas para manter um espaçamento proporcional e horizontal dos elementos, que são escalonados de maneira diferente com base na categoria de largura da tela.
- Padding: para especificar o espaçamento fixo entre componentes e elementos
Opcionalmente, algumas especificações especificam se os 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 um componente em que o layout de especificação de referência recomenda ajustar a largura do componente e ocultar um elemento não essencial em tamanhos de tela menores.
A especificação para uma barra de controle minimizada inclui duas diretrizes de escalonamento:
- O elemento quadrado à esquerda (geralmente usado para a arte do álbum) só deve aparecer quando a largura da tela é de 930 dp ou mais.
- A seção de largura flexível no meio nunca deve ser mais estreita que 440 dp e pode ser dimensionada para telas maiores, desde que a largura total do componente não exceda 1.028 dp.
Exemplo 2: grades
Grades são um exemplo de componentes que podem ser colocados e dimensionados em colunas e linhas em um layout.
O número recomendado de colunas (três em telas mais estreitas, quatro em telas mais largas) depende do tamanho da tela. A largura da coluna e a altura da linha podem ser ajustadas em 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 estreitas seguindo as recomendações nos layouts de referência.
