O modelo de grade apresenta itens em um layout de grade e é útil quando os usuários dependem principalmente de imagens para fazer seleções.
Esse modelo pode ser incorporado ao modelo de guia para oferecer navegação por guias ou incluído no modelo de mapa e conteúdo para fornecer uma grade em um mapa.
O modelo de grade inclui o seguinte:
- Cabeçalho opcional (o cabeçalho é substituído por guias quando este modelo é incorporado ao modelo de guia)
- Itens de grade (consulte a observação abaixo), cada um contendo um ícone ou uma imagem de tamanho grande
- Texto principal para cada item da grade (opcional)
- Texto secundário para cada item da grade (opcional)
- Uma imagem ou um ícone (opcional)
- Um selo
- Botões de ação flutuantes opcionais
Para mais flexibilidade e para aproveitar os recursos mais recentes, use o modelo de item seccionado em vez do modelo de grade. Com o modelo "Item seccionado", é possível misturar e combinar listas e grades para criar uma estrutura de navegação personalizada.
Requisitos de UX do modelo de grade
| DEVE | Limite o comprimento das strings de texto primárias e secundárias para evitar truncamentos. |
| DEVE | Ter uma ação associada a cada item da grade (não é recomendável ter itens apenas de informação). |
| DEVE | Indique claramente o estado do item (para itens de grade que têm vários estados, como selecionado e não selecionado) por variações na imagem, no ícone ou no texto. |
| DEVE | Inclua um cabeçalho com um título opcional e ações principais e secundárias. |
| NÃO DEVE | Inclua uma barra de ações e um botão de ação flutuante ao mesmo tempo. |
| MAI | Mostre um spinner de carregamento em vez do ícone ou da imagem de um item de grade quando uma ação associada a ele estiver em andamento. |
Recursos
| Tipo | Link |
| Referência da API |
GridTemplate, GridTemplate.Builder
|