リスト表示では、縦方向にスクロールする 1 列のリストとしてコンテンツが項目として表示されます。このビューは、ユーザーがテキストの選択やデータの閲覧に依存している場合に最適です。
リストアイテムは、グリッド アイテムよりも垂直方向のスペースが少なくて済むため、画面上により多くのアイテムを表示できます。
構造
リストビューでは、各行に 1 つのリストアイテムを表すタイルが含まれています。メイン アクションをタイル全体に表示することができ、ユーザーはタイルのどこからでもアクションを開始できます。アイコンとテキストで表される補足アクションの場合、アイコンとテキストを含む領域のみが実行可能です。
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=6&hl=ja)
2. 切り替えボタン: オン
3. 切り替えボタン: オフ
4. プライマリ テキストとセカンダリ テキスト
5. コンテンツ タイル
仕様
1 行のリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=6&hl=ja)
2 行のリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=6&hl=ja)
2 行のリスト項目を反転
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=6&hl=ja)
ヘッダー付きの複数行のリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=6&hl=ja)
ヘッダーのない複数行のリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=6&hl=ja)
テキストがはみ出しているリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=6&hl=ja)
分割アクションを含むリストアイテム
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=6&hl=ja)
リストアイテム内のインジケーター アイコンの配置
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=6&hl=ja)
レイアウトのスケーリング
以下のリファレンス レイアウトは、さまざまな幅と高さの画面に対応するためにリストアイテムを適応させる方法を示しています。(幅と高さのカテゴリは、レイアウトのセクションで定義されます)。すべてのピクセル値は、ダウンサンプリングまたはアップサンプリングが行われる前に、レンダリングされたピクセル内にあります。
標準画面、ワイド画面、エクストラ ワイド画面
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=6&hl=ja)
コンテンツ タイルを含む標準画面、ワイド画面、エクストラ ワイド画面
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=6&hl=ja)
スーパーワイド画面
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=6&hl=ja)
スタイル
タイポグラフィ
書体のスタイル | 書体 | 重量 | サイズ(dp) |
---|---|---|---|
本文 1 | Roboto | 標準 | 32 |
本文 3 | Roboto | 標準 | 24 |
色
要素 | 色(日中モード) | カラー(夜間モード) |
---|---|---|
メインのタイプ / アイコン | White | 白人 @ 88% |
サブのタイプ / アイコン | 白人 @ 72% | 白色 @ 60% |
分割ライン | 白人 @ 22% | 白人 @ 12% |
リストアイテムの背景 | Black | Black |
サイズ調整
要素 | サイズ(dp) |
---|---|
リストアイテムの高さ | 96(短い画面)/ 116(標準画面)/ 128(トール画面) |
メインアイコン | 44 |
3 つ目のアイコン | 24 |
コンテンツ タイル | リストアイテムの高さ - 1 dp |
中サイズのアバター | 76 |
分割線の太さ | 1 |
例
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=6&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=6&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=6&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=6&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=6&hl=ja)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=6&hl=ja)