CarUiListItem のカスタマイズ オプション

このページでは、CarUiListItem リストアイテムのカスタマイズ オプションについて詳しく説明します。

Car UI ライブラリを使用したアイテムのリスト表示に関して一般的に認められているパラダイムとしては、CarUiListItemAdapter オブジェクトおよび CarUiListItem オブジェクトと一緒に CarUiRecyclerView を使用するパラダイムが挙げられます。 CarUiRecyclerView のカスタマイズについては、caruirecyclerview をご覧ください。

前提条件

以下で説明する内容は、アプリのカスタマイズで説明されているランタイム リソース オーバーレイ（RRO）を理解していることを前提としています。

CarUiListItem について

リストアイテムには、ヘッダーとコンテンツの 2 つの大まかなタイプがあります。それぞれのオプションについて、以下で説明します。

CarUiListItemAdapter は、以下のビューを含む car_ui_header_list_item レイアウト ファイルから拡張されたビューに CarUiHeaderListItem 型のオブジェクトをバインドします。

ビュー
title タイトルの TextView
body 本文の TextView

たとえば、以下のヘッダー リストアイテムは、タイトルと本文テキストを表示するように設定されています。

コンテンツ

CarUiListItemAdapter は、car_ui_list_item レイアウト ファイルから拡張されたビューに CarUiHeaderListItem 型のオブジェクトをバインドします。このファイルには以下のビューが含まれています。

ビュー
icon_container メインアイコンのコンテナ
title タイトルの TextView
body 本文の TextView
action_container アクション ビューのコンテナ

たとえば、以下のコンテンツ リストアイテムは、アイコンとスイッチを表示するように設定されています。

アイコン

リストアイテム用に設定されたアイコンのタイプに応じて、メインアイコンには以下の 3 つのビューのいずれかが使用されます。

ビュー
icon 標準アイコンの ImageView
content_icon コンテンツ アイコンの ImageView
avatar_icon アバター アイコンの ImageView

アクション要素

リストアイテムのアクション タイプに基づいて、以下のアクション要素ビューの中から最大 1 つが表示されます。

ビュー
switch_widget Switch
checkbox_widget CheckBox
radio_button_widget RadioButton
supplemental_icon ImageView

テキストをカスタマイズする

ヘッダーとコンテンツ リストアイテムにおけるテキスト スタイルは、Car UI ライブラリで定義されたテキスト表示スタイルによって制御されます。リストアイテムのテキスト スタイルをオーバーライドするには、下記の対応するスタイルをオーバーライドします。

ヘッダー スタイルをカスタマイズするには:

ヘッダー スタイル
タイトルのテキスト @style/TextAppearance.CarUi.ListItem
本文のテキスト @style/TextAppearance.CarUi.ListItem.Body

コンテンツ スタイルをカスタマイズするには:

コンテンツ スタイル
タイトルのテキスト @style/TextAppearance.CarUi.ListItem.Header
本文のテキスト @style/TextAppearance.CarUi.ListItem.Body

アイコンをカスタマイズする

コンテンツ リストアイテムには、メインアイコンと補足アイコンの両方を含めることができます。

メインアイコン

コンテンツ リストアイテムのレイアウトでは、アイコン コンテナ内で 3 つの ImageView オブジェクトが定義されますが、リストアイテムの指定アイコンタイプに基づいて最大 1 つのアイコンが表示されます。アイテムのバインド時に、CarUiListItemAdapter がアイコン ImageView オブジェクトに適切な可視性を設定します。

アイコンの幅と高さは、ディメンション値（サイズ制御のためにオーバーレイ可能）によって制御されています。各種アイコンの幅と高さを指定するディメンション値を以下に示します。

標準アイコン

デフォルトでは、標準アイコンの高さと幅は同じになります。

標準アイコン
幅 car_ui_list_item_icon_size
高さ car_ui_list_item_icon_size

コンテンツ アイコン

コンテンツ アイコン
幅 car_ui_list_item_content_icon_width
高さ car_ui_list_item_content_icon_height

アバター アイコン

デフォルトでは、メインアイコンはアイコン コンテナビューの中央に配置されます。このビューの幅は car_ui_list_item_icon_container_width ディメンションの値で定義されます。

アバター アイコン
幅 car_ui_list_item_content_icon_width
高さ car_ui_list_item_content_icon_height

補足アイコン

補足アイコンはアクション コンテナビューの中央に配置されます。補助アイコンの幅と高さは、car_ui_list_item_supplemental_icon_size ディメンション値で定義されます。補足アイコンのサイズを変更するには、このディメンション値をオーバーレイします。