Les listes sont des conteneurs d'éléments avec défilement et mise au point intégrés.
Principes
Organisation claire : les listes doivent présenter les informations de manière claire et facilement lisible à la verticale.
Présentation cohérente des éléments : les éléments de liste doivent suivre une structure visuelle cohérente.
Focus et navigation : dans les interfaces reposant sur la navigation directionnelle, les listes doivent indiquer clairement l'élément actuellement sélectionné.
Interactivité : les éléments de liste représentent souvent des éléments sélectionnables ou sur lesquels il est possible d'effectuer une action.
Utilisation et emplacement
Les listes peuvent contenir différents contenus frères avec des éléments répétables. Contrairement aux piles, les listes remplissent le conteneur de vue de l'application.
Les listes peuvent afficher un ou plusieurs éléments sélectionnables dans une vue.
Utiliser des caches pour indiquer le contenu en trop
Lorsqu'une liste contient plus d'éléments que ne peut en afficher une vue, un scrim noir est utilisé près des limites de la liste.
Les listes peuvent utiliser un titre si nécessaire
Un titre statique ou fixe peut être utilisé dans une liste pour plus de clarté.
À éviter
Utiliser la profondeur pour indiquer la mise au point
Les éléments de liste se déplacent entre les niveaux 0 et +4 pour les états non sélectionnés et sélectionnés.
Les éléments de liste peuvent être interactifs
Les éléments d'une liste peuvent servir d'actions. Limiter l'action à l'élément de la liste
Anatomie
La liste est composée d'un conteneur à défilement et d'éléments de liste espacés de manière cohérente. Les listes doivent défiler verticalement, avec un dépassement minimal, lorsque le nombre d'éléments dépasse la fenêtre d'affichage.
A. Conteneur : zone de défilement
B. Élément de liste
C. Barres système
Élément de liste : chaque élément individuel de la liste.
A. Forme
B. Bordure
C. Icône de début
D. Contenu textuel
E. Indicateur retardé
Personnalisation
La majorité des personnalisations se font avec les éléments de liste.
| Propriétés | Personnalisation | Valeurs par défaut |
|---|---|---|
| Élément de liste : forme | Oui | 40 dp |
| Élément de liste : icône de début et de fin | Oui | Icône Symbole moyen |
| Élément de liste : valeurs de marge intérieure | Oui | 2 dp, 20 dp |
| Élément de liste : contenu | Oui | Sur une seule ligne : un composable Text pour le libellé principal utilisant Body Small Sur deux lignes : une colonne contenant deux composables Text pour un libellé principal et un libellé secondaire Principal : Title Small Secondaire : Body Small |
| Liste : verticalArrangement | Oui | 20 dp |