コンテンツの構造と包含メソッドを使用して、柔軟なフローとリズムを構築します。
1. 基本構造
一貫性のあるガードレールを備えたしっかりした構造を作成するには、レイアウトにマージンと列を追加します。
マージンは、画面とコンテンツの左右の端にスペースを設けます。コンパクト サイズの標準マージン値は 16 dp ですが、マージンは大きい画面に対応できるように調整する必要があります。アプリの本文コンテンツとアクションは、これらの余白内に収まり、余白に沿っている必要があります。
このステップで、インセットのセーフゾーンやインセットを確保することもできます。システムバーのインセットにより、重要なアクションがシステムバーの下に隠れないようにします。詳しくは、システムバーの背後にコンテンツを描画するをご覧ください。
列を使用して、一貫した配置のための柔軟なグリッド構造を構築し、本文領域内のコンテンツを分割してレイアウトに垂直方向の定義を提供します。コンテンツは、列を含む画面の領域に配置されます。これらの列はレイアウトに構造を与え、要素を配置するための便利な構造を提供します。
列グリッドを使用して、コンテンツを基盤となるグリッドに合わせながら、柔軟なサイズ設定を維持します。列グリッドは、特定のポイントで画面サイズに応じて列のサイズと列数を必要に応じて変更することで、さまざまなフォーム ファクタに対応できます。また、コンテンツのスケーリングも可能です。列グリッドを細かくしすぎないでください。ベースライン グリッドは、一貫したスペーシング単位を提供するためのものです。
行のグリッドを付随的に設定すると、向きやフォーム ファクタをまたいでコンテンツの水平方向の拡大縮小が制限される可能性があるため、注意してください。通常は、パディング ルールを設定することで、必要な視覚的な一貫性を確保できます。
レイアウト構造にコピーを追加し始めます。マージンは、コンテンツを画面の端から保護します。列は、一貫したスペーシングと配置構造を提供します。
2. 封じ込めを適用する
包含を使用して要素を視覚的にグループ化します。
包含とは、ホワイト スペースと視覚的要素を組み合わせて視覚的なグループ化を行うことです。コンテナは、囲まれた領域を表す形状です。1 つのレイアウト内で、類似したコンテンツや機能を持つ要素をグループ化し、空白、タイポグラフィ、区切り線を使用して他の要素から分離できます。
ユーザーにとって見やすいコンテンツにするために、似たようなアイテムをホワイト スペースや目に見える分割を使ってグループ化することもできます。
暗黙的包含では、ホワイト スペースを使った視覚的なグループ コンテンツでコンテナの境界線を作成します。一方、明示的包含では、分割ラインやカードを使ってグループ コンテンツをまとめます。
次の図は、暗黙的な包含を使用してヘッダーとメインコピーを包含する例を示しています。列グリッドは、配置とグループ化の作成に使用されます。ハイライトはカード内に明示的に含まれています。アイコンとタイポグラフィの階層を使用して、視覚的な分離を強化します。
3. コンテンツの位置
Android には、重力、スペーシング、スケーリングなど、それぞれのコンテナ内のコンテンツ要素を適切に配置するのに役立つ複数の方法があります。
Gravity は、特定のユースケースで、より大きなコンテナ内にオブジェクトを配置するための標準です。次の図は、オブジェクトの配置の例を示しています。開始と中央（1）、上と中央（水平方向）（2）、左下（3）、終了と右（1）です。
4. コンテンツのサイズを調整する
スケーリングは、動的コンテンツ、デバイスの向き、画面サイズに対応するために不可欠です。要素は固定されたままにすることも、スケーリングすることもできます。
スケーリングと位置指定によってコンテナ内で画像がどのように表示されるかを把握することは、デバイスのコンテキストに関係なく、画像を意図したとおりに表示するために重要です。そうしないと、画像の主な焦点が切り取られたり、画像がレイアウトに対して小さすぎたり大きすぎたりするなどの望ましくない効果が生じる可能性があります。
表記されていないコンテンツは、想定または希望とは異なる表示になることがあります。
ピン留めされたコンテンツ
多くの要素には、スロットまたはスキャフォールドによるインタラクション、スクロール、位置決めが組み込まれています。一部の要素は、スクロールに反応するのではなく、固定されるように変更できます。たとえば、重要なアクションを格納するフローティング アクション ボタン（FAB）などです。
位置揃え
AlignmentLine を使用してカスタム アライメント ラインを作成します。これにより、親レイアウトで子の整列と配置を行うことができます。
すべきこと
すべきでないこと
コンポーネントのレイアウト
マテリアル 3 コンポーネントは、操作とコンテンツ用に独自の構成と状態を提供します。
Compose には、マテリアル コンポーネントを一般的な画面パターンに組み合わせるための便利なレイアウトが用意されています。Scaffold などのコンポーザブルは、さまざまなコンポーネントやその他の画面要素用のスロットを提供します。マテリアル コンポーネントとレイアウトの詳細を読む。