Tuỳ chỉnh CarUiRecyclerView

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Trang này mô tả quy trình tuỳ chỉnhCarUiRecyclerView và thanh cuộn.

Điều kiện tiên quyết

Trang này giả định bạn đã có kiến thức về tệp APK mục tiêu lớp phủ tài nguyên thời gian chạy (RRO). Để tìm hiểu thêm, hãy xem bài viết Tuỳ chỉnh ứng dụng.

Giới thiệu về CarUiRecyclerView

Khi car_ui_scrollbar_enable được đặt thành false trong bools.xml, CarUiRecyclerView sẽ không tăng cường thanh cuộn. Tuy nhiên, chỉ androidx.recyclerview được tăng cường bằng các kiểu có thể tuỳ chỉnh như được xác định bên dưới. Khi bạn đặt car_ui_scrollbar_enable thành true, CarUiRecyclerView sẽ tăng cường vùng chứa có thanh cuộn được cài đặt trong đó. Sau đó, androidx.recyclerview cũng được thêm vào cùng một vùng chứa.

CarUiRecyclerView có thể lấy bất kỳ trình chuyển đổi nào để hiển thị dữ liệu. Tuy nhiên, bạn nên sử dụng CarUiListItemAdapter trong đó thư viện khung xác định bố cục cho listItems và do đó, nhà sản xuất thiết bị gốc (OEM) có thể tuỳ chỉnh. Tuỳ chỉnh cho ListItems được xác định trong Tuỳ chọn tuỳ chỉnh cho CarUiListItem.

Theo mặc định, car_ui_scrollbar_margin được dùng làm chiều rộng của thành phần hiển thị thanh cuộn. Lề này cũng được thêm vào dưới dạng android:endMargin của CarUiRecyclerView để có lề bằng nhau ở đầu và cuối dữ liệu. Nếu nhà phát triển đã sử dụng enableDivider=true, thì OEM có thể kiểm soát cách các đường phân chia xuất hiện. Các phương diện có thể điều chỉnh cho CarUiRecyclerView là:

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

Thanh cuộn

Tệp bố cục cho thanh cuộn CarUiRV được xác định trong car_ui_recyclerview_scrollbar.xml. Tổng cộng, 4 thành phần hiển thị này được xác định trong thành phần hiển thị:

Nhà sản xuất thiết bị gốc (OEM) nên phủ tệp bố cục này để tuỳ chỉnh thanh cuộn. Bạn nên đặt chế độ xem theo dõi một cách cẩn thận vì chế độ này sẽ xác định các giới hạn mà ngón tay cái sẽ di chuyển. Chiều cao của hình thu nhỏ được tính linh động dựa trên các mục trong danh sách trong RV và chiều cao của trình giữ thành phần hiển thị.

Bố cục này chỉ có trong vùng chứa CarUiRV car_ui_recycler_view.xml nếu car_ui_scrollbar_enable là true.

Các kích thước khác có thể điều chỉnh cho thanh cuộn là:

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

Ví dụ

Ví dụ: để đưa cả mũi tên Lên và mũi tên Xuống lại với nhau ở cuối màn hình:

1. Lớp phủ 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. Để xác định các tài nguyên sẽ được RRO phủ lên, hãy thêm 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. Nếu bạn phải cập nhật một nút Lên, Xuống hoặc nút có thể vẽ, thì các nút này cũng phải được phủ lên.
4. Nếu có bất kỳ tài nguyên mới nào được sử dụng trong gói RRO mà chưa tồn tại, thì các tài nguyên này cũng phải được xác định trong tệp APK RRO mà bạn tạo.