このページでは、 CarUiListItemリスト項目のカスタマイズ オプションについて詳しく説明します。
Car UI ライブラリを使用して項目のリストを表示するために受け入れられているパラダイムは、 CarUiRecyclerViewをCarUiListItemAdapterオブジェクトおよびCarUiListItemオブジェクトと組み合わせて使用することです。 CarUiRecyclerViewカスタマイズについては、 caruirecyclerviewで説明します。
前提条件
次の内容は、 「アプリのカスタマイズ」で説明されているランタイム リソース オーバーレイ (RRO) を理解していることを前提としています。
CarUiListItem について
リスト項目は、 headerまたはcontent という2 つの高レベルのタイプのいずれかになります。それぞれについて以下に説明します。
ヘッダ
CarUiListItemAdapter CarUiHeaderListItemタイプのオブジェクトを、次のビューを含むcar_ui_header_list_itemレイアウト ファイルから拡張されたビューにバインドします。
| ビュー | |
|---|---|
title | タイトルテキストビュー |
body | 本文ビュー |
たとえば、以下のヘッダー リスト項目は、タイトルと本文テキストを表示するように構成されています。
コンテンツ
CarUiListItemAdapter CarUiHeaderListItemタイプのオブジェクトをcar_ui_list_itemレイアウト ファイルから拡張されたビューにバインドします。このファイルには次のビューが含まれています。
| ビュー | |
|---|---|
icon_container | プライマリアイコンのコンテナ |
title | タイトルテキストビュー |
body | 本文ビュー |
action_container | アクションビューのコンテナ |
たとえば、以下のコンテンツ リスト項目は、アイコンとスイッチを表示するように構成されています。
アイコン
リスト項目に構成されたアイコン タイプに応じて、次の 3 つのビューのいずれかがプライマリ アイコンに使用されます。
| ビュー | |
|---|---|
icon | 標準アイコンのイメージビュー |
content_icon | コンテンツアイコンのイメージビュー |
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ディメンション値によって定義されます。この寸法値をオーバーレイして、補助アイコンのサイズを変更します。