Cómo personalizar CarUiRecyclerView

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta página, se describe el proceso de personalización deCarUiRecyclerView y la barra de desplazamiento.

Requisitos previos

En esta página, se da por sentado que conoces un APK de destino de superposición de recursos de tiempo de ejecución (RRO). Para obtener más información, consulta Cómo personalizar apps.

Información acerca de CarUiRecyclerView

Cuando car_ui_scrollbar_enable se establece en false en bools.xml, CarUiRecyclerView no aumenta la barra de desplazamiento. Dicho esto, solo el elemento androidx.recyclerview se aumenta con estilos personalizables, como se define a continuación. Cuando car_ui_scrollbar_enable se establece en true, CarUiRecyclerView expande el contenedor con la barra de desplazamiento instalada en él. Más adelante, también se agrega androidx.recyclerview dentro del mismo contenedor.

CarUiRecyclerView puede usar cualquier adaptador para mostrar los datos. Sin embargo, la recomendación es usar CarUiListItemAdapter, en el que la biblioteca del chasis define el diseño de listItems y, por lo tanto, los OEMs pueden personalizarlo. La personalización de ListItems se define en Opciones de personalización para CarUiListItem.

De forma predeterminada, car_ui_scrollbar_margin se usa como el ancho de la vista de la barra de desplazamiento. Este margen también se agrega como android:endMargin de CarUiRecyclerView para que haya un margen igual al principio y al final de los datos. Si el desarrollador usó enableDivider=true, el OEM puede controlar cómo deben aparecer los divisores. Las dimensiones que se pueden ajustar para CarUiRecyclerView son las siguientes:

  <dimen name="car_ui_recyclerview_divider_height">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_start_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_end_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_top_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_bottom_margin">0dp</dimen>

Barra de desplazamiento

El archivo de diseño de la barra de desplazamiento CarUiRV se define en car_ui_recyclerview_scrollbar.xml. En total, estas cuatro vistas se definen dentro de la vista:

Los OEMs deben superponer este archivo de diseño para personalizar la barra de desplazamiento. La vista de pista se debe colocar con cuidado, ya que definirá los límites en los que se moverá el pulgar. La altura de la miniatura se calcula de forma dinámica según los elementos de lista en la RV y la altura de los contenedores de vistas.

Este diseño se incluye en el contenedor CarUiRV car_ui_recycler_view.xml solo si car_ui_scrollbar_enable es true.

Otras dimensiones que se pueden ajustar para la barra de desplazamiento son las siguientes:

  <dimen name="car_ui_scrollbar_container_width">@dimen/car_ui_margin</dimen>
  <dimen name="car_ui_scrollbar_button_size">@dimen/car_ui_touch_target_width</dimen>
  <dimen name="car_ui_scrollbar_thumb_width">7dp</dimen>
  <dimen name="car_ui_scrollbar_separator_margin">16dp</dimen>
  <dimen name="car_ui_scrollbar_margin">@dimen/car_ui_margin</dimen>
  <dimen name="car_ui_scrollbar_thumb_radius">100dp</dimen>

  <item name="car_ui_button_disabled_alpha" format="float" type="dimen">0.2</item>
  <item name="car_ui_scrollbar_milliseconds_per_inch" format="float" type="dimen">150.0</item>
  <item name="car_ui_scrollbar_deceleration_times_divisor" format="float" type="dimen">0.45</item>
  <item name="car_ui_scrollbar_decelerate_interpolator_factor" format="float" type="dimen">1.8</item>

  <dimen name="car_ui_scrollbar_padding_start">0dp</dimen>
  <dimen name="car_ui_scrollbar_padding_end">0dp</dimen>

Ejemplo

Por ejemplo, para unir las flechas hacia arriba y hacia abajo en la parte inferior de la pantalla, haz lo siguiente:

1. Superposición car_ui_recyclerview_scrollbar.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="@dimen/car_ui_margin"
       android:layout_height="match_parent"
       android:id="@+id/car_ui_scroll_bar">
   
       <!-- View height is dynamically calculated during layout. -->
       <View
           android:id="@+id/car_ui_scrollbar_thumb"
           android:layout_width="7dp"
           android:layout_height="20dp"
           android:layout_alignParentTop="true"
           android:layout_centerHorizontal="true"
           android:background="@drawable/car_ui_recyclerview_scrollbar_thumb"/>
   
       <View
           android:id="@+id/car_ui_scrollbar_track"
           android:layout_width="10dp"
           android:layout_height="match_parent"
           android:layout_marginTop="10dp"
           android:layout_centerHorizontal="true"
           android:layout_above="@+id/car_ui_scrollbar_page_up"/>
   
       <ImageView
           android:id="@+id/car_ui_scrollbar_page_up"
           android:layout_width="76dp"
           android:layout_height="76dp"
           android:focusable="false"
           android:hapticFeedbackEnabled="false"
           android:src="@drawable/car_ui_recyclerview_ic_up"
           android:scaleType="centerInside"
           android:layout_centerHorizontal="true"
           android:layout_above="@+id/car_ui_scrollbar_page_down"/>
   
       <ImageView
           android:id="@+id/car_ui_scrollbar_page_down"
           android:layout_width="76dp"
           android:layout_height="76dp"
           android:focusable="false"
           android:hapticFeedbackEnabled="false"
           android:src="@drawable/car_ui_recyclerview_ic_down"
           android:scaleType="centerInside"
           android:layout_centerHorizontal="true"
         android:layout_alignParentBottom="true"/>
   </RelativeLayout>

2. Para definir los recursos que se superpondrán con el RRO, agrega Overlays.xml:

   <overlay>
       <item target="id/car_ui_scroll_bar" value="@id/car_ui_scroll_bar"/>
       <item target="id/car_ui_scrollbar_thumb" value="@id/car_ui_scrollbar_thumb"/>
       <item target="id/car_ui_scrollbar_track" value="@id/car_ui_scrollbar_track"/>
       <item target="id/car_ui_scrollbar_page_up" value="@id/car_ui_scrollbar_page_up"/>
       <item target="id/car_ui_scrollbar_page_down" value="@id/car_ui_scrollbar_page_down"/>
       <item target="layout/car_ui_recyclerview_scrollbar" value="@layout/car_ui_recyclerview_scrollbar"/>
   </overlay>

3. Si se debe actualizar un elemento de diseño Up, Down o Thumb, también se debe superponer.
4. Si se usan recursos nuevos en el paquete de RRO que aún no existen, estos recursos también deben definirse en el APK de RRO que crees.