Personalizar a CarUiRecyclerView

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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

Pré-requisitos

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

Sobre a CarUiRecyclerView

Quando car_ui_scrollbar_enable é definido como false em bools.xml, CarUiRecyclerView não infla a barra de rolagem. No entanto, 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 nele. Mais tarde, androidx.recyclerview também é adicionado no mesmo contêiner.

O CarUiRecyclerView pode usar qualquer adaptador para mostrar os dados. No entanto, a recomendação é usar CarUiListItemAdapter, em que a biblioteca do chassi define o layout para listItems e, portanto, pode ser personalizada pelos OEMs. A personalização de ListItems é definida em Opções de personalização 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 para que haja uma margem igual no início e no fim dos dados. Se o desenvolvedor tiver usado enableDivider=true, o OEM poderá controlar como os divisores vão aparecer. As dimensões que podem ser ajustadas para CarUiRecyclerView são:

  <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 da barra de rolagem CarUiRV é definido em car_ui_recyclerview_scrollbar.xml. No total, estas quatro visualizações são definidas na visualização:

Os OEMs precisam sobrepor esse arquivo de layout para personalizar a barra de rolagem. A visualização da faixa precisa ser colocada com cuidado, porque ela define os limites em que o polegar vai se mover. A altura do polegar é calculada dinamicamente com base nos itens da lista no RV e na altura dos viewholders.

Esse layout é incluído no contêiner CarUiRV car_ui_recycler_view.xml somente se car_ui_scrollbar_enable for 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 juntar as setas para cima e para baixo na parte de baixo da tela:

1. Overlay 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 serão sobrepostos pelo 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 de cima, de baixo ou de polegar precisar ser atualizado, ele também precisa ser sobreposto.
4. Se novos recursos forem usados no pacote RRO que ainda não existem, eles também precisarão ser definidos no APK RRO criado.