自訂 CarUiRecyclerView

本頁說明如何自訂 CarUiRecyclerView 和捲動列。

必要條件

本頁面假設您瞭解執行階段資源覆蓋 (RRO) 目標 APK。詳情請參閱「自訂應用程式」。

關於 CarUiRecyclerView

如果在 bools.xml 中將 car_ui_scrollbar_enable 設為 false，CarUiRecyclerView 就不會展開捲軸。不過，只有 androidx.recyclerview 會以可自訂的樣式進行加載，如下所定義。當 car_ui_scrollbar_enable 設為 true 時，CarUiRecyclerView 會以內含捲軸的容器進行加載。稍後，也會在同一個容器中新增 androidx.recyclerview。

CarUiRecyclerView 可以使用任何轉接器來顯示資料。不過，建議您使用 CarUiListItemAdapter，因為底盤程式庫會定義 listItems 的版面配置，因此可供 OEM 自訂。如要自訂 ListItem，請參閱「CarUiListItem 的自訂選項」。

根據預設，系統會使用 car_ui_scrollbar_margin 做為捲軸檢視畫面的寬度。這個邊界也會新增為 CarUiRecyclerView 的 android:endMargin，因此資料的開頭和結尾會有相同的邊界。如果開發人員使用了 enableDivider=true，則 OEM 可以控制分隔符應如何顯示。可為 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>

捲軸

CarUiRV 捲軸的版面配置檔案已在 car_ui_recyclerview_scrollbar.xml 中定義。總共有四個檢視畫面會在檢視畫面中定義：

View
Car_ui_scrollbar_page_up 定義捲軸的向上按鈕。
Car_ui_scrollbar_page_down 定義捲軸的向下按鈕。
Car_ui_scrollbar_thumb 高度會根據 RecyclerView (RV) 中的清單項目數量動態計算。
Car_ui_scrollbar_track 定義滑桿移動範圍邊界的總高度。

原始設備製造商 (OEM) 應重疊此版面配置檔案，自訂捲軸。請謹慎放置軌跡檢視畫面，因為這會定義拇指移動的邊界。系統會根據 RV 中的清單項目和 ViewHolder 的高度，動態計算縮圖高度。

只有在 car_ui_scrollbar_enable 為 true 時，這個版面配置才會包含在 CarUiRV 容器 car_ui_recycler_view.xml 中。

其他可調整捲軸的尺寸包括：

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

範例

例如，如要將向上和向下箭頭都放在畫面底部：

  1. 重疊 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. 如要定義 RRO 要疊加的資源，請新增 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. 如果必須更新向上、向下或拇指可繪項目，也應重疊這些項目。
  4. 如果 RRO 套件中使用的資源尚未存在，則這些資源也應在您建立的 RRO APK 中定義。