Questa pagina descrive in dettaglio le opzioni di personalizzazione per gli elementi dell'elenco CarUiListItem .
Il paradigma accettato per l'utilizzo della libreria Car UI per visualizzare un elenco di elementi consiste nell'utilizzare un CarUiRecyclerView insieme a un CarUiListItemAdapter e agli oggetti CarUiListItem . La personalizzazione CarUiRecyclerView è trattata in caruirecyclerview .
Prerequisiti
Il contenuto seguente presuppone la comprensione degli overlay delle risorse di runtime (RRO) descritti in Personalizzazione delle app .
Informazioni su CarUiListItem
Gli elementi dell'elenco possono essere di due tipi di alto livello: intestazione o contenuto . Ciascuno è descritto di seguito.
Intestazione
CarUiListItemAdapter associa oggetti di tipo CarUiHeaderListItem a una vista inflazionata dal file di layout car_ui_header_list_item , che contiene queste viste:
| Visualizzazioni | |
|---|---|
title | Titolo TextView |
body | Visualizzazione testo corpo |
Ad esempio, l'elemento dell'elenco di intestazioni riportato di seguito è configurato per visualizzare un titolo e un corpo del testo:
Contenuto
CarUiListItemAdapter associa oggetti di tipo CarUiHeaderListItem a una vista ingrandita dal file di layout car_ui_list_item . Questo file contiene queste visualizzazioni:
| Visualizzazioni | |
|---|---|
icon_container | Contenitore per l'icona primaria |
title | Titolo TextView |
body | Visualizzazione testo corpo |
action_container | Contenitore per la visualizzazione dell'azione |
Ad esempio, la voce dell'elenco di contenuti seguente è stata configurata per visualizzare un'icona e un interruttore:
Icone
A seconda del tipo di icona configurato per l'elemento dell'elenco, per l'icona principale viene utilizzata una delle tre visualizzazioni seguenti:
| Visualizzazioni | |
|---|---|
icon | Icona standard ImageView |
content_icon | Icona contenuto ImageView |
avatar_icon | Icona avatar Visualizzazione immagine |
Elementi di azione
Al massimo, viene visualizzata una delle seguenti visualizzazioni degli elementi di azione, in base al tipo di azione per l'elemento dell'elenco:
| Visualizzazioni | |
|---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Personalizza il testo
Lo stile del testo sia nell'intestazione che negli elementi dell'elenco dei contenuti è controllato dagli stili di aspetto del testo definiti nella libreria dell'interfaccia utente dell'auto. Per sostituire lo stile del testo degli elementi dell'elenco, sostituisci gli stili corrispondenti elencati di seguito.
Per personalizzare gli stili di intestazione :
| Stili di intestazione | |
|---|---|
| Testo del titolo | @style/TextAppearance.CarUi.ListItem |
| Corpo del testo | @style/TextAppearance.CarUi.ListItem.Body |
Per personalizzare gli stili di contenuto :
| Stili di contenuto | |
|---|---|
| Testo del titolo | @style/TextAppearance.CarUi.ListItem.Header |
| Corpo del testo | @style/TextAppearance.CarUi.ListItem.Body |
Personalizza le icone
Gli elementi dell'elenco dei contenuti possono contenere sia un'icona principale che un'icona supplementare.
Icona primaria
Sebbene siano presenti tre oggetti ImageView definiti all'interno del contenitore di icone nel layout dell'elemento dell'elenco dei contenuti, viene visualizzata al massimo un'icona in base al tipo di icona specificato dell'elemento dell'elenco. Al momento dell'associazione dell'elemento, CarUiListItemAdapter imposta la visibilità appropriata per gli oggetti icona ImageView.
La larghezza e l'altezza delle icone sono controllate da valori di dimensione che possono essere sovrapposti per controllare il dimensionamento. I valori delle dimensioni che specificano la larghezza e l'altezza per i vari tipi di icone sono elencati di seguito.
Icona standard
Per impostazione predefinita, le icone standard hanno la stessa altezza e larghezza.
| Icona standard | |
|---|---|
| Larghezza | car_ui_list_item_icon_size |
| Altezza | car_ui_list_item_icon_size |
Icona del contenuto
| Icona del contenuto | |
|---|---|
| Larghezza | car_ui_list_item_content_icon_width |
| Altezza | car_ui_list_item_content_icon_height |
Icona dell'avatar
Per impostazione predefinita, le icone primarie sono centrate all'interno della vista del contenitore di icone, che ha una larghezza definita dal valore della dimensione car_ui_list_item_icon_container_width .
| Icona dell'avatar | |
|---|---|
| Larghezza | car_ui_list_item_content_icon_width |
| Altezza | car_ui_list_item_content_icon_height |
Icona supplementare
L'icona supplementare è centrata nella vista del contenitore delle azioni. Sia la larghezza che l'altezza dell'icona supplementare sono definite dal valore della dimensione car_ui_list_item_supplemental_icon_size . Sovrapponi questo valore di dimensione per modificare la dimensione dell'icona supplementare.