コンテンツの構成と構成

コンテンツの構造と包含方法を使用して、柔軟なフローとリズムを構築します。まずレイアウト コンテナを設計し、次にコンテンツを追加します。

1. 基本構造: コンテンツをガイドするレイアウト グリッド

一貫したガードレールを備えた堅牢な構造を作成するには、レイアウトにマージンと列を追加します。

マージンは、画面とコンテンツの左右の端にスペースを提供します。コンパクトなサイズ設定の標準マージン値は 16 dp ですが、マージンはより大きな画面に対応できるように調整する必要があります。アプリの本文コンテンツとアクションは、これらのマージン内に収まり、マージンに沿って配置される必要があります。

このステップで、インセットのセーフゾーンまたはインセットを確保することもできます。システムバー インセットを使用すると、重要なアクションがシステムバーの下に隠れるのを防ぐことができます。コンテンツはシステムバーの背後に 描画する必要があります。

列を使用して、一貫した配置のための柔軟なグリッド構造を構築し、本文領域内のコンテンツを分割してレイアウトに垂直方向の定義を提供します。コンテンツは、列を含む画面の領域に配置されます。これらの列はレイアウトに構造を与え、要素を配置するための便利な構造を提供します。

コンテンツの重要度（階層）は、より構造化されたレイアウト グリッドのタイプを決定するのに役立ちます。コンテンツに明確な階層がある場合は、階層レイアウト グリッドが適しています。たとえば、大きなヘッダーとキーアートを含むエディトリアル レイアウトや詳細画面などです。

モジュール式グリッドは、フォト ギャラリーのように、重要度は同じだが構造化されたコンテンツやレイアウトに適しています。

一貫してレスポンシブな一方向レイアウトの場合や、より柔軟性が必要な場合は、列グリッドを選択します。

どのタイプであっても、レイアウト グリッドはサイズやフォーム ファクタに合わせて調整する必要があります。

この例では、列グリッドを使用して、柔軟なサイズ設定を維持しながら、コンテンツを基盤となるグリッドに沿って配置しています。さまざまなフォーム ファクタに対応するため、列グリッドは画面サイズに基づいて列のサイズと列数を変更します。これにより、コンテンツのサイズも調整できます。レイアウト グリッドを細かくしすぎないようにしてください。代わりに、ベースライン グリッドを使用して、一貫した間隔単位を提供します。

または、階層レイアウト グリッドを使用して、詳細画面の順序を維持します。

一貫したレイアウト グリッドから始めます。コンテンツで必要な場合は、グリッドを分割します。それでも、別のグリッドがコンテンツのニーズに合っている場合があります。

ページャーやフロー レイアウトなどのレイアウト コンテナの詳細をご確認ください。

原稿とレンガ積みは、他のタイプのレイアウト グリッドです。

どのレイアウト グリッドを選択しても、ペインの包含の概念を使用して、アダプティブ レイアウトのコンテンツをグループ化できます。たとえば、使用されている例は詳細画面で、リストと詳細のレイアウトで表示できる 1 つのペインです。

2. 包含を適用する

包含を使用して、要素を視覚的にグループ化します。

包含とは、ホワイト スペースと視覚的要素を組み合わせて使用して、視覚的なグループ化を作成することです。コンテナは、囲まれた領域を表す形状です。1 つのレイアウトで、同様のコンテンツや機能を共有する要素をグループ化し、空白、タイポグラフィ、区切り線を使用して他の要素から分離できます。

Android では、行、列、ボックスがビルディング ブロックとして使用されるため、同様の方法で包含を設計できます。ユーザーにとって見やすいコンテンツにするために、似たようなアイテムをホワイト スペースや目に見える分割を使ってグループ化することもできます。

暗黙的包含では、ホワイト スペースを使った視覚的なグループ コンテンツでコンテナの境界線を作成します。一方、明示的包含では、分割ラインやカードを使ってグループ コンテンツをまとめます。

次の図は、暗黙的包含を使用してヘッダーと本文を包含する例を示しています。列グリッドを使用して、グループを配置して作成します。ハイライトはカード内に明示的に含まれています。アイコンとタイポグラフィの階層を使用して、視覚的な分離を強化します。

3. コンテンツを配置する

レイアウト グリッドを選択し、コンテナにコンテンツを配置すると、Android には、基本的なビルディング ブロックと修飾子、またはグリッドや Flexbox などのレイアウト コンテナを使用して、コンテンツ要素を処理して配置するさまざまな方法があります。

コンテンツが 1 次元か 2 次元かを検討します。たとえば、コンテンツは水平方向、垂直方向、または両方向に流れることがあります。

次の図に示すように、認証レイアウトでは 2 次元のグリッド レイアウトを使用できます。

UI 要素は、フィルタやコンテンツ タグのように、1 次元で柔軟に配置することもできます。Flexbox の詳細をご確認ください。

レイアウトでは、レイアウト タイプを組み合わせて使用することもできます。たとえば、カルーセルや水平スクロールを縦型カードと組み合わせることができます。または、縦型リストデータを含むカスタム チャートを表示することもできます。

Lazy Row と Lazy Column を使用すると、スクロール可能な行または列にコンテンツを表示できます。

配置

自動レイアウトのフローと配置と同様に、UI 要素の 配置と配置を指定できます。

AlignmentLine を使用してカスタム アライメント ラインを作成します。親レイアウト はこれを使用して子を配置できます。

4. コンテンツのサイズ調整と切り抜き

動的コンテンツ、デバイスの向き、画面サイズに対応するには、スケーリングが不可欠です。要素は固定されたままにすることも、スケーリングすることもできます。

画像がどのデバイスでも正しく表示されるように、コンテナ内での画像の拡大と配置の方法を指定します。そうしないと、画像の主な焦点が切り取られたり、画像がレイアウトに対して小さすぎたり大きすぎたりする可能性があります。

適切なスケーリングと切り抜きを使用して、さまざまなデバイスのアスペクト比と向きに対応します。アスペクト比は大きく異なる可能性があるため、コンテンツでこれらのシナリオを処理する方法を指定します。

たとえば、全幅のヒーロー画像は、横向きのスマートフォンの画面全体に表示されます。

縦向きのみの動画など、コンテンツでアスペクト比を維持する必要がある場合は、アスペクト比を制約し、空白のバランスを取ります。

固定されたコンテンツ

多くのコンポーネントには、アプリバーのように、スロットやスキャフォールドを使用した組み込みの操作、スクロール、配置があります。一部の要素は、スクロールに反応するのではなく、固定されたままになるように変更できます。たとえば、重要なアクションを格納するフローティング アクション ボタン（FAB）などです。特定のユースケースで要素を固定してフォーカスを向上させます。たとえば、テキスト入力欄をキーボードに固定して、入力欄が隠れないようにします。

メッセージングや認証などのテキスト入力の場合、入力はキーボードに接続され、フォーカスが与えられます。

レイアウト内のコンポーネント

マテリアル 3 コンポーネントには、 操作とコンテンツ用の独自の構成と状態が用意されています。

Compose には、マテリアル コンポーネントを一般的な画面パターンに組み合わせるための便利なレイアウトが用意されています。Scaffold などのコンポーザブルは、 さまざまなコンポーネントやその他の画面要素用のスロットを提供します。マテリアル コンポーネントとレイアウトの詳細をご確認ください 。