Personnaliser CarUiRecyclerView

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

Conditions préalables

Cette page suppose la connaissance d’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 ne gonfle pas la barre de défilement. Cela dit, seule la androidx.recyclerview est gonflée de styles personnalisables tels que définis ci-dessous. Lorsque car_ui_scrollbar_enable est défini sur true , CarUiRecyclerView gonfle le conteneur avec la barre de défilement installée à l'intérieur. Plus tard, androidx.recyclerview est également ajouté dans le même conteneur.

CarUiRecyclerView peut utiliser n'importe quel adaptateur pour afficher les données. Mais la recommandation est d'utiliser CarUiListItemAdapter où la bibliothèque de châssis définit la disposition des listItems et peut donc être personnalisée par les OEM. La personnalisation de ListItems est définie dans les options de personnalisation de 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 sous le nom android:endMargin de 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 la manière dont les séparateurs doivent apparaître. Les dimensions qui peuvent être ajustées pour CarUiRecyclerView sont :

  <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, ces quatre vues sont définies dans la vue :

Les OEM doivent superposer ce fichier de présentation pour personnaliser la barre de défilement. La vue piste doit être placée avec soin car cela définirait les limites dans lesquelles le pouce se déplacera. La hauteur du pouce est calculée dynamiquement en fonction des éléments de la liste dans le RV et de la taille des spectateurs.

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

Les autres dimensions qui peuvent être ajustées pour la barre de défilement sont :

  <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 rapprocher les flèches Haut et 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 par le 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 dessin haut, bas ou pouce doit être mis à jour, ils doivent également être superposés.
4. Si de nouvelles ressources sont utilisées dans le package RRO qui n'existent pas déjà, ces ressources doivent également être définies dans l'APK RRO que vous créez.