Personalizando CarUiRecyclerView

Este artigo descreve o processo de personalização do CarUiRecyclerView e da barra de rolagem.

Pré-requisitos

Este artigo pressupõe o conhecimento de um APK de destino RRO (Runtime Resource Overlay). Para saber mais, consulte Personalizando aplicativos .

Sobre o CarUiRecyclerView

Quando car_ui_scrollbar_enable é definido como false em bools.xml , CarUiRecyclerView não inflará a barra de rolagem. Dito isso, apenas o androidx.recyclerview é inflado com estilos personalizáveis, conforme definido abaixo. Quando car_ui_scrollbar_enable for definido como true , CarUiRecyclerView inflará o contêiner com a barra de rolagem instalada nele. Posteriormente, o androidx.recyclerview também será adicionado ao mesmo contêiner.

CarUiRecyclerView pode usar qualquer adaptador para exibir os dados. Mas a recomendação é usar CarUiListItemAdapter onde o chassis lib define o layout para listItems e, portanto, pode ser customizado pelos OEMs. A personalização para ListItems é definida em 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 final dos dados. Se o desenvolvedor usou enableDivider=true , o OEM pode controlar como os divisores devem 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

Observação: você só pode personalizar o layout da barra de rolagem nas versões do Android 10 e superior.

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 definidas dentro da visualização:

Visualizações
Car_ui_scrollbar_page_up	Define o botão para cima da barra de rolagem.
Car_ui_scrollbar_page_down	define o botão para baixo da barra de rolagem.
Car_ui_scrollbar_thumb	A altura é calculada dinamicamente dependendo do número de itens da lista na Visualização do Reciclador (RV).
Car_ui_scrollbar_track	Altura total que define os limites em que o polegar se moverá.

Os OEMs devem sobrepor esse arquivo de layout para personalizar a barra de rolagem. A visualização da trilha deve ser colocada com cuidado, pois isso definiria os limites nos quais o polegar se moverá. A altura do polegar será calculada dinamicamente com base nos itens da lista no RV e na altura dos visores.

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 inferior 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 a serem 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 para cima, para baixo ou thumb deve ser atualizado, eles também devem ser sobrepostos.
4. Se quaisquer novos recursos forem usados ​​no pacote RRO que ainda não existam, esses recursos também deverão ser definidos no APK RRO que você criar.