CarUiRecyclerView anpassen

Auf dieser Seite wird beschrieben, wie Sie CarUiRecyclerView und die Bildlaufleiste anpassen.

Voraussetzungen

Auf dieser Seite wird davon ausgegangen, dass Sie mit einem Ziel-APK für ein Laufzeitressourcen-Overlay (Runtime Resource Overlay, RRO) vertraut sind. Weitere Informationen finden Sie unter Apps anpassen.

CarUiRecyclerView

Wenn car_ui_scrollbar_enable in bools.xml auf false festgelegt ist, wird die Bildlaufleiste von CarUiRecyclerView nicht maximiert. Allerdings wird nur das androidx.recyclerview-Element mit benutzerdefinierten Stilen wie unten definiert aufgebläht. Wenn car_ui_scrollbar_enable auf true gesetzt ist, maximiert CarUiRecyclerView den Container mit der darin installierten Bildlaufleiste. Später wird auch androidx.recyclerview in demselben Container hinzugefügt.

CarUiRecyclerView kann jeden Adapter verwenden, um die Daten anzuzeigen. Wir empfehlen jedoch, CarUiListItemAdapter zu verwenden, da die Chassis-Bibliothek das Layout für „listItems“ definiert und daher von OEMs angepasst werden kann. Die Anpassung für ListItems wird unter Anpassungsoptionen für CarUiListItem definiert.

Standardmäßig wird car_ui_scrollbar_margin als Breite der Bildlaufleiste verwendet. Dieser Rand wird auch als android:endMargin des CarUiRecyclerView hinzugefügt, damit am Anfang und Ende der Daten jeweils derselbe Rand vorhanden ist. Wenn der Entwickler enableDivider=true verwendet hat, kann der OEM festlegen, wie die Trennlinien angezeigt werden sollen. Für CarUiRecyclerView können folgende Abmessungen angepasst werden:

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

Bildlaufleiste

Die Layoutdatei für die CarUiRV-Bildlaufleiste ist in car_ui_recyclerview_scrollbar.xml definiert. Insgesamt sind in der Ansicht vier Ansichten definiert:

Aufrufe
Car_ui_scrollbar_page_up Definiert die Schaltfläche „Nach oben“ der Bildlaufleiste.
Car_ui_scrollbar_page_down definiert die Abwärtsschaltfläche der Bildlaufleiste.
Car_ui_scrollbar_thumb Die Höhe wird dynamisch berechnet, je nach Anzahl der Listenelemente in der Recycler View (RV).
Car_ui_scrollbar_track Die Gesamthöhe, die die Grenzen definiert, innerhalb derer sich der Schieberegler bewegt.

OEMs sollten diese Layoutdatei überlagern, um die Bildlaufleiste anzupassen. Die Wiedergabeansicht sollte sorgfältig platziert werden, da sie die Grenzen definiert, innerhalb derer sich der Schieberegler bewegen wird. Die Größe des Vorschaubilds wird dynamisch anhand der Listenelemente im responsiven Video und der Höhe der Ansichtshalter berechnet.

Dieses Layout ist nur im CarUiRV-Container car_ui_recycler_view.xml enthalten, wenn car_ui_scrollbar_enable true ist.

Weitere Dimensionen, die für eine Bildlaufleiste angepasst werden können:

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

Verwendungsbeispiele

So bringen Sie beispielsweise den Auf- und den Abwärtspfeil unten auf dem Bildschirm zusammen:

  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. Fügen Sie Overlays.xml hinzu, um die Ressourcen zu definieren, die vom RRO überlagert werden sollen:
    <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. Wenn ein „Hoch“, „Runter“ oder „Mag ich“-Zeichen aktualisiert werden muss, sollte es ebenfalls überlagert werden.
  4. Wenn im RRO-Paket neue Ressourcen verwendet werden, die noch nicht vorhanden sind, sollten diese Ressourcen auch in der von Ihnen erstellten RRO-APK definiert werden.