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.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=0000&hl=fr)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=0000&hl=fr)
Élément de liste sur deux lignes
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=0000&hl=fr)
Élément de liste sur deux lignes inversé
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=0000&hl=fr)
Élément de liste comportant plusieurs lignes avec en-tête
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=0000&hl=fr)
Élément de liste à plusieurs lignes sans en-tête
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=0000&hl=fr)
Élément de liste avec dépassement de texte
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=0000&hl=fr)
Élément de liste avec actions de fractionnement
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=0000&hl=fr)
Emplacement de l'icône de l'indicateur dans les éléments de liste
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=0000&hl=fr)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=0000&hl=fr)
Écrans standards, larges et extra larges avec carte de contenu
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=0000&hl=fr)
Écrans ultra grand angle
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=0000&hl=fr)
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
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=0000&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=0000&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=0000&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=0000&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=0000&hl=fr)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=0000&hl=fr)