Dostosowywanie CarUiRecyclerView

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Ta strona opisuje proces dostosowywania CarUiRecyclerView i paska przewijania.

Wymagania wstępne

Ta strona zakłada, że wiesz, czym jest docelowa wersja pliku APK z nakładką zasobów w czasie wykonywania (RRO). Więcej informacji znajdziesz w artykule Dostosowywanie aplikacji.

Informacje o CarUiRecyclerView

Gdy w elementach bools.xml i car_ui_scrollbar_enable wartość car_ui_scrollbar_enable jest ustawiona na false, element CarUiRecyclerView nie powoduje rozszerzania paska przewijania. Jednak tylko element androidx.recyclerview jest wypełniany stylami, które można dostosować, jak opisano poniżej. Jeśli car_ui_scrollbar_enable ma wartość true, CarUiRecyclerView napełnia kontener za pomocą zainstalowanego w nim paska przewijania. Później w tym samym kontenerze dodaliśmy też androidx.recyclerview.

CarUiRecyclerView może wyświetlać dane z dowolnego adaptera. Zalecamy jednak użycie CarUiListItemAdapter, ponieważ biblioteka podwozia definiuje układ listy elementów, a OEM może go dostosować. Personalizacja elementów listy jest definiowana w opcjach personalizacji CarUiListItem.

Domyślnie car_ui_scrollbar_margin jest używane jako szerokość paska przewijania. Ta margines jest też dodawana jako android:endMargin CarUiRecyclerView, aby zapewnić równy margines na początku i na końcu danych. Jeśli deweloper użył elementu enableDivider=true, producent OEM może określić wygląd separatorów. Wymiary, które można dostosować do CarUiRecyclerView:

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

Pasek przewijania

Plik układu dla suwaka CarUiRV jest zdefiniowany w pliku car_ui_recyclerview_scrollbar.xml. W widoku zdefiniowano łącznie 4 widoki:

Producenci OEM powinni nałożyć ten plik układu, aby dostosować suwak. Widok ścieżki należy umieścić ostrożnie, ponieważ określa on granice, w których będzie poruszać się suwak. Wysokość miniatury jest obliczana dynamicznie na podstawie elementów listy w RV i wysokości elementów widoku.

Ten układ jest uwzględniany w kontenerze CarUiRVcar_ui_recycler_view.xml tylko, jeśli car_ui_scrollbar_enable ma wartość true.

Inne wymiary, które można dostosować do paska przewijania:

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

Przykład

Aby na przykład umieścić strzałki w górę i w dół u dołu ekranu:

1. Nakładka 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. Aby określić zasoby, które mają być nakładane przez RRO, dodaj 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. Jeśli trzeba zaktualizować obrazek w górę, w dół lub obrazek z kciukiem, należy go też nałożyć.
4. Jeśli w pakiecie RRO są używane nowe zasoby, które jeszcze nie istnieją, należy je zdefiniować w utworzonym pliku APK RRO.