En esta página, se detallan las opciones de personalización para los elementos de lista CarUiListItem.
El paradigma aceptado para usar la biblioteca de IU del vehículo para mostrar una lista de elementos es usar un CarUiRecyclerView junto con objetos CarUiListItemAdapter y CarUiListItem.
La personalización de CarUiRecyclerView se describe en caruirecyclerview.
Requisitos previos
En el siguiente contenido, se da por sentado que conoces las superposiciones de recursos del entorno de ejecución (RRO) que se describen en Cómo personalizar apps.
Información acerca de CarUiListItem
Los elementos de lista pueden ser uno de los dos tipos de alto nivel: encabezado o contenido. Cada una se describe a continuación.
Título
CarUiListItemAdapter vincula objetos de tipo CarUiHeaderListItem a una vista aumentada desde el archivo de diseño car_ui_header_list_item, que contiene estas vistas:
| Objetos View | |
|---|---|
title |
TextView del título |
body |
TextView del cuerpo |
Por ejemplo, el siguiente elemento de la lista de encabezados está configurado para mostrar un título y texto del cuerpo:
Contenido
CarUiListItemAdapter vincula objetos de tipo CarUiHeaderListItem a una vista aumentada desde el archivo de diseño car_ui_list_item. Este archivo contiene las siguientes vistas:
| Objetos View | |
|---|---|
icon_container |
Contenedor del ícono principal |
title |
TextView del título |
body |
TextView del cuerpo |
action_container |
Contenedor para la vista de acción |
Por ejemplo, el siguiente elemento de la lista de contenido se configuró para mostrar un ícono y un interruptor:
Íconos
Según el tipo de ícono configurado para el elemento de lista, se usa una de las siguientes tres vistas para el ícono principal:
| Objetos View | |
|---|---|
icon |
ImageView de ícono estándar |
content_icon |
ImageView del ícono de contenido |
avatar_icon |
ImageView del ícono de avatar |
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 lista:
| Objetos View | |
|---|---|
switch_widget |
Switch |
checkbox_widget |
CheckBox |
radio_button_widget |
RadioButton |
supplemental_icon |
ImageView |
Personaliza texto
Los estilos de texto en los elementos de la lista de encabezado y contenido se controlan mediante los estilos de apariencia de texto definidos en la biblioteca de la IU del vehículo. Para anular el diseño de texto de los elementos de lista, anula los estilos correspondientes que se indican a continuación.
Para personalizar los estilos de encabezado, haz lo siguiente:
| Estilos de encabezado | |
|---|---|
| Texto del título | @style/TextAppearance.CarUi.ListItem |
| Texto del cuerpo | @style/TextAppearance.CarUi.ListItem.Body |
Para personalizar los estilos de contenido, sigue estos pasos:
| Estilos de contenido | |
|---|---|
| Texto del título | @style/TextAppearance.CarUi.ListItem.Header |
| Texto del cuerpo | @style/TextAppearance.CarUi.ListItem.Body |
Cómo personalizar íconos
Los elementos de la lista de contenido pueden contener un ícono principal y uno complementario.
Ícono principal
Aunque hay tres objetos ImageView definidos dentro del contenedor de íconos en el diseño del elemento de lista de contenido, se muestra como máximo un ícono según el tipo de ícono especificado del elemento de lista. En el momento de la vinculación de elementos, CarUiListItemAdapter establece la visibilidad adecuada para los objetos ImageView del ícono.
El ancho y la altura de los íconos se controlan con valores de dimensión que se pueden superponer para controlar el tamaño. A continuación, se indican los valores de dimensión que especifican el ancho y la altura de los diferentes tipos de íconos.
Ícono estándar
De forma predeterminada, los íconos estándar tienen el mismo ancho y alto.
| Ícono estándar | |
|---|---|
| Ancho | car_ui_list_item_icon_size |
| Altura | car_ui_list_item_icon_size |
Ícono de contenido
| Ícono de contenido | |
|---|---|
| Ancho | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Ícono de avatar
De forma predeterminada, los íconos principales se centran en la vista del contenedor de íconos, que tiene un ancho definido por el valor de la dimensión car_ui_list_item_icon_container_width.
| Ícono de avatar | |
|---|---|
| Ancho | car_ui_list_item_content_icon_width |
| Altura | car_ui_list_item_content_icon_height |
Ícono complementario
El ícono complementario se centra en la vista del contenedor de acciones. El ancho y la altura del ícono complementario se definen según el valor de la dimensión car_ui_list_item_supplemental_icon_size. Superpone este valor de dimensión para cambiar el tamaño del ícono complementario.