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 verticale, afin de pouvoir être parcourues facilement.
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 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.
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 voile 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 de défilement et d'éléments de liste espacés de manière uniforme. 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
List
Item : chaque élément individuel de la liste.
A. Forme
B. Bordure
C. Icône précédant le texte
D. Contenu textuel
E. Indicateur de 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 | Une seule ligne : un composable Text pour le libellé principal utilisant Body Small 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 |