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 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 Personalizando Aplicativos .
Sobre CarUiListItem
Os itens da lista podem ser um dos 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 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 exibiçõ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 botão:
Ícones
Dependendo do tipo de ícone configurado para o item de lista, uma das três exibiçõ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 exibiçõ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 no cabeçalho e nos itens da 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 ícone 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 tempo de 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 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 de 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 de 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 complementar é centralizado na exibição do contêiner de ação. A largura e a altura do ícone complementar são definidas pelo valor de dimensão car_ui_list_item_supplemental_icon_size . Sobreponha esse valor de dimensão para alterar o tamanho do ícone suplementar.