Esta página detalla las opciones de personalización para los elementos de la lista CarUiListItem .
El paradigma aceptado para usar la biblioteca Car UI para mostrar una lista de elementos es usar CarUiRecyclerView junto con objetos CarUiListItemAdapter y CarUiListItem . La personalización CarUiRecyclerView se trata en caruirecyclerview .
Requisitos previos
El siguiente contenido supone una comprensión de las superposiciones de recursos en tiempo de ejecución (RRO) descritas en Personalizar aplicaciones .
Acerca de CarUiListItem
Los elementos de la lista pueden ser uno de dos tipos de alto nivel: encabezado o contenido . Cada uno se describe a continuación.
Encabezamiento
CarUiListItemAdapter vincula objetos de tipo CarUiHeaderListItem a una vista inflada del archivo de diseño car_ui_header_list_item , que contiene estas vistas:
| Puntos de vista | |
|---|---|
title | Título Vista de texto |
body | Vista de texto del cuerpo |
Por ejemplo, el elemento de la lista de encabezados siguiente está configurado para mostrar un título y un texto de cuerpo:
Contenido
CarUiListItemAdapter vincula objetos de tipo CarUiHeaderListItem a una vista inflada del archivo de diseño car_ui_list_item . Este archivo contiene estas vistas:
| Puntos de vista | |
|---|---|
icon_container | Contenedor para el icono principal |
title | Título Vista de texto |
body | Vista de texto del cuerpo |
action_container | Contenedor para la vista de acciones |
Por ejemplo, el elemento de la lista de contenido siguiente se configuró para mostrar un icono y un interruptor:
Iconos
Según el tipo de icono configurado para el elemento de la lista, se utiliza una de las tres vistas siguientes para el icono principal:
| Puntos de vista | |
|---|---|
icon | Icono estándar ImageView |
content_icon | Ícono de contenido ImageView |
avatar_icon | Ícono de avatar Vista de imagen |
Elementos de acción
Como máximo, se muestra una de las siguientes vistas de elementos de acción, según el tipo de acción del elemento de la lista:
| Puntos de vista | |
|---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Personalizar texto
El estilo del texto tanto en el encabezado como en los elementos de la lista de contenido se controla mediante estilos de apariencia de texto definidos en la biblioteca de Car UI. Para anular el estilo del texto de los elementos de la lista, anule los estilos correspondientes que se enumeran a continuación.
Para personalizar los estilos de encabezado :
| Estilos de encabezado | |
|---|---|
| Texto del título | @style/TextAppearance.CarUi.ListItem |
| Cuerpo de texto | @style/TextAppearance.CarUi.ListItem.Body |
Para personalizar estilos de contenido :
| Estilos de contenido | |
|---|---|
| Texto del título | @style/TextAppearance.CarUi.ListItem.Header |
| Cuerpo de texto | @style/TextAppearance.CarUi.ListItem.Body |
Personalizar iconos
Los elementos de la lista de contenido pueden contener un ícono principal y uno complementario.
Icono principal
Aunque hay tres objetos ImageView definidos dentro del contenedor de iconos en el diseño del elemento de la lista de contenido, se muestra como máximo un icono según el tipo de icono especificado del elemento de la lista. En el momento de vincular el elemento, CarUiListItemAdapter establece la visibilidad adecuada para los objetos de icono ImageView.
El ancho y el alto de los iconos están controlados por valores de dimensión que se pueden superponer para controlar el tamaño. Los valores de dimensión que especifican el ancho y el alto de los distintos tipos de iconos se enumeran a continuación.
Icono estándar
De forma predeterminada, los iconos estándar tienen la misma altura y ancho.
| Icono estándar | |
|---|---|
| Ancho | car_ui_list_item_icon_size |
| Altura | car_ui_list_item_icon_size |
Icono de contenido
| Icono de contenido | |
|---|---|
| Ancho | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
icono de avatar
De forma predeterminada, los íconos principales están centrados dentro de la vista del contenedor de íconos, que tiene un ancho definido por el valor de dimensión car_ui_list_item_icon_container_width .
| icono de avatar | |
|---|---|
| Ancho | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Icono suplementario
El ícono complementario está centrado dentro de la vista del contenedor de acciones. Tanto el ancho como el alto del ícono suplementario están definidos por el valor de dimensión car_ui_list_item_supplemental_icon_size . Superponga este valor de dimensión para cambiar el tamaño del icono complementario.