Este artigo detalha as opções de personalização para itens de lista CarUiListItem .
O paradigma aceito para usar a biblioteca Car UI para exibir uma lista de itens é usar um CarUiRecyclerView em conjunto com os objetos CarUiListItemAdapter e CarUiListItem . A personalização do CarUiRecyclerView é abordada no 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 Personalizando aplicativos .
Sobre CarUiListItem
Os itens de lista podem ser de dois tipos de alto nível, cabeçalho ou conteúdo . Cada um é descrito abaixo.
Cabeçalho
CarUiListItemAdapter vincula objetos do tipo CarUiHeaderListItem a uma exibição inflada do arquivo de layout car_ui_header_list_item , que contém estas exibições:
| Visualizações | |
|---|---|
title | Título TextView. |
body | Corpo TextView. |
Por exemplo, o item da lista de cabeçalhos abaixo está configurado para exibir um título e um corpo de texto:
Contente
CarUiListItemAdapter vincula objetos do tipo CarUiHeaderListItem a uma exibiçã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 exibição de ação. |
Por exemplo, o item da lista de conteúdo abaixo foi configurado para exibir um ícone e um switch:
Ícones
Dependendo do tipo de ícone configurado para o item de lista, uma das três visualizações a seguir é usada para o ícone principal:
| Visualizações | |
|---|---|
icon | Ícone padrão ImageView. |
content_icon | Ícone de conteúdo ImageView. |
avatar_icon | Ícone de 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 para o item de lista:
| Visualizações | |
|---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Personalizar texto
O estilo de texto nos itens de cabeçalho e de lista de conteúdo é controlado por 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 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 para os 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 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 é centralizado na visualização do contêiner de ação. A largura e a altura do ícone suplementar são definidas pelo valor da dimensão car_ui_list_item_supplemental_icon_size . Sobreponha este valor de dimensão para alterar o tamanho do ícone suplementar.