CarUiRecyclerView のカスタマイズ

この記事では、CarUiRecyclerView とスクロールバーをカスタマイズするプロセスについて説明します。

前提条件

この記事は、ランタイム リソース オーバーレイ(RRO)ターゲット APK について理解していることを前提としています。詳細については、アプリのカスタマイズをご覧ください。

CarUiRecyclerView について

bools.xmlcar_ui_scrollbar_enablefalse に設定されている場合、CarUiRecyclerView はスクロールバーをインフレートしません。ただし、下記のとおりカスタマイズ可能なスタイルでは、androidx.recyclerview のみがインフレートされます。car_ui_scrollbar_enabletrue に設定されている場合、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_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 でもそのリソースを定義する必要があります。