Esta página detalha as opções de personalização para itens da lista CarUiListItem .
O paradigma aceito para usar a biblioteca Car UI para exibir uma lista de itens é usar um CarUiRecyclerView em conjunto com objetos CarUiListItemAdapter e CarUiListItem . A personalização CarUiRecyclerView é abordada em caruirecyclerview .
Pré-requisitos
O conteúdo a seguir pressupõe uma compreensão das sobreposições de recursos de tempo de execução (RRO) descritas em Personalizar aplicativos .
Sobre CarUiListItem
Os itens da lista podem ser de dois tipos de alto nível, header ou content . Cada um é descrito abaixo.
Cabeçalho
CarUiListItemAdapter vincula objetos do tipo CarUiHeaderListItem a uma visualização inflada do arquivo de layout car_ui_header_list_item , que contém estas visualizações:
| Visualizações | |
|---|---|
title | Título TextView |
body | Corpo TextView |
Por exemplo, o item da lista de cabeçalho abaixo está configurado para exibir um título e corpo de texto:
Contente
CarUiListItemAdapter vincula objetos do tipo CarUiHeaderListItem a uma visualização inflada do arquivo de layout car_ui_list_item . Este arquivo contém estas visualizações:
| Visualizações | |
|---|---|
icon_container | Contêiner para o ícone principal |
title | Título TextView |
body | Corpo TextView |
action_container | Contêiner para a visualização de ação |
Por exemplo, o item da lista de conteúdo abaixo foi configurado para exibir um ícone e uma chave:
Ícones
Dependendo do tipo de ícone configurado para o item da lista, uma das três visualizações a seguir será usada para o ícone principal:
| Visualizações | |
|---|---|
icon | Ícone padrão ImageView |
content_icon | Ícone de conteúdo ImageView |
avatar_icon | Ícone do avatar ImageView |
Elementos de ação
No máximo, uma das seguintes visualizações de elemento de ação é exibida, com base no tipo de ação do item da lista:
| Visualizações | |
|---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Personalizar texto
O estilo do texto nos itens do cabeçalho e da lista de conteúdo é controlado pelos estilos de aparência do texto definidos na biblioteca Car UI. Para substituir o estilo do texto dos itens da lista, substitua os estilos correspondentes listados abaixo.
Para personalizar estilos de cabeçalho :
| Estilos de cabeçalho | |
|---|---|
| Texto do título | @style/TextAppearance.CarUi.ListItem |
| Texto de corpo | @style/TextAppearance.CarUi.ListItem.Body |
Para personalizar estilos de conteúdo :
| Estilos de conteúdo | |
|---|---|
| Texto do título | @style/TextAppearance.CarUi.ListItem.Header |
| Texto de corpo | @style/TextAppearance.CarUi.ListItem.Body |
Personalizar ícones
Os itens da lista de conteúdo podem conter um ícone principal e um ícone complementar.
Ícone principal
Embora existam três objetos ImageView definidos no contêiner de ícones no layout do item da lista de conteúdo, no máximo um ícone é exibido com base no tipo de ícone especificado do item da lista. No momento da vinculação do item, CarUiListItemAdapter define a visibilidade apropriada para os objetos ImageView do ícone.
A largura e a altura dos ícones são controladas por valores de dimensão que podem ser sobrepostos para controlar o dimensionamento. Os valores de dimensão que especificam a largura e a altura dos vários tipos de ícones estão listados abaixo.
Ícone padrão
Por padrão, os ícones padrão têm altura e largura iguais.
| Ícone padrão | |
|---|---|
| Largura | car_ui_list_item_icon_size |
| Altura | car_ui_list_item_icon_size |
Ícone de conteúdo
| Ícone de conteúdo | |
|---|---|
| Largura | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Ícone de avatar
Por padrão, os ícones primários são centralizados na visualização do contêiner de ícones, que tem uma largura definida pelo valor da dimensão car_ui_list_item_icon_container_width .
| Ícone de avatar | |
|---|---|
| Largura | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Ícone suplementar
O ícone suplementar está centralizado na visualização do contêiner de ação. Tanto a largura quanto a altura do ícone suplementar são definidas pelo valor da dimensão car_ui_list_item_supplemental_icon_size . Sobreponha esse valor de dimensão para alterar o tamanho do ícone suplementar.