リストは、スクロールとフォーカスが組み込まれた要素のコンテナです。
原則
明確な構成: リストは、情報を明確かつ簡単にスキャンできる縦方向の配置で表示する必要があります。
一貫性のあるアイテムの表示: リストアイテムは一貫性のある視覚構造に従う必要があります。
フォーカス可能性とナビゲーション: 方向キー ナビゲーションに依存するインターフェースでは、リストで現在フォーカスされているアイテムを明確に示さなければなりません。
インタラクティビティ: リスト項目は、選択可能または操作可能な要素を表すことがよくあります。
使用状況とプレースメント
リストには、繰り返し可能な要素を含むさまざまな兄弟コンテンツを含めることができます。スタックとは異なり、リストはアプリビュー コンテナを埋めます。
リストでは、ビュー内で 1 つ以上の選択可能なアイテムを表示できます。
スクリムを使用してオーバーフロー コンテンツを示す
リストにビューに収まる以上の項目が含まれている場合、リストの境界付近に黒いスクリムが使用されます。
リストには必要に応じてタイトルを使用できます
リストでは、わかりやすくするために静的または固定のタイトルを使用できます。
すべきでないこと
奥行きを使ってフォーカスを示す
リストアイテムは、フォーカスされていない状態とフォーカスされている状態の間で、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 |