画面の高さよりも多くの情報が含まれているページや、より長く没入感のあるジャーニーが必要なページには、スクロール ビューを使用します。
プリセットのスクロール レイアウト コンポーネント
下部にボタンが積み重ねられたダイアログ
下部にボタンが積み重ねられたダイアログ
下部に 2 つのボタンがあるダイアログ
カスタム スクロール レイアウトの例
スクロールするアプリ画面は、設定されたコンポーネントに限定されず、要素を組み合わせて必要なレイアウトを作成できます。スクロール画面の長さと、レスポンシブ(パーセンテージ)のマージンとパディングの使用に注意して、コンポーネントが利用可能な画面サイズに適応していることを確認します。
大画面での追加コンテンツ
ボタンリスト: アイコン サイズ 26dp のアイコンボタン
ボタンリスト: アイコンサイズ 32dp のアプリボタン
ボタンリスト: アイコンサイズ 36 dp のアプリボタン
切り替えボタン付きのボタンリスト
単一行要素を含む混合リスト
複数行の要素を含む混合リスト
アプリカードを含むカードリスト
タイトルカードを含むカードリスト
カスタムカードを含むカードリスト
テキストリスト
レスポンシブでアダプティブな動作
Compose ライブラリのすべてのコンポーネントは、画面サイズが大きくなると自動的に適応し、幅と高さが大きくなります。レスポンシブ デザインの手法を使用するスクロール ビューは、通常、さまざまな画面サイズに対応します。ただし、特別なケースでは、ブレークポイントを使用してディメンションをオーバーライドし、レイアウトを拡張して、機能を拡張したり、一目でわかるようにしたり、コンテンツを画面に適切に収めたりできます。
レスポンシブ パラメータが正しく定義されていることを確認するには、次のチェックリストを使用します。
- 推奨される上、下、左右の余白を適用します。
- スクロール可能なコンテナの先頭と末尾でクリッピングが発生しないように、外側のマージンをパーセンテージ値で定義します。
- UI 要素間のマージンを固定 DP 値で適用します。
- 225 dp でブレークポイントを適用して、大きな画面サイズで追加のコンテンツを導入したり、既存のコンテンツをより見やすくしたりすることを検討してください。
