Menyesuaikan CarUiRecyclerView

Artikel ini menjelaskan proses penyesuaian CarUiRecyclerView dan bilah gulir.

Prasyarat

Artikel ini mengasumsikan pengetahuan tentang APK target Runtime Resource Overlay (RRO). Untuk mempelajari lebih lanjut, lihat Menyesuaikan Aplikasi .

Tentang CarUiRecyclerView

Saat car_ui_scrollbar_enable disetel ke false di bools.xml , CarUiRecyclerView tidak akan mengembang scrollbar. Karena itu, hanya androidx.recyclerview yang dikembangkan dengan gaya yang dapat disesuaikan seperti yang didefinisikan di bawah ini. Ketika car_ui_scrollbar_enable disetel ke true , CarUiRecyclerView akan mengembang wadah dengan scrollbar terpasang di dalamnya. Nantinya androidx.recyclerview juga akan ditambahkan dalam wadah yang sama.

CarUiRecyclerView dapat menggunakan adaptor apa pun untuk menampilkan data. Tetapi rekomendasinya adalah menggunakan CarUiListItemAdapter di mana lib sasis mendefinisikan tata letak untuk listItems dan karenanya dapat dikustomisasi oleh OEM. Kustomisasi untuk ListItems didefinisikan di CarUiListItem .

Secara default, car_ui_scrollbar_margin digunakan sebagai lebar tampilan scrollbar. Margin ini juga ditambahkan sebagai android:endMargin dari CarUiRecyclerView sehingga ada margin yang sama di awal dan akhir data. Jika pengembang telah menggunakan enableDivider=true maka OEM dapat mengontrol bagaimana pembagi akan muncul. Dimensi yang dapat disesuaikan untuk CarUiRecyclerView adalah:

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

Scroll bar

File tata letak untuk scrollbar CarUiRV didefinisikan di car_ui_recyclerview_scrollbar.xml . Secara total, keempat tampilan ini didefinisikan dalam tampilan:

Tampilan
Car_ui_scrollbar_page_up Mendefinisikan tombol atas dari scrollbar.
Car_ui_scrollbar_page_down mendefinisikan tombol bawah scrollbar.
Car_ui_scrollbar_thumb Tinggi dihitung secara dinamis tergantung pada jumlah item daftar di Recycler View (RV).
Car_ui_scrollbar_track Tinggi total yang menentukan batas di mana ibu jari akan bergerak.

OEM harus melapisi file tata letak ini untuk menyesuaikan bilah gulir. Tampilan trek harus ditempatkan dengan hati-hati karena itu akan menentukan batas di mana ibu jari akan bergerak. Tinggi jempol akan dihitung secara dinamis berdasarkan item daftar di RV dan ketinggian viewholder.

Tata letak ini disertakan dalam wadah CarUiRV car_ui_recycler_view.xml hanya jika car_ui_scrollbar_enable true .

Dimensi lain yang dapat disesuaikan untuk scrollbar adalah:

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

Contoh

Misalnya, untuk menyatukan panah Atas dan Bawah di bagian bawah layar:

  1. Hamparan car_ui_recyclerview_scrollbar.xml : l10n
    <?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. Untuk menentukan sumber daya yang akan di-overlay oleh RRO, tambahkan 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. Jika sumber daya dapat digambar Atas, Bawah, atau ibu jari harus diperbarui, sumber daya tersebut juga harus dilapis.
  4. Jika ada sumber daya baru yang digunakan dalam paket RRO yang belum ada, maka sumber daya ini juga harus ditentukan dalam APK RRO yang Anda buat.