A visualização em lista mostra o conteúdo como itens de linha em uma lista de coluna única com rolagem vertical. Essa visualização é melhor quando os usuários dependem da leitura de texto e da visualização de dados para fazer a seleção.
Os itens de lista exigem menos espaço vertical do que os itens de grade, permitindo que mais itens sejam mostrados na tela.
Anatomia
Em uma visualização em lista, cada linha contém um bloco que representa um item da lista. As ações principais podem preencher o bloco para que os usuários possam iniciar a ação em qualquer lugar. Para ações suplementares que são representadas por ícones e texto, apenas a região que contém os ícones e o texto é acionável.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=7&hl=pt)
2. Botão de ativação
3. Botão do interruptor desativado
4. Texto principal e secundário
5. Bloco de conteúdo
Especificações
Item da lista de linha única
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=7&hl=pt)
Item da lista com duas linhas
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=7&hl=pt)
Item da lista de duas linhas invertido
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=7&hl=pt)
Item da lista de várias linhas com cabeçalho
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=7&hl=pt)
Item da lista com várias linhas sem cabeçalho
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=7&hl=pt)
Item da lista com estouro de texto
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=7&hl=pt)
Item da lista com ações divididas
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=7&hl=pt)
Posicionamento do ícone indicador nos itens da lista
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=7&hl=pt)
Dimensionamento de layouts
Esses layouts de referência mostram como adaptar itens de lista para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de ocorrer qualquer diminuição ou aumento de amostragem.
Telas padrão, larga e extralarga
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=7&hl=pt)
Telas padrão, ampla e extralarga com bloco de conteúdo
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=7&hl=pt)
Telas supergrandes
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=7&hl=pt)
Estilos
Tipografia
Estilo de fonte | Fonte | Peso | Tamanho (dp) |
---|---|---|---|
Texto 1 | Roboto | Normal | 32 |
Texto 3 | Roboto | Normal | 24 |
Cor
Elemento | Cor(modo diurno) | Cor (modo noturno) |
---|---|---|
Tipo principal / ícones | Branco | Branco @ 88% |
Tipo secundário / ícones | Branco @ 72% | Branco a 60% |
Linha divisória | Branco @ 22% | Branco @ 12% |
Plano de fundo do item da lista | Preto | Preto |
Tamanho
Elemento | Tamanho (dp) |
---|---|
Altura do item da lista | 96 (telas curtas) / 116 (tela padrão) / 128 (tela alta) |
Ícone principal | 44 |
Ícone terciário | 24 |
Bloco de conteúdo | Altura do item da lista menos 1 dp |
Avatar médio | 76 |
Espessura da linha divisória | 1 |
Exemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=7&hl=pt)