Tùy chỉnh CarUiRecyclerView

Trang này mô tả quá trình tùy chỉnh CarUiRecyclerView và thanh cuộn.

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

Trang này giả định kiến ​​thức về 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 Tùy 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 không làm tăng kích thước thanh cuộn. Điều đó có nghĩa là chỉ có androidx.recyclerview mới có nhiều kiểu có thể tùy chỉnh như được xác định bên dưới. Khi car_ui_scrollbar_enable được đặt thành true , CarUiRecyclerView sẽ tăng cường vùng chứa có thanh cuộn được cài đặt bên trong nó. Sau này androidx.recyclerview cũng được thêm vào trong cùng một vùng chứa.

CarUiRecyclerView có thể sử dụng bất kỳ bộ chuyển đổi nào để hiển thị dữ liệu. Tuy nhiên, khuyến nghị là sử dụng CarUiListItemAdapter trong đó lib khung gầm xác định bố cục cho listItems và do đó các OEM có thể tùy chỉnh. Việc tùy chỉnh cho ListItems được xác định trong tùy chọn Tùy chỉnh cho CarUiListItem .

Theo mặc định, car_ui_scrollbar_margin được sử dụng làm chiều rộng của chế độ xem thanh cuộn. Lề này cũng được thêm dưới dạng android:endMargin của CarUiRecyclerView để có mức ký quỹ 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 dải phân cách xuất hiện. Các kích thước có thể được đ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, bốn chế độ xem này được xác định trong chế độ xem:

Lượt xem
Car_ui_scrollbar_page_up Xác định nút lên của thanh cuộn.
Car_ui_scrollbar_page_down xác định nút xuống của thanh cuộn.
Car_ui_scrollbar_thumb Chiều cao được tính toán linh hoạt tùy thuộc vào số lượng mục danh sách trong Chế độ xem tái chế (RV).
Car_ui_scrollbar_track Tổng chiều cao xác định giới hạn mà ngón tay cái sẽ di chuyển.

OEM nên phủ lên tệp bố cục này để tùy chỉnh thanh cuộn. Chế độ xem bản nhạc phải được đặt cẩn thận vì điều đó sẽ xác định giới hạn mà ngón tay cái sẽ di chuyển. Chiều cao ngón tay cái được tính toán linh hoạt dựa trên các mục danh sách trong RV và chiều cao của người xem.

Bố cục này chỉ được đưa vào vùng chứa CarUiRV car_ui_recycler_view.xml nếu car_ui_scrollbar_enabletrue .

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