リスト

リストは、スクロールとフォーカスが組み込まれた要素のコンテナです。

原則

明確な構成: リストは、情報を明確でスキャンしやすい縦方向の配置で提示する必要があります。

一貫性のあるアイテムの表示: リストアイテムは一貫性のある視覚構造に従う必要があります。

フォーカス可能性とナビゲーション: 方向キー ナビゲーションに依存するインターフェースでは、リストでフォーカスされているアイテムを明確に示さなければなりません。

インタラクティビティ: リスト項目は、選択可能または操作可能な要素を表すことがよくあります。

使用状況とプレースメント

リストには、繰り返し可能な要素を含むさまざまな兄弟コンテンツを含めることができます。スタックとは異なり、リストはアプリビュー コンテナを埋めます。

スクリムを使用してオーバーフロー コンテンツを示す

リストにビューに収まる以上の項目が含まれている場合、リストの境界付近で黒いスクリムが使用されます。

必要に応じて、リストにタイトルを使用できます

リストでは、静的または固定のタイトルを使用してわかりやすくすることができます。

奥行きを使ってフォーカスを示す

リストアイテムは、フォーカスされていない状態とフォーカスされている状態の間で、0 ～+4 の奥行きに移動します。

リストアイテムは操作可能

リスト内の項目はアクションとして機能します。アクションをリスト項目に保持する

解剖学

リストは、スクロール コンテナと一定の間隔で配置されたリストアイテムで構成されます。アイテムの数がビューポートを超えた場合、リストは縦方向にスクロールし、オーバーシュートは最小限に抑える必要があります。

A. コンテナ - スクロール可能な領域

B. リスト項目

C. システムバー

リストアイテム: リスト内の個々の要素。

A. シェイプ

B. 枠線 

C. 先頭のアイコン

D. テキスト コンテンツ

E. Trailing indicator

カスタマイズ

カスタマイズの大部分はリストアイテムで行われます。

プロパティ	カスタマイズ	デフォルト
リストアイテム: シェイプ	はい	40 dp
リスト項目: 先頭と末尾のアイコン	はい	Medium のシンボル アイコン
リスト項目: パディング値	はい	2d dp、20 dp
リスト項目: コンテンツ	はい	1 行: Body Small を使用するプライマリ ラベル用の 1 つの Text コンポーザブル 2 行: プライマリ ラベルとセカンダリ ラベル用の 2 つの Text コンポーザブルを含む Column プライマリ: Title Small セカンダリ: Body Small
リスト: verticalArrangement	はい	20 dp