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 つのビューが定義されます。

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>

例

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

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 でもそのリソースを定義する必要があります。