Personalización de CarUiRecyclerView

Este artículo describe el proceso de personalización de CarUiRecyclerView y la barra de desplazamiento.

requisitos previos

Este artículo presupone el conocimiento de un APK de destino de superposición de recursos en tiempo de ejecución (RRO). Para obtener más información, consulte Personalización de aplicaciones .

Acerca de CarUiRecyclerView

Cuando car_ui_scrollbar_enable se establece en false en bools.xml , CarUiRecyclerView no inflará 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 el contenedor con la barra de desplazamiento instalada en él. Posteriormente también se agregará androidx.recyclerview dentro del mismo contenedor.

CarUiRecyclerView puede usar cualquier adaptador para mostrar los datos. Pero la recomendación es utilizar 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 CarUiListItem .

De manera 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, por lo que hay un margen igual al principio y al final de los datos. Si el desarrollador usó 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 pista debe colocarse con cuidado, ya que definiría los límites en los que se moverá el pulgar. La altura del pulgar se calculará dinámicamente en función de los elementos de la lista en el RV y la altura de los visualizadores.

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 unir las flechas hacia arriba y hacia 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 superpondrá RRO, 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 dibujo hacia arriba, hacia abajo o con el pulgar, también se deben superponer.
4. Si se utilizan recursos nuevos en el paquete de RRO que aún no existen, estos recursos también deben definirse en el APK de RRO que cree.