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