Personalizar CarUiRecyclerView

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

Requisitos previos

Esta página presupone el conocimiento de un APK de destino de superposición de recursos en tiempo de ejecución (RRO). Para aprender consulta Cómo personalizar apps.

Información acerca de CarUiRecyclerView

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

CarUiRecyclerView puede usar cualquier adaptador para mostrar los datos. Sin embargo, se recomienda usar CarUiListItemAdapter, donde la biblioteca de chasis define la para listItems y, por lo tanto, los OEM pueden personalizarlo. Personalización de ListItems se definen en Personalización opciones para CarUiListItem.

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

  <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 son definidos dentro de la vista:

Objetos View
Car_ui_scrollbar_page_up Define el botón hacia arriba de la barra de desplazamiento.
Car_ui_scrollbar_page_down define el botón hacia abajo de la barra de desplazamiento.
Car_ui_scrollbar_thumb La altura se calcula dinámicamente en función del número de elementos de la lista de la Vista de reciclador (RV).
Car_ui_scrollbar_track Altura total que define los límites en los que se moverá el pulgar.

Los OEMs deben superponer este archivo de diseño para personalizar la barra de desplazamiento. La vista del segmento debe tener las siguientes características: cuidadosamente, ya que eso 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 de la RV y la altura de los contenedores de visualización.

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

Estas son otras dimensiones que se pueden ajustar para la barra de desplazamiento:

  <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 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 la RRO superpondrá, 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 de arriba, abajo o miniatura, también debe superponerse.
  4. Si se usan recursos nuevos que aún no existen en el paquete de RRO, estos recursos también deben definirse en el APK de RRO que crees.