正規化レイアウトは、さまざまなフォーム ファクタで最適なユーザー エクスペリエンスを提供し、さまざまな用途に使用できる実証済みのレイアウトです。
正規レイアウトは、小画面のスマートフォンのほか、タブレット、折りたたみ式デバイス、ChromeOS デバイスにも対応しています。マテリアル デザインのガイダンスに基づいたレイアウトは、見た目の美しさと機能性を兼ね備えています。
Android フレームワークには特化したコンポーネントが含まれていて、簡単かつ確実にレイアウトを実装できます。
正規化レイアウトを利用することで、生産性を高める魅力的な UI を作成し、優れたアプリの基盤を構築できます。
アダプティブ アプリの正規レイアウトについてはよくご存じだが、そうでない場合は、 使用する Android API を確認するには、Applicability の のセクションをご確認ください。
リスト詳細
リスト / 詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。
このレイアウトでは、アプリ ウィンドウが 2 つの横並びのペイン（リスト用と詳細用）に分割されます。ユーザーがリストからアイテムを選択するとそのアイテムの詳細が表示されます。詳細のディープリンクをクリックすると、詳細ペインに追加のコンテンツが表示されます。
拡大幅ディスプレイ（ウィンドウ サイズクラスを使用するを参照）では、リストと詳細を同時に表示できます。リストのアイテムを選択すると詳細ペインが更新され、選択したアイテムに関連するコンテンツが表示されます。
中程度幅ディスプレイとコンパクト幅ディスプレイでは、ユーザーによるアプリの操作に応じてリストまたは詳細のどちらかが表示されます。リストのみが表示されている場合にリストのアイテムを選択すると、リストに代わって詳細が表示されます。詳細だけが表示されているときに [戻る] ボタンを押すと、リストが再表示されます。
デバイスの向きやアプリのウィンドウ サイズなどの設定を変更すると、ディスプレイのウィンドウ サイズクラスが変更されます。リスト / 詳細レイアウトは、設定内容に応じてアプリの状態を維持しながら変更に対応します。
- リストペインと詳細ペインの両方を表示している拡大幅ディスプレイが中程度幅またはコンパクト幅に狭められた場合、詳細ペインはそのままで、リストペインが非表示になります。
- 中程度幅またはコンパクト幅のディスプレイに詳細ペインのみが表示されている場合に、ウィンドウ サイズクラスが拡大幅に広げられると、リストと詳細が一緒に表示され、リストペインは、詳細ペイン内のコンテンツに対応するアイテムが選択された状態になります。
- 中程度幅またはコンパクト幅のディスプレイでリストペインだけが表示されている状態から拡大幅に広げられた場合は、リストペインとプレースホルダの詳細ペインが同時に表示されます。
リスト / 詳細レイアウトは、メッセージ アプリ、連絡先管理ツール、インタラクティブなメディア ブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。
実装
A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.
The SlidingPaneLayout library is designed for implementation of
list‑detail layouts based on views or fragments.
First, declare a SlidingPaneLayout as the root element of your XML layout.
Next, add the two child elements—either views or fragments—that
represent the list and detail content.
Implement a communication methodology to pass data between the list-detail views
or fragments. ViewModel is recommended because of its ability to store
business logic and survive configuration changes.
SlidingPaneLayout automatically determines whether to display the list and
detail together or individually. In a window that has enough horizontal space to
accommodate both, the list and detail appear side by side. In a window that
lacks sufficient space, either the list or detail is displayed depending on the
user's interaction with the app.
For an example implementation, see the List-detail with sliding pane sample.
Activity embedding
Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.
Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.
Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.
For more information, see Activity embedding.
For an example implementation, see the List-detail with activity embedding sample.
フィード
フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。
サイズと位置によって、コンテンツ要素間の関係が決まります。
コンテンツ グループは、複数の要素を同じサイズにして一緒に配置したものです。近くの他の要素より大きくすることで、ユーザーの関心を引けます。
カードとリストは、フィード レイアウトの一般的なコンポーネントです。
グリッドは、スクロール可能な単一の列から複数列のフィードまで適応可能なため、フィード レイアウトは、ほぼすべてのサイズのディスプレイに対応できます。
フィードは、特にニュースアプリやソーシャル メディア アプリに適しています。
実装
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 を使用します。
実装例については、次のサンプルをご覧ください。
適用対象判断
正規化レイアウトでは、簡単にアクセスして詳細を確認できるように、さまざまな要素で構成された画面を作成できます。アプリのユースケースに最適なレイアウトと実装方法については、次のフローチャートを使って判断してください。
さまざまなタイプのアプリに実装される正規化レイアウトの例については、大画面ギャラリーをご覧ください。
参考情報
- マテリアル デザイン - 正規化レイアウト