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 を使用することをおすすめします。chassis 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 で定義します。ビュー内で合計 4 つのビューが定義されます。

ビュー
`Car_ui_scrollbar_page_up`	スクロールバーのアップボタンを定義します。
`Car_ui_scrollbar_page_down`	スクロールバーのダウンボタンを定義します。
`Car_ui_scrollbar_thumb`	高さは、リサイクラービュー（RV）のリストアイテムの数に基づいて動的に計算されます。
`Car_ui_scrollbar_track`	つまみの移動範囲を定める全体の高さ。

OEM は、スクロールバーをカスタマイズするために、このレイアウトファイルをオーバーレイする必要があります。トラックビューは、つまみの移動範囲を決定するため、慎重に配置する必要があります。つまみの高さは、RV のリストアイテムとビューホルダーの高さに基づいて動的に計算されます。

このレイアウトは、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>

例

たとえば、上下の矢印を画面の下部に表示するには、次のようにします。

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>

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>

上矢印、下矢印、つまみのドローアブルを更新する必要がある場合は、それらもオーバーレイする必要があります。
RRO パッケージで使用する新しいリソースがまだ存在しない場合は、作成する RRO APK でもそのリソースを定義する必要があります。