Personalizar CarUiRecyclerView

Esta página describe el proceso de personalización de CarUiRecyclerView y la barra de desplazamiento.

Requisitos previos

Esta página presupone el conocimiento de un APK de destino de superposición de recursos de tiempo de ejecución (RRO). Para obtener más información, consulte Personalizar aplicaciones .

Acerca de CarUiRecyclerView

Cuando car_ui_scrollbar_enable se establece en false en bools.xml , CarUiRecyclerView no infla la barra de desplazamiento. Dicho esto, solo androidx.recyclerview está inflado con estilos personalizables como se define a continuación. Cuando car_ui_scrollbar_enable se establece en true , CarUiRecyclerView infla el contenedor con la barra de desplazamiento instalada en su interior. Posteriormente también se agrega androidx.recyclerview dentro del mismo contenedor.

CarUiRecyclerView puede aceptar cualquier adaptador para mostrar los datos. Pero la recomendación es usar CarUiListItemAdapter donde la biblioteca del chasis define el diseño de los elementos de lista y, por lo tanto, los OEM pueden personalizarla. La personalización de ListItems se define en Opciones de personalización de CarUiListItem .

De forma predeterminada, car_ui_scrollbar_margin se utiliza como ancho de la vista de la barra de desplazamiento. Este margen también se agrega como android:endMargin de CarUiRecyclerView, por lo que hay un margen igual al inicio y al final de los datos. Si el desarrollador había utilizado enableDivider=true , entonces el OEM puede controlar cómo deben aparecer los divisores. Las dimensiones que se pueden ajustar para CarUiRecyclerView son:

  <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 para 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 OEM deben superponer este archivo de diseño para personalizar la barra de desplazamiento. La vista de seguimiento debe colocarse con cuidado ya que definiría los límites en los que se moverá el pulgar. La altura del pulgar se calcula dinámicamente en función de los elementos de la lista en el RV y la altura de los visores.

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:

  <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 juntar las flechas Arriba y Abajo en la parte inferior de la pantalla:

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 el RRO superpondrá, agregue 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 dibujable Arriba, Abajo o pulgar, también se deben superponer.
4. Si se utilizan recursos nuevos en el paquete RRO que aún no existen, estos recursos también deben definirse en el APK de RRO que cree.