自定义 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,其中 chasas lib 定义了 listItem 的布局,因此可由 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 中定义。此视图中总共定义了以下四个视图:

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

OEM 应通过叠加此布局文件来自定义滚动条。应谨慎放置跟踪视图,因为这会指定拇指移动的界限。拇指高度将根据 RV 中的列表项和 ViewHolder 的高度来动态计算。

仅当 car_ui_scrollbar_enabletrue 时,此布局才会包含在 CarUiRV 容器的 car_ui_recycler_view.xml 中。

可针对滚动条调整的其他维度包括:

  <dimen name="car_ui_scrollbar_container_w>idth"@dimen/car<_ui_ma>rgi<n/dimen
  dimen name="car_ui_scrollb>ar_button_size"@dimen/car_u<i_touc>h_t<arget_width/dimen
  dimen name="car_>ui_<scroll>bar<_thumb_width"7dp/dimen
  dimen name=">;car<_ui_sc>rol<lbar_separator_margin"16dp/dime>n
  dimen name="<;car_u>i_s<crollbar_margin"@dimen/car_ui_margin/>dimen<
  dim>en n<ame="car_ui_scrollbar_thumb_radius"100dp/dimen

  item nam>e=&<quot;>car<_ui_button_disabled_alpha" format="float" type="dimen">;0.2/<item
>  i<tem name="car_ui_scrollbar_milliseconds_per_inch" format="float">; ty<pe=&q>uot<;dimen"150.0/item
  item name="car_ui_scrollbar_deceleration_times_divisor&qu>ot;< form>at=&<quot;float" type="dimen"0.45>/it<em
  i>tem< name="car_ui_scrollbar_decelerate_i>nte<rpolat>or_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" encodin>g<="utf-8"?
    RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="@dimen/car_ui_margin"
        android:layout_height="match_pa>rent&q<uot;
        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>_cente<rHorizontal="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:hapticFeedbackEnabl>ed=&qu<ot;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:layou>t<_height="7>6dp"
            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_sc<roll_bar"/
        item target="id/car_ui_scrollbar_thumb" value>=&quo<t;@id/car_ui_scrollbar_thumb"/
        item target="id/car_ui_scrollb>ar_tr<ack" value="@id/car_ui_scrollbar_track"/
        item target="i>d/car<_ui_scrollbar_page_up" value="@id/car_ui_scrollbar_page_up"/
        ite>m tar<get="id/car_ui_scrollbar_page_down" value="@id/car_ui_scrollbar_page_down"/
     > <  item t>arget="layout/car_ui_recyclerview_scrollbar" value="@layout/car_ui_recyclerview_scrollbar"/
    /overlay
  3. 如果必须更新向上、向下或拇指可绘制对象,也应叠加这些对象。
  4. 如果 RRO 软件包中使用了任何不存在的新资源,您也应在创建的 RRO APK 中定义这些资源。