Este artículo 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 está cubierta en caruirecyclerview .
requisitos previos
El siguiente contenido supone una comprensión de las superposiciones de recursos de tiempo de ejecución (RRO) descritas en Personalización de 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 | Vista de texto del título. |
body | Vista de texto del cuerpo. |
Por ejemplo, el siguiente elemento de la lista de encabezados está configurado para mostrar un título y un cuerpo de texto:
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 | Vista de texto del título. |
body | Vista de texto 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:
Iconos
Según el tipo de icono configurado para el elemento de la lista, se utiliza una de las siguientes tres vistas para el icono principal:
| Puntos de vista | |
|---|---|
icon | Icono estándar ImageView. |
content_icon | Icono de contenido ImageView. |
avatar_icon | Icono 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 para el 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 los estilos de apariencia del texto definidos en la biblioteca de la interfaz de usuario del automóvil. Para anular el estilo del texto de los elementos de la lista, anule los estilos correspondientes que se enumeran a continuación.
Para personalizar 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 icono 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, como máximo se muestra un icono en función del tipo de icono especificado del elemento de la lista. En el momento del enlace del elemento, CarUiListItemAdapter establece la visibilidad adecuada para los objetos de icono ImageView.
El ancho y la altura de los íconos están controlados por valores de dimensión que se pueden superponer para controlar el tamaño. Los valores de las dimensiones 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 anchura.
| 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 iconos principales se centran en la vista del contenedor de iconos, que tiene un ancho definido por el valor de la 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 icono complementario está centrado dentro de la vista del contenedor de acciones. Tanto el ancho como la altura del ícono complementario 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.