Layout

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.

Exemplos de espaço de trabalho do app
Exemplos de vários espaços de trabalho 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

Ilustração de pontos de interrupção 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

Ilustração do ponto de interrupção 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:

Especificação de referência de valores de padding
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:

Especificação de referência de valores de linha-chave
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.

Especificações da barra de controle minimizada
Especificação da barra de controle minimizada

A especificação para uma barra de controle minimizada inclui duas diretrizes de escalonamento:

  1. O elemento quadrado à esquerda (geralmente usado para a arte do álbum) só deve aparecer quando a largura da tela é de 930 dp ou mais.
  2. 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.
A animação abaixo mostra como a barra de controle minimizada pode ser dimensionada para telas mais largas e mais estreitas seguindo as recomendações nos layouts de referência.

Animação minimizada da barra de controle
Animação de barra de controle minimizada

Exemplo 2: grades

Grades são um exemplo de componentes que podem ser colocados e dimensionados em colunas e linhas em um layout.

Especificações da grade de adaptação
Especificações adaptáveis da grade

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.

Animação adaptável em grade
Animação adaptável em grade