Éléments de la liste

Un affichage sous forme de liste présente le contenu sous la forme d'éléments de campagne, dans une liste à une seule colonne qui défile verticalement. Cette vue est préférable lorsque les utilisateurs font leur sélection en suivant la lecture du texte et l'affichage des données.

Les éléments de liste nécessitent moins d'espace vertical que les éléments de la grille, ce qui permet d'afficher plus d'éléments à l'écran.


Anatomie

Dans une vue Liste, chaque ligne contient une vignette représentant un élément de liste. Les actions principales peuvent remplir la carte, ce qui permet aux utilisateurs d'effectuer une action n'importe où dans la carte. Pour les actions supplémentaires représentées par des icônes et du texte, seule la région contenant les icônes et le texte est utilisable.

1. Icône principale
2. Bouton de sélection activé
3. Bouton du sélecteur désactivé
4. Texte principal et secondaire
5. Tuile de contenu

Caractéristiques techniques

Élément de liste sur une seule ligne

Élément de liste sur deux lignes

Élément de liste sur deux lignes inversé

Élément de liste comportant plusieurs lignes avec en-tête

Élément de liste à plusieurs lignes sans en-tête

Élément de liste avec dépassement de texte

Élément de liste avec actions de fractionnement

Emplacement de l'icône de l'indicateur dans les éléments de liste


Ajuster les mises en page

Ces mises en page de référence montrent comment adapter les éléments de liste aux écrans de différentes largeurs et hauteurs. (Les catégories de largeur et de hauteur sont définies dans la section Layout (Mise en page).) Notez que toutes les valeurs de pixels sont exprimées en pixels de rendu, avant tout échantillonnage sous-échantillonnage ou sur-échantillonnage.

Écrans standards, grand angle et extra larges

Écrans standards, larges et extra larges avec carte de contenu

Écrans ultra grand angle


Styles

Typographie

Style de type Police Poids Taille (dp)
Corps 1 Roboto Standard 32
Corps 3 Roboto Standard 24

Couleur

Élément Couleur(mode Jour) Couleur (mode Nuit)
Type principal / Icônes Blanc Blanc à 88%
Type secondaire / Icônes Blanc à 72% Blanc à 60%
Divider line Blanc à 22% Blanc à 12%
Arrière-plan de l'élément de liste Black Black

Taille

Élément Taille (dp)
Hauteur de l'élément de liste 96 (écrans courts) / 116 (écran standard) / 128 (écran grand écran)
Icône principale 44
Icône Troisième 24
Vignette de contenu Hauteur de l'élément de liste moins 1 dp
Avatar moyen 76
Épaisseur de la ligne de séparation 1

Exemples

Liste des paramètres – Jour
Liste des paramètres – Nuit
Liste des paramètres – Jour
Liste des paramètres – Nuit
Liste des contenus multimédias – Jour
Liste des contenus multimédias – Nuit