Personnaliser CarUiRecyclerView

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Cette page décrit le processus de personnalisation de CarUiRecyclerView et de la barre de défilement.

Prérequis

Cette page suppose que vous connaissez un APK cible de superposition de ressources d'exécution (RRO). Pour en savoir plus, consultez Personnaliser les applications.

À propos de CarUiRecyclerView

Lorsque car_ui_scrollbar_enable est défini sur false dans bools.xml, CarUiRecyclerView n'inflate pas la barre de défilement. Toutefois, seul androidx.recyclerview est gonflé avec des styles personnalisables, comme défini ci-dessous. Lorsque car_ui_scrollbar_enable est défini sur true, CarUiRecyclerView gonfle le conteneur avec la barre de défilement installée. Plus tard, androidx.recyclerview est également ajouté dans le même conteneur.

CarUiRecyclerView peut utiliser n'importe quel adaptateur pour afficher les données. Toutefois, nous vous recommandons d'utiliser CarUiListItemAdapter, où la bibliothèque du châssis définit la mise en page des éléments de liste et peut donc être personnalisée par les OEM. La personnalisation des ListItems est définie dans les options de personnalisation pour CarUiListItem.

Par défaut, car_ui_scrollbar_margin est utilisé comme largeur de la vue de la barre de défilement. Cette marge est également ajoutée en tant que android:endMargin du CarUiRecyclerView afin qu'il y ait une marge égale au début et à la fin des données. Si le développeur a utilisé enableDivider=true, l'OEM peut contrôler l'affichage des séparateurs. Les dimensions pouvant être ajustées pour CarUiRecyclerView sont les suivantes:

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

Barre de défilement

Le fichier de mise en page de la barre de défilement CarUiRV est défini dans car_ui_recyclerview_scrollbar.xml. Au total, quatre vues sont définies dans la vue:

Les OEM doivent superposer ce fichier de mise en page pour personnaliser la barre de défilement. La vue de la piste doit être placée avec soin, car elle définira les limites dans lesquelles le curseur se déplacera. La hauteur du curseur est calculée de manière dynamique en fonction des éléments de liste dans la RV et de la hauteur des conteneurs de vue.

Cette mise en page est incluse dans le conteneur CarUiRV car_ui_recycler_view.xml uniquement si car_ui_scrollbar_enable est true.

Vous pouvez également ajuster les dimensions suivantes pour la barre de défilement:

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

Exemple

Par exemple, pour regrouper les flèches vers le haut et vers le bas en bas de l'écran:

1. Superposition 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. Pour définir les ressources à superposer à la RRO, ajoutez 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 un drawable "Haut", "Bas" ou "Boutons de défilement" doit être mis à jour, il doit également être superposé.
4. Si de nouvelles ressources qui n'existent pas encore sont utilisées dans le package RRO, elles doivent également être définies dans l'APK RRO que vous créez.