Opciones de personalización para CarUiListItem

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.

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.