Dostosuj CarUiRecyclerView

Na tej stronie opisano proces dostosowywania CarUiRecyclerView i paska przewijania.

Warunki wstępne

Na tej stronie zakłada się, że znasz docelowy plik APK nakładki zasobów środowiska wykonawczego (RRO). Aby dowiedzieć się więcej, zobacz Dostosowywanie aplikacji .

Informacje o CarUiRecyclerView

Gdy car_ui_scrollbar_enable ma wartość false w bools.xml , CarUiRecyclerView nie powiększa paska przewijania. To powiedziawszy, tylko androidx.recyclerview jest zawyżony dostosowywalnymi stylami, jak zdefiniowano poniżej. Gdy car_ui_scrollbar_enable jest ustawione na true , CarUiRecyclerView napełnia kontener z zainstalowanym w nim paskiem przewijania. Później w tym samym kontenerze dodano także androidx.recyclerview .

CarUiRecyclerView może używać dowolnego adaptera do wyświetlania danych. Zaleca się jednak użycie CarUiListItemAdapter , gdzie biblioteka podwozia definiuje układ listItems i dlatego może być dostosowywana przez producentów OEM. Dostosowanie ListItems definiuje się w Opcjach dostosowywania dla CarUiListItem .

Domyślnie car_ui_scrollbar_margin jest używana jako szerokość widoku paska przewijania. Margines ten jest również dodawany jako android:endMargin elementu CarUiRecyclerView, dzięki czemu margines na początku i na końcu danych jest równy. Jeśli programista użył opcji enableDivider=true , producent OEM może kontrolować sposób wyświetlania dzielników. Wymiary, które można dostosować dla CarUiRecyclerView to:

  <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 paska przewijania CarUiRV jest zdefiniowany w car_ui_recyclerview_scrollbar.xml . W sumie w widoku zdefiniowano te cztery widoki:

Wyświetlenia
Car_ui_scrollbar_page_up Definiuje przycisk w górę paska przewijania.
Car_ui_scrollbar_page_down definiuje przycisk w dół paska przewijania.
Car_ui_scrollbar_thumb Wysokość jest obliczana dynamicznie w zależności od liczby elementów listy w widoku Recyklera (RV).
Car_ui_scrollbar_track Całkowita wysokość określająca granice, w jakich kciuk będzie się poruszał.

Producenci OEM powinni nałożyć ten plik układu, aby dostosować pasek przewijania. Widok ścieżki powinien być umieszczony ostrożnie, ponieważ to określi granice, w jakich będzie się poruszał kciuk. Wysokość kciuka jest obliczana dynamicznie na podstawie pozycji listy w kamperze i wzrostu widzów.

Ten układ jest zawarty w kontenerze CarUiRV car_ui_recycler_view.xml tylko wtedy, gdy car_ui_scrollbar_enable ma true .

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

  <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

Na przykład, aby połączyć strzałki w górę i w dół na dole 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 zdefiniować zasoby, które mają być nałożone 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ć rysunek w górę, w dół lub kciukiem, należy je również nałożyć.
  4. Jeśli w pakiecie RRO zostaną użyte nowe zasoby, które jeszcze nie istnieją, wówczas zasoby te należy również zdefiniować w tworzonym przez Ciebie pakiecie RRO APK.