スクロールしないビューは、一目でわかる情報に焦点を当て、ユーザーがほとんど操作しなくても価値を提供します。そのため、これらのレイアウトにレスポンシブな動作を組み込むのは難しい場合があります。
スクロールしないレイアウト コンポーネントのプリセット
ダイアログ
ダイアログは、画面全体を占める一時的なオーバーレイです。ユーザーが 1 つのアクションを実行できます。
- ダイアログは、コンテンツが処理されたことを確認するために表示されます。
- ダイアログは、情報を直接伝え、タスクの完了に専念する必要があります。
- ダイアログは、ユーザータスクまたはアクションに応じて、関連情報またはコンテキスト情報とともに表示される必要があります。
確認のオーバーレイ
確認オーバーレイは、確認メッセージを短時間、ユーザーに表示します。このコンポーネントを使用して、アクションの実行後にユーザーの注意を引きます。
スマートフォンで開く
スマートフォンで開くオーバーレイは、ユーザーがスマートフォンでルート検索を続行することを選択したときにトリガーされます。オーバーレイには進行状況インジケーターが表示され、スマートフォンを確認するタイミングがユーザーに通知されます。
ステッパー
ステッパーを使用することで、ユーザーが値の範囲から選択できる全画面コントロールを実現できます。ボタンまたはクラウンを使用して操作を制御できます。特定のレベルは、曲線のレベル インジケーターで示されます。
時間設定
選択ツールを使用すると、ユーザーはスクロール可能なセクションで限られた数のアイテムから選択できます。時刻選択ツールには、秒が使用可能かどうか、時計が 12 時間形式か 24 時間形式かによって、最大 3 つの列があります。ユーザーは各列を一度に操作し、続行する前にフォーカスを当てたままの数字を残して選択します。
日付選択ツール
選択ツールを使用すると、ユーザーはスクロール可能なセクションで限られた数のアイテムから選択できます。日付選択ツールには最大 3 つの列があり、ユースケースに応じて日付、時刻、年の順序を入れ替えることができます。日付選択ツールでは、コンテンツの文字列が長くなるため、一度に 1 列しか表示されず、左右に何があるかを確認できます。ユーザーは各列を一度に操作し、フォーカスされている数値をそのままにして選択を完了してから続行します。
カスタムのスクロールしないレイアウトの例
スクロールしないアプリ画面は、設定されたコンポーネントに限定されません。要素の組み合わせを組み合わせて、目的のレイアウトを作成できます。
スクロールしない画面のスペースが限られていること、レスポンシブ（パーセンテージ）のマージンとパディングを使用して利用可能な画面スペースを使用することを考慮する必要があります。225 dp でブレークポイントを適用して、大きな画面サイズで追加のコンテンツを表示したり、既存のコンテンツを見やすくしたりすることも検討できます。
マップ
緊急時オーバーレイ
緊急速報メール
レスポンシブでアダプティブな動作
Compose ライブラリのすべてのコンポーネントは、画面サイズが大きくなると自動的に適応し、幅と高さが大きくなります。特にこれらのビューでは、ブレークポイントを活用することで、すべてのユーザーに特にリッチで価値のあるエクスペリエンスを提供できます。
UI のボタン、カード、マージンの多くで、さまざまな画面サイズに合わせてスペースを広げ、埋めることで、UI の利用可能なスペースを有効活用し、バランスの取れたレイアウトを実現します。
次のチェックリストを使用して、レスポンシブ パラメータが正しく定義されていることを確認します。
- すべての画面サイズで適切に表示される柔軟なレイアウトを作成します。
- 推奨される上、下、左右の余白を適用します。
- コンテンツが切り取られる可能性がある場所で、マージンをパーセンテージ値で定義します。
- レイアウト制約を活用して、要素が画面内のスペースを最大限に活用し、さまざまなデバイスサイズでバランスを維持できるようにします。
- 時刻のテキストが使用されている場合は、それに合わせて調整しますが、ページの上部セクションと重ならないようにします。
- 限られたスペースを最大限に活用するために、エッジに沿ったボタンの使用を検討してください。
- 225 dp でブレークポイントを適用して、大きな画面サイズで追加のコンテンツを導入したり、既存のコンテンツをより見やすくしたりすることを検討してください。
ページネーションを使用した複数の非スクロール ページ ジャーニー
エクスペリエンスでより多くのコンテンツが必要だが、スクロールしないレイアウトを維持したい場合は、縦方向または横方向のページネーションを含むマルチページ レイアウトを検討してください。
