Personalizar o CarUiRecyclerView

Esta página descreve o processo de personalização do CarUiRecyclerView e a rolagem barra.

Pré-requisitos

Esta página pressupõe conhecimento de um APK de destino de sobreposição de recursos no momento da execução (RRO, na sigla em inglês). Para saber mais informações, consulte Personalizar apps.

Sobre o CarUiRecyclerView

Quando car_ui_scrollbar_enable for definido como false em bools.xml, CarUiRecyclerView não infla a barra de rolagem. Dito isso, apenas o androidx.recyclerview é inflado com estilos personalizáveis, conforme definido abaixo. Quando car_ui_scrollbar_enable é definido como true, CarUiRecyclerView infla o contêiner com a barra de rolagem instalada. dentro dele. Depois, o androidx.recyclerview também é adicionado no mesmo contêiner do Docker.

O CarUiRecyclerView pode usar qualquer adaptador para mostrar os dados. Mas o é usar CarUiListItemAdapter onde a biblioteca do chassi define os layout para listItems e, portanto, pode ser personalizado por OEMs. A personalização de ListItems são definidas em Personalização opções para CarUiListItem.

Por padrão, car_ui_scrollbar_margin é usado como a largura da visualização da barra de rolagem. Essa margem também é adicionada como android:endMargin do CarUiRecyclerView, portanto, há margem igual no início e no final dos dados. Se o desenvolvedor tivesse usado enableDivider=true, o OEM poderá controlar como os divisores vão aparecer. Estas são as dimensões que podem ser ajustadas 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 rolagem

O arquivo de layout para a barra de rolagem CarUiRV é definido em car_ui_recyclerview_scrollbar.xml. No total, essas quatro visualizações são definidos na visualização:

Os OEMs precisam sobrepor esse arquivo de layout para personalizar a barra de rolagem. A exibição da faixa deve ser cuidadosamente, porque isso definiria os limites pelos quais o polegar se moverá. A altura do polegar é calculada dinamicamente com base nos itens da lista no RV e na altura dos fixadores de visualização.

Este layout está incluído no contêiner CarUiRV car_ui_recycler_view.xml apenas se car_ui_scrollbar_enable é true.

Outras dimensões que podem ser ajustadas para a barra de rolagem são:

  <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>

Exemplo

Por exemplo, para unir as setas para cima e para baixo na parte de baixo da tela:

1. Sobreposição 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 os recursos que vão ser sobrepostos pela RRO, adicione 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. Se um drawable para cima, para baixo ou de miniatura precisar ser atualizado, eles também devem ser sobrepostos.
4. Se algum recurso novo for usado no pacote RRO que ainda não existe, então Esses recursos também precisam ser definidos no APK RRO criado.