このページでは、 CarUiRecyclerView
とスクロール バーをカスタマイズするプロセスについて説明します。
前提条件
このページは、ランタイム リソース オーバーレイ (RRO) ターゲット APK についての知識があることを前提としています。詳細については、 「アプリをカスタマイズする」を参照してください。
CarUiRecyclerView について
bools.xml
でcar_ui_scrollbar_enable
false
に設定されている場合、 CarUiRecyclerView
スクロールバーを拡張しません。ただし、以下に定義されているカスタマイズ可能なスタイルでインフレートされるのはandroidx.recyclerview
のみです。 car_ui_scrollbar_enable
がtrue
に設定されている場合、 CarUiRecyclerView
コンテナ内にスクロールバーがインストールされたコンテナをインフレートします。その後、 androidx.recyclerview
も同じコンテナ内に追加されます。
CarUiRecyclerView
、任意のアダプターを使用してデータを表示できます。ただし、シャーシ ライブラリが listItem のレイアウトを定義するため、OEM がカスタマイズできるCarUiListItemAdapter
を使用することをお勧めします。 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>
- Up、Down、またはサム ドローアブルを更新する必要がある場合は、それらもオーバーレイする必要があります。
- まだ存在しない新しいリソースが RRO パッケージで使用される場合は、作成する RRO APK でもこれらのリソースを定義する必要があります。