自定义 CarUiRecyclerView

本页介绍了自定义 CarUiRecyclerView 和滚动条的过程。

前提条件

本页假定您了解运行时资源叠加层 (RRO) 目标 APK。要了解详情,请参阅自定义应用

关于 CarUiRecyclerView

car_ui_scrollbar_enablebools.xml 中设置为 false 时,CarUiRecyclerView 不会扩充滚动条。也就是说,只有 androidx.recyclerview 会使用下面定义的自定义样式进行扩充。当 car_ui_scrollbar_enable 设置为 true 时,CarUiRecyclerView 会扩充容器,并在其中安装滚动条。稍后,androidx.recyclerview 也会添加到同一容器中。

CarUiRecyclerView 可以采用任何适配器来显示数据。但建议使用 CarUiListItemAdapter,其中 chassis lib 定义了 listItems 的布局,因此 OEM 可以对其进行自定义。ListItems 的自定义在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 中定义。总共有四个视图在视图中定义:

视图
Car_ui_scrollbar_page_up 定义滚动条的向上按钮。
Car_ui_scrollbar_page_down 定义滚动条的向下按钮。
Car_ui_scrollbar_thumb 高度根据 Recycler View (RV) 中的列表项数量动态计算。
Car_ui_scrollbar_track 定义拇指将移动的边界的总高度。

OEM 应叠加此布局文件以自定义滚动条。应谨慎放置轨道视图,因为它将定义拇指将移动的边界。拇指高度根据 RV 中的列表项和 ViewHolder 的高度动态计算。

仅当 car_ui_scrollbar_enabletrue 时,此布局才包含在 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 中定义。