正規レイアウトは実績のある汎用レイアウトで、さまざまなフォーム ファクタで最適なユーザー エクスペリエンスを提供します。
正規レイアウトは、小画面のスマートフォンのほか、タブレット、折りたたみ式デバイス、ChromeOS デバイスにも対応しています。マテリアル デザインのガイダンスに基づいたレイアウトは、見た目の美しさと機能性を兼ね備えています。
Android フレームワークには、レイアウトの実装を簡単かつ確実に行うための専用のコンポーネントが含まれています。
正規化レイアウトを利用することで、生産性を高める魅力的な UI を作成し、優れたアプリの基盤を構築できます。
アダプティブ アプリの正規レイアウトについてはよくご存じだが、そうでない場合は、 使用する Android API を確認するには、Applicability の のセクションをご確認ください。
リスト詳細
リスト / 詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。
このレイアウトでは、アプリ ウィンドウが 2 つの横並びのペイン（リスト用と詳細用）に分割されます。ユーザーがリストからアイテムを選択するとそのアイテムの詳細が表示されます。詳細のディープリンクをクリックすると、詳細ペインに追加のコンテンツが表示されます。
拡大幅ディスプレイ（ウィンドウ サイズクラスを使用するを参照）では、リストと詳細を同時に表示できます。リストのアイテムを選択すると詳細ペインが更新され、選択したアイテムに関連するコンテンツが表示されます。
中程度幅ディスプレイとコンパクト幅ディスプレイでは、ユーザーによるアプリの操作に応じてリストまたは詳細のどちらかが表示されます。リストのみが表示されている場合にリストのアイテムを選択すると、リストに代わって詳細が表示されます。詳細だけが表示されているときに [戻る] ボタンを押すと、リストが再表示されます。
デバイスの向きやアプリのウィンドウ サイズなどの設定を変更すると、ディスプレイのウィンドウ サイズクラスが変更されます。リスト / 詳細レイアウトは、設定内容に応じてアプリの状態を維持しながら変更に対応します。
- リストペインと詳細ペインの両方を表示している拡大幅ディスプレイが中程度幅またはコンパクト幅に狭められた場合、詳細ペインはそのままで、リストペインが非表示になります。
- 中程度幅またはコンパクト幅のディスプレイに詳細ペインのみが表示されている場合に、ウィンドウ サイズクラスが拡大幅に広げられると、リストと詳細が一緒に表示され、リストペインは、詳細ペイン内のコンテンツに対応するアイテムが選択された状態になります。
- 中程度の幅またはコンパクト幅のディスプレイでリストペインのみが表示され、展開されて展開された場合、リストとプレースホルダの詳細ペインが一緒に表示されます。
リスト / 詳細は、メッセージ アプリ、連絡先管理ツール、ファイル ブラウザのほか、追加情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。
実装
リスト / 詳細レイアウトは、Compose、ビュー、アクティビティの埋め込み（レガシーアプリ用）など、さまざまなテクノロジーを使用して作成できます。アプリに最適なテクノロジーを選択するには、適用対象判断をご覧ください。
SlidingPaneLayout ライブラリは、ビューまたはフラグメントに基づくリスト詳細レイアウトの実装用に設計されています。
まず、SlidingPaneLayout を XML レイアウトのルート要素として宣言します。次に、リストと詳細のコンテンツを表す 2 つの子要素（ビューまたはフラグメント）を追加します。
追加したら、リスト / 詳細のビューまたはフラグメント間でデータをやり取りする通信方法を実装します。ViewModel が推奨されるのは、ビジネス ロジックを保存し、設定変更に対処できるからです。
SlidingPaneLayout は、リストと詳細を同時に表示するか、個別に表示するかを自動的に決定します。両方に対応できる十分な水平方向のスペースがあるウィンドウには、リストと詳細が並んで表示されます。十分なスペースがないウィンドウには、ユーザーによるアプリの操作に応じてリストまたは詳細が表示されます。
実装例については、スライディング ペイン付きリストと詳細のサンプルをご覧ください。
アクティビティの埋め込み
アクティビティの埋め込みを使用すると、複数のアクティビティを持つ従来のアプリで、2 つのアクティビティを同じ画面に並べて表示したり、重ねて表示したりできます（一方は他方のアクティビティを重ねて表示することもできます）。アプリが各アクティビティでリスト / 詳細レイアウトのリストと詳細を実装している場合、アクティビティの埋め込みを使用すると、コードのリファクタリングを最小限またはゼロに抑えながら、リスト / 詳細レイアウトを簡単に作成できます。
XML 構成ファイルを使用してタスク ウィンドウの分割方法を指定し、アクティビティの埋め込みを実装します。この分割方式では、分割を開始するプライマリ アクティビティとセカンダリ アクティビティを定義します。ウィンドウ サイズクラスのブレークポイントを使用して、分割の最小表示幅を指定します。ディスプレイの幅が最小ブレークポイントを下回った場合は、アクティビティが重ねて表示されます。たとえば、最小ディスプレイ幅が 600 dp の場合、コンパクト ディスプレイではアクティビティ同士が重なって表示されますが、中ディスプレイと展開ディスプレイでは横並びで表示されます。
アクティビティの埋め込みは、Android 12L（API レベル 32）以降でサポートされていますが、デバイス メーカーが実装していれば、下位の API レベルでも利用できる場合があります。デバイスでアクティビティの埋め込みを利用できない場合、フォールバック動作では、ユーザーによるアプリの操作に基づいて、リスト アクティビティまたは詳細アクティビティがアプリ ウィンドウ全体を占有します。
詳しくは、アクティビティの埋め込みをご覧ください。
実装例については、アクティビティの埋め込みを利用したリスト / 詳細のサンプルをご覧ください。
フィード
フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。
サイズと位置によって、コンテンツ要素間の関係が決まります。
コンテンツ グループは、要素のサイズを同じにして一緒に配置することで作成されます。近くにある要素よりも大きくすることで、要素に注意を引くことができます。
カードとリストは、フィード レイアウトの一般的なコンポーネントです。
グリッドは、スクロール可能な単一の列から複数列のフィードまで適応可能なため、フィード レイアウトは、ほぼすべてのサイズのディスプレイに対応できます。
フィードは、特にニュースアプリやソーシャル メディア アプリに適しています。
実装
RecyclerView は、多数のアイテムを 1 つの列に効率的にレンダリングします。GridLayoutManager はアイテムをグリッドにレイアウトし、アイテムのサイズとスパンを構成できます。
利用可能な表示領域のサイズに基づいてグリッドの列を設定し、アイテムの最小許容幅を決めます。
GridLayoutManager のデフォルトのスパン設定（アイテムごとに 1 スパン）は、カスタム SpanSizeLookup を作成することでオーバーライドできます。スパンを調整すれば、一部のアイテムを他のアイテムより強調できます。
1 列だけの十分なスペースがあるコンパクト幅ディスプレイでは、GridLayoutManager ではなく LinearLayoutManager を使用します。
実装例については、ビューを利用したフィードのサンプルをご覧ください。
補助ペイン
補助ペイン レイアウトは、アプリのコンテンツをプライマリ表示領域とセカンダリ表示領域に分けて編成するためのものです。
プライマリ表示領域はアプリ ウィンドウの大部分（通常は約 3 分の 2）を占め、メイン コンテンツを表示します。セカンダリ表示領域は、アプリ ウィンドウの残りの部分を構成するペインで、メインのコンテンツをサポートするコンテンツを表示します。
補助ペイン レイアウトは、横向きの拡大幅ディスプレイ（ウィンドウ サイズクラスを使用するを参照）に適しています。中程度幅またはコンパクト幅のディスプレイで表示領域をプライマリとセカンダリに分けられるのは、コンテンツの表示領域が小さくなってもかまわない場合か、最初は追加のコンテンツをボトムシートまたはサイドシートに隠し、メニューまたはボタンで表示を制御できる場合です。
補助ペイン レイアウトとリスト / 詳細レイアウトの違いは、プライマリ コンテンツとセカンダリ コンテンツの関係です。リスト / 詳細レイアウトのセカンダリ ペインのコンテンツは、プライマリ コンテンツと関連していますが、たとえば、補助ペインにツール ウィンドウを表示した場合のように、補助ペイン自体はプライマリ コンテンツとは関係ありません。ただし、リスト / 詳細レイアウトの詳細ペインの補足コンテンツ（例: 商品リスティングの商品説明）は、プライマリ コンテンツがなくても意味を持ちます。
補助ペインのユースケースには、次のようなものがあります。
- 生産性向上アプリ: 補助ペインにレビュー担当者のコメントが付いたドキュメントまたはスプレッドシート
- メディアアプリ: 補助ペインに関連動画のリストが表示されているストリーミング動画や、プレイリストが付いている音楽アルバムの説明
- アプリの検索および参照: 補助ペインに検索結果が表示される検索クエリ入力フォーム
実装
補助ペイン レイアウトは、次のようなヘルパー レイアウトを使用して実装します。
LinearLayout または ConstraintLayout。アプリで利用できる水平表示領域を、コンパクト幅（600 dp 未満）、中程度幅（600 dp 以上）、拡大幅（840 dp 以上）の 3 つのカテゴリに分割したウィンドウ サイズクラスを設定します。
ウィンドウ サイズクラスごとに、レイアウトは次のように定義されます。
- コンパクト幅: アプリリソースの
layoutフォルダで、補助ペインがメイン コンテンツの下またはボトムシート内にレンダリングされるようにコンテンツを配置します。 - 中程度幅:
layout-w600dpフォルダでは、メイン コンテンツと補助ペインが横に均等の大きさで並ぶように補助ペイン コンテンツを配置します。 - 開かれている:
layout-w840dpフォルダに、補助ペインのコンテンツを含めます。 メイン コンテンツと補助ペインが並んで表示されます。 補助ペインは水平方向の スペースの 30% しか占めません 残りの 70% をメインコンテンツに
ビュー、フラグメント、またはそれらの組み合わせのいずれを使用する場合でも、メイン コンテンツと補助ペイン間の通信には ViewModel を使用します。
実装例については、次のサンプルをご覧ください。
適用対象判断
正規化レイアウトでは、簡単にアクセスして詳細を確認できるように、さまざまな要素で構成された画面を作成できます。アプリのユースケースに最適なレイアウトと実装方法については、次のフローチャートを使って判断してください。
さまざまなタイプのアプリに実装される正規化レイアウトの例については、大画面ギャラリーをご覧ください。
参考情報
- マテリアル デザイン - 正規化レイアウト