Cette page détaille les options de personnalisation des éléments de liste CarUiListItem.
Le paradigme accepté pour utiliser la bibliothèque Car UI afin d'afficher une liste d'éléments consiste à utiliser un CarUiRecyclerView avec des objets CarUiListItemAdapter et CarUiListItem.
La personnalisation de CarUiRecyclerView est abordée dans caruirecyclerview.
Prérequis
Le contenu suivant suppose que vous connaissez les superpositions de ressources d'exécution (RRO) décrites dans Personnaliser les applications.
À propos de CarUiListItem
Les éléments de liste peuvent être de deux types principaux : en-tête ou contenu. Chacune d'elles est décrite ci-dessous.
Header
CarUiListItemAdapter lie les objets de type CarUiHeaderListItem à une vue gonflée à partir du fichier de mise en page car_ui_header_list_item, qui contient les vues suivantes:
| Vues | |
|---|---|
title |
TextView du titre |
body |
TextView du corps |
Par exemple, l'élément de liste d'en-tête ci-dessous est configuré pour afficher un titre et un corps de texte:
Contenu
CarUiListItemAdapter lie les objets de type CarUiHeaderListItem à une vue gonflée à partir du fichier de mise en page car_ui_list_item. Ce fichier contient les vues suivantes:
| Vues | |
|---|---|
icon_container |
Conteneur de l'icône principale |
title |
TextView du titre |
body |
TextView du corps |
action_container |
Conteneur de la vue d'action |
Par exemple, l'élément de la liste de contenu ci-dessous a été configuré pour afficher une icône et un bouton bascule:
Icônes
Selon le type d'icône configuré pour l'élément de liste, l'une des trois vues suivantes est utilisée pour l'icône principale:
| Vues | |
|---|---|
icon |
ImageView d'icône standard |
content_icon |
ImageView de l'icône de contenu |
avatar_icon |
ImageView de l'icône de l'avatar |
Éléments d'action
Au maximum, l'une des vues d'éléments d'action suivantes s'affiche, en fonction du type d'action de l'élément de liste:
| Vues | |
|---|---|
switch_widget |
Switch |
checkbox_widget |
CheckBox |
radio_button_widget |
RadioButton |
supplemental_icon |
ImageView |
Personnaliser le texte
Le style du texte dans les éléments de liste d'en-tête et de contenu est contrôlé par les styles d'apparence du texte définis dans la bibliothèque d'UI de la voiture. Pour remplacer le style de texte des éléments de liste, remplacez les styles correspondants listés ci-dessous.
Pour personnaliser les styles d'en-tête:
| Styles d'en-tête | |
|---|---|
| Texte du titre | @style/TextAppearance.CarUi.ListItem |
| Corps du texte | @style/TextAppearance.CarUi.ListItem.Body |
Pour personnaliser les styles de contenu:
| Styles de contenu | |
|---|---|
| Texte du titre | @style/TextAppearance.CarUi.ListItem.Header |
| Corps du texte | @style/TextAppearance.CarUi.ListItem.Body |
Personnaliser les icônes
Les éléments de la liste de contenu peuvent contenir une icône principale et une icône supplémentaire.
Icône principale
Bien que trois objets ImageView soient définis dans le conteneur d'icônes dans la mise en page de l'élément de liste de contenu, une seule icône est affichée en fonction du type d'icône spécifié pour l'élément de liste. Au moment de la liaison des éléments, CarUiListItemAdapter définit la visibilité appropriée pour les objets ImageView d'icône.
La largeur et la hauteur des icônes sont contrôlées par des valeurs de dimension qui peuvent être superposées pour contrôler le dimensionnement. Vous trouverez ci-dessous les valeurs de dimension qui spécifient la largeur et la hauteur des différents types d'icônes.
Icône standard
Par défaut, les icônes standards ont une hauteur et une largeur égales.
| Icône standard | |
|---|---|
| Largeur | car_ui_list_item_icon_size |
| Taille | car_ui_list_item_icon_size |
Icône de contenu
| Icône de contenu | |
|---|---|
| Largeur | car_ui_list_item_content_icon_width |
| Taille | car_ui_list_item_content_icon_height |
Icône de l'avatar
Par défaut, les icônes principales sont centrées dans la vue du conteneur d'icônes, dont la largeur est définie par la valeur de la dimension car_ui_list_item_icon_container_width.
| Icône de l'avatar | |
|---|---|
| Largeur | car_ui_list_item_content_icon_width |
| Taille | car_ui_list_item_content_icon_height |
Icône supplémentaire
L'icône supplémentaire est centrée dans la vue du conteneur d'action. La largeur et la hauteur de l'icône supplémentaire sont définies par la valeur de la dimension car_ui_list_item_supplemental_icon_size. Superposez cette valeur de dimension pour modifier la taille de l'icône supplémentaire.