正規化レイアウトは、さまざまなフォーム ファクタで最適なユーザー エクスペリエンスを提供し、さまざまな用途に使用できる実証済みのレイアウトです。
正規レイアウトは、小画面のスマートフォンのほか、タブレット、折りたたみ式デバイス、ChromeOS デバイスにも対応しています。マテリアル デザインのガイダンスに基づいたレイアウトは、見た目の美しさと機能性を兼ね備えています。
Android フレームワークには特化したコンポーネントが含まれていて、簡単かつ確実にレイアウトを実装できます。
正規化レイアウトを利用することで、生産性を高める魅力的な UI を作成し、優れたアプリの基盤を構築できます。
アダプティブ アプリの正規レイアウトについてはよくご存じだが、そうでない場合は、 使用する Android API を確認するには、Applicability の のセクションをご確認ください。
リスト詳細
リストと詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。
このレイアウトでは、アプリ ウィンドウが 2 つの横並びのペイン（リスト用と詳細用）に分割されます。ユーザーがリストからアイテムを選択するとそのアイテムの詳細が表示されます。詳細のディープリンクをクリックすると、詳細ペインに追加のコンテンツが表示されます。
拡大幅ディスプレイ（ウィンドウ サイズクラスを使用するを参照）では、リストと詳細を同時に表示できます。リストのアイテムを選択すると詳細ペインが更新され、選択したアイテムに関連するコンテンツが表示されます。
中程度幅ディスプレイとコンパクト幅ディスプレイでは、ユーザーによるアプリの操作に応じてリストまたは詳細のどちらかが表示されます。リストのみが表示されている場合にリストのアイテムを選択すると、リストに代わって詳細が表示されます。詳細だけが表示されているときに [戻る] ボタンを押すと、リストが再表示されます。
デバイスの向きやアプリのウィンドウ サイズなどの設定を変更すると、ディスプレイのウィンドウ サイズクラスが変更されます。リスト / 詳細レイアウトは、設定内容に応じてアプリの状態を維持しながら変更に対応します。
- リストペインと詳細ペインの両方を表示している拡大幅ディスプレイが中程度幅またはコンパクト幅に狭められた場合、詳細ペインはそのままで、リストペインが非表示になります。
- 中程度幅またはコンパクト幅のディスプレイに詳細ペインのみが表示されている場合に、ウィンドウ サイズクラスが拡大幅に広げられると、リストと詳細が一緒に表示され、リストペインは、詳細ペイン内のコンテンツに対応するアイテムが選択された状態になります。
- 中程度幅またはコンパクト幅のディスプレイでリストペインだけが表示されている状態から拡大幅に広げられた場合は、リストペインとプレースホルダの詳細ペインが同時に表示されます。
リストと詳細レイアウトは、メッセージ アプリ、連絡先管理ツール、インタラクティブなメディア ブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。
実装
リスト / 詳細レイアウトは、Compose、ビュー、アクティビティの埋め込み（レガシーアプリ用）など、さまざまなテクノロジーを使用して作成できます。アプリに最適なテクノロジーを選択するには、適用対象判断をご覧ください。
SlidingPaneLayout ライブラリは、ビューまたはフラグメントに基づくリスト詳細レイアウトの実装用に設計されています。
まず、SlidingPaneLayout を XML レイアウトのルート要素として宣言します。次に、リストと詳細のコンテンツを表す 2 つの子要素（ビューまたはフラグメント）を追加します。
追加したら、リスト / 詳細のビューまたはフラグメント間でデータをやり取りする通信方法を実装します。ViewModel が推奨されるのは、ビジネス ロジックを保存し、設定変更に対処できるからです。
SlidingPaneLayout は、リストと詳細を同時に表示するか、個別に表示するかを自動的に決定します。両方に対応できる十分な水平方向のスペースがあるウィンドウには、リストと詳細が並んで表示されます。十分なスペースがないウィンドウには、ユーザーによるアプリの操作に応じてリストまたは詳細が表示されます。
実装例については、スライディング ペイン付きリストと詳細のサンプルをご覧ください。
アクティビティの埋め込み
アクティビティの埋め込みを使用すると、複数のアクティビティを持つ従来のアプリで、2 つのアクティビティを同じ画面に並べて表示したり、重ねて表示したりできます（一方は他方のアクティビティを重ねて表示することもできます）。アプリが各アクティビティでリスト / 詳細レイアウトのリストと詳細を実装している場合、アクティビティの埋め込みを使用すると、コードのリファクタリングを最小限またはゼロに抑えながら、リスト / 詳細レイアウトを簡単に作成できます。
XML 構成ファイルを使用してタスク ウィンドウの分割方法を指定し、アクティビティの埋め込みを実装します。この分割方式では、分割を開始するプライマリ アクティビティとセカンダリ アクティビティを定義します。ウィンドウ サイズクラスのブレークポイントを使用して、分割の最小表示幅を指定します。ディスプレイの幅が最小ブレークポイントを下回った場合は、アクティビティが重ねて表示されます。たとえば、最小ディスプレイ幅が 600 dp の場合、コンパクト ディスプレイではアクティビティ同士が重なって表示されますが、中ディスプレイと展開ディスプレイでは横並びで表示されます。
アクティビティの埋め込みは、Android 12L（API レベル 32）以降でサポートされていますが、デバイス メーカーが実装していれば、下位の API レベルでも利用できる場合があります。デバイスでアクティビティの埋め込みを利用できない場合、フォールバック動作では、ユーザーによるアプリの操作に基づいて、リスト アクティビティまたは詳細アクティビティがアプリ ウィンドウ全体を占有します。
詳しくは、アクティビティの埋め込みをご覧ください。
実装例については、アクティビティの埋め込みを利用したリスト / 詳細のサンプルをご覧ください。
フィード
フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。
サイズと位置によって、コンテンツ要素間の関係が決まります。
コンテンツ グループは、複数の要素を同じサイズにして一緒に配置したものです。近くの他の要素より大きくすることで、ユーザーの関心を引けます。
カードとリストは、フィード レイアウトの一般的なコンポーネントです。
グリッドは、スクロール可能な単一の列から複数列のフィードまで適応可能なため、フィード レイアウトは、ほぼすべてのサイズのディスプレイに対応できます。
フィードは、特にニュースアプリやソーシャル メディア アプリに適しています。
実装
A RecyclerView efficiently renders a large number of items in a single
column. A GridLayoutManager lays out items in a grid, allowing
configuration of the item sizes and spans.
Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.
The GridLayoutManager default spanning strategy, which is one span per item,
can be overridden by creating a custom SpanSizeLookup. Adjust the span to
emphasize some items over others.
On compact-width displays that have enough space for only one column, use
LinearLayoutManager instead of GridLayoutManager.
For an example implementation, see the Feed with views sample.
補助ペイン
補助ペイン レイアウトは、アプリのコンテンツをプライマリ表示領域とセカンダリ表示領域に分けて編成するためのものです。
プライマリ表示領域はアプリ ウィンドウの大部分（通常は約 3 分の 2）を占め、メイン コンテンツを表示します。セカンダリ表示領域は、アプリ ウィンドウの残りの部分を構成するペインで、メインのコンテンツをサポートするコンテンツを表示します。
補助ペイン レイアウトは、横向きの拡大幅ディスプレイ（ウィンドウ サイズクラスを使用するを参照）に適しています。中程度幅またはコンパクト幅のディスプレイで表示領域をプライマリとセカンダリに分けられるのは、コンテンツの表示領域が小さくなってもかまわない場合か、最初は追加のコンテンツをボトムシートまたはサイドシートに隠し、メニューまたはボタンで表示を制御できる場合です。
補助ペイン レイアウトとリスト / 詳細レイアウトの違いは、プライマリ コンテンツとセカンダリ コンテンツの関係です。リスト / 詳細レイアウトのセカンダリ ペインのコンテンツは、プライマリ コンテンツと関連していますが、たとえば、補助ペインにツール ウィンドウを表示した場合のように、補助ペイン自体はプライマリ コンテンツとは関係ありません。ただし、リスト / 詳細レイアウトの詳細ペインの補足コンテンツ（例: 商品リスティングの商品説明）は、プライマリ コンテンツがなくても意味を持ちます。
補助ペインのユースケースには、次のようなものがあります。
- 生産性向上アプリ: 補助ペインにレビューアのコメントが添付されたドキュメントまたはスプレッドシート
- メディアアプリ: 補助ペインにストリーミング動画と関連動画のリストが表示されている場合や、プレイリストが付いている音楽アルバムの説明
- ツールと設定: 補助ペインにパレット、効果、その他の設定が表示されるメディア編集ツール
実装
補助ペイン レイアウトは、次のようなヘルパー レイアウトを使用して実装します。
LinearLayout または ConstraintLayout。アプリで利用できる水平表示領域を、コンパクト幅（600 dp 未満）、中程度幅（600 dp 以上）、拡大幅（840 dp 以上）の 3 つのカテゴリに分割したウィンドウ サイズクラスを設定します。
ウィンドウ サイズクラスごとに、レイアウトは次のように定義されます。
- コンパクト幅: アプリリソースの
layoutフォルダで、補助ペインがメイン コンテンツの下またはボトムシート内にレンダリングされるようにコンテンツを配置します。 - 中程度幅:
layout-w600dpフォルダでは、メイン コンテンツと補助ペインが横に均等の大きさで並ぶように補助ペイン コンテンツを配置します。 - 開かれている:
layout-w840dpフォルダに、補助ペインのコンテンツを含めます。 メイン コンテンツと補助ペインが並んで表示されます。 補助ペインは水平方向の スペースの 30% しか占めません 残りの 70% をメインコンテンツに
ビュー、フラグメント、またはそれらの組み合わせのいずれを使用する場合でも、メイン コンテンツと補助ペイン間の通信には ViewModel を使用します。
実装例については、次のサンプルをご覧ください。
Applicability
The canonical layouts create multifaceted presentations of content for easy access and deep exploration. Use the following flowchart to determine which layout and implementation strategy is best for your app's use cases.
For examples of the canonical layouts implemented in different types of apps, see the large screen gallery.
参考情報
- マテリアル デザイン - 正規化レイアウト