このページは Cloud Translation API によって翻訳されました。

CarUiRecyclerView のカスタマイズ

このページでは、 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 でもこれらのリソースを定義する必要があります。