Cette page détaille les options de personnalisation des éléments de la liste CarUiListItem .
Le paradigme accepté pour utiliser la bibliothèque Car UI pour afficher une liste d’éléments consiste à utiliser un CarUiRecyclerView en conjonction avec des objets CarUiListItemAdapter et CarUiListItem . La personnalisation CarUiRecyclerView est couverte dans caruirecyclerview .
Conditions préalables
Le contenu suivant suppose une compréhension des 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 de haut niveau : header ou content . Chacun est décrit ci-dessous.
Entête
CarUiListItemAdapter lie les objets de type CarUiHeaderListItem à une vue gonflée à partir du fichier de présentation car_ui_header_list_item , qui contient ces vues :
| Vues | |
|---|---|
title | Titre TexteView |
body | Vue du corps du texte |
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 présentation car_ui_list_item . Ce fichier contient ces vues :
| Vues | |
|---|---|
icon_container | Conteneur pour l'icône principale |
title | Titre TexteView |
body | Vue du corps du texte |
action_container | Conteneur pour la vue action |
Par exemple, l'élément de liste de contenu ci-dessous a été configuré pour afficher une icône et un commutateur :
Icônes
En fonction du 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 | Icône standard ImageView |
content_icon | Icône de contenu ImageView |
avatar_icon | Icône d'avatar ImageView |
Éléments d'action
Au maximum, l'une des vues d'élément d'action suivantes s'affiche, en fonction du type d'action pour 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 la liste d'en-tête et de contenu est contrôlé par les styles d'apparence du texte définis dans la bibliothèque Car UI. Pour remplacer le style du texte des éléments de liste, remplacez les styles correspondants répertoriés ci-dessous.
Pour personnaliser les styles d'en-tête :
| Styles d'en-tête | |
|---|---|
| Texte du titre | @style/TextAppearance.CarUi.ListItem |
| Le 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 |
| Le corps du texte | @style/TextAppearance.CarUi.ListItem.Body |
Personnaliser les icônes
Les éléments de la liste de contenu peuvent contenir à la fois une icône principale et une icône supplémentaire.
Icône principale
Bien qu'il existe trois objets ImageView définis dans le conteneur d'icônes dans la disposition des éléments de liste de contenu, au plus une icône est affichée en fonction du type d'icône spécifié de l'élément de liste. Au moment de la liaison de l'élément, CarUiListItemAdapter définit la visibilité appropriée pour les objets icône ImageView.
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. Les valeurs de dimension qui spécifient la largeur et la hauteur des différents types d'icônes sont répertoriées ci-dessous.
Icône standard
Par défaut, les icônes standard ont la même hauteur et la même largeur.
| Icône standard | |
|---|---|
| Largeur | car_ui_list_item_icon_size |
| Hauteur | car_ui_list_item_icon_size |
Icône de contenu
| Icône de contenu | |
|---|---|
| Largeur | car_ui_list_item_content_icon_width |
| Hauteur | car_ui_list_item_content_icon_height |
Icône d'avatar
Par défaut, les icônes principales sont centrées dans la vue du conteneur d'icônes, qui a une largeur définie par la valeur de dimension car_ui_list_item_icon_container_width .
| Icône d'avatar | |
|---|---|
| Largeur | car_ui_list_item_content_icon_width |
| Hauteur | 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'actions. La largeur et la hauteur de l'icône supplémentaire sont définies par la valeur de dimension car_ui_list_item_supplemental_icon_size . Superposez cette valeur de dimension pour modifier la taille de l'icône supplémentaire.