CarUiListItem

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 de 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.

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 la dimensión car_ui_list_item_supplemental_icon_size . Superponga este valor de dimensión para cambiar el tamaño del icono complementario.