Esta página detalha as opções de personalização para itens de lista CarUiListItem.
O paradigma aceito para usar a biblioteca Car UI para mostrar uma lista de itens
é usar um CarUiRecyclerView em conjunto com um
objeto CarUiListItemAdapter e CarUiListItem.
A personalização de CarUiRecyclerView é abordada em
caruirecyclerview.
Pré-requisitos
O conteúdo a seguir pressupõe o entendimento das sobreposições de recursos de execução (RRO, na sigla em inglês) descritas em Personalizar apps.
Sobre o CarUiListItem
Os itens da lista podem ser de dois tipos de alto nível: cabeçalho ou conteúdo. Cada um deles é 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 |
TextView do título |
body |
TextView do corpo |
Por exemplo, o item de lista de cabeçalho abaixo está configurado para mostrar um título e o corpo do texto:
Conteúdo
CarUiListItemAdapter vincula objetos do tipo CarUiHeaderListItem
a uma visualização inflada do arquivo de layout car_ui_list_item. Esse arquivo
contém estas visualizações:
| Visualizações | |
|---|---|
icon_container |
Contêiner para o ícone principal |
title |
TextView do título |
body |
TextView do corpo |
action_container |
Contêiner para a visualização de ação |
Por exemplo, o item da lista de conteúdo abaixo foi configurado para mostrar 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 é usada para o ícone principal:
| Visualizações | |
|---|---|
icon |
ImageView de ícone padrão |
content_icon |
ImageView do ícone de conteúdo |
avatar_icon |
ImageView do ícone do avatar |
Elementos de ação
No máximo, uma das seguintes visualizações de elementos 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 o texto
O estilo de texto nos itens de cabeçalho e de lista de conteúdo é controlado pelos estilos de aparência de texto definidos na biblioteca Car UI. Para substituir o estilo de texto dos itens da lista, substitua os estilos correspondentes listados abaixo.
Para personalizar os estilos do cabeçalho:
| Estilos de cabeçalho | |
|---|---|
| Texto do título | @style/TextAppearance.CarUi.ListItem |
| Texto do corpo | @style/TextAppearance.CarUi.ListItem.Body |
Para personalizar os estilos de conteúdo:
| Estilos de conteúdo | |
|---|---|
| Texto do título | @style/TextAppearance.CarUi.ListItem.Header |
| Texto do corpo | @style/TextAppearance.CarUi.ListItem.Body |
Personalizar ícones
Os itens da lista de conteúdo podem conter um ícone principal e um complementar.
Ícone principal
Embora haja três objetos ImageView definidos no contêiner de ícones
no layout do item de 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 adequada 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 tamanho. Os valores de dimensão que especificam a largura e a altura dos vários tipos de ícone 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 do avatar
Por padrão, os ícones principais 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 do avatar | |
|---|---|
| Largura | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Ícone complementar
O ícone complementar fica centralizado na visualização do contêiner de ação. A
largura e a altura do ícone complementar são definidas pelo
valor da dimensão car_ui_list_item_supplemental_icon_size. Sobreponha esse valor de dimensão para mudar o tamanho do ícone complementar.