概要

Compose レイアウト テンプレートとサンプル デザイン レイアウトを理解して、独自のアプリ画面を設計して構築します。

ほとんどのアプリは、次の要素で構成されるスクロールなしまたはスクロール レイアウトを使用します。

  • 時刻のテキスト: デバイスがスマートウォッチであるため、アプリの操作中も時刻のテキストを表示することをおすすめします(任意ですが、推奨)。
  • ページのタイトル: ユーザーがどの段階にいるかを示したナビゲーションとリマインダー(省略可、推奨)。
  • スクロール インジケーター: スクロール レイアウトでのみ使用。画面の折り目より下にコンテンツがあることを示します。
  • 操作ボタン: 下部に配置することをおすすめします。ユーザー ジャーニーの確認、終了、続行に使用します。

アプリのレイアウト セクション

上部セクション

上部のセクションには、ウェイファインダーと明確なナビゲーションとして機能する時刻テキスト、コンパクトなボタン、タイトルのオプションがあります。すべて省略可能です。

ページが非常に長い特殊なケースでは、コンパクト ボタンを使用できます。検索ボタンやアクション ボタンを使用すると、ユーザーは一番下までスクロールしなくてもリストを操作できます。

中央のセクション

中央のセクションには、使用可能な Compose(全画面以外)またはカスタム コンポーネントをリストに含めることができます。このセクションには、コンテンツをグループ化するための追加の見出しとスクロールバーを含めることができます。

中央のコンテンツ セクション内のすべてのコンポーネントはレスポンシブで、使用可能な幅をパーセンテージ マージンまで埋める必要があります。すべてのスクロール レイアウトは、スケーリング レイジー列の動作を持ち、コンポーネントがスケーリングされ、画面からフェードアウトします。

下部セクション

下部のセクションには、プライマリ アクション ボタンとセカンダリ アクション ボタンのスペースがあります。または、これがジャーニーの最後である場合は空のままにすることもできます。

限られたスペースを活用し、丸い画面を補完するため、リストの端のエッジを覆うボタンを使用することをおすすめします。

複数のアクションが必要な場合は、ボタン グルーピングまたは 2 つのアイコンのボタン グループに表示できます。

スクロール不可のアプリビュー

タイトルあり
タイトルなし

タイトルあり、下部セクションなし
タイトルまたは下部セクションなし

アプリビューのスクロール

タイトルあり
タイトルなし

タイトルあり、下部セクションなし
タイトルまたは下部セクションなし