スクロールするアプリの一般的なレイアウト
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
スクロールするアプリビューのレイアウトには、リスト(TransformingLazyColumn
)とダイアログがあります。これらのレイアウトはアプリ画面の大部分を占め、大画面サイズに適応する必要があるコンポーネントのコレクションを表します。コンポーネントがレスポンシブであることを確認します。つまり、使用可能な幅いっぱいに広がり、画面の高さの大部分が使用可能になったときに TransformingLazyColumn
の調整を採用します。これらのレイアウトはすでにレスポンシブに構築されていますが、広くなった広告枠をさらに活用するための推奨事項がいくつかあります。

レスポンシブで最適化されたデザインを作成する
デザイン レイアウトを大きな画面サイズに適応させるため、レイアウトとコンポーネントの動作を更新し、レスポンシブ動作(パーセンテージベースの余白やパディングなど)を組み込みました。この問題に対処するため、Android UI ライブラリのレイアウトとコンポーネントを更新し、レスポンシブな動作(パーセンテージベースの余白やパディングなど)を組み込みました。Compose コンポーネントを使用している場合は、この応答性を自動的に継承できます。
独自の画面デザインの場合は、さまざまな画面サイズで徹底的にテストし、コンポーネントと要素がスムーズに適応し、コンテンツが切り取られないようにします。パーセンテージの余白は、スペーサーを効果的にスケーリングするのに役立ちます。225dp のブレークポイントを使用して、大きなスマートウォッチの画面に追加情報や高度な機能を導入することをおすすめします。
コンポーネントが使用可能な幅を埋めていることを確認する
すべてのコンポーネントはレスポンシブに構築されているため、使用可能な幅と高さに収まります。画面の丸い角によってコンテンツが切り取られないように、必要な余白があることを確認してください。
追加のテキスト文字を表示する
ほとんどのコンポーネントには、使用可能な幅いっぱいに広がるテキスト ボックスがあります。つまり、画面幅が広くなると、文字数も自動的に増えます。
アダプティブで差別化されたデザインを作成する
スクロール レイアウトでは、以前は画面の折りたたみ部分に隠れていたコンテンツが自動的に表示されるため、価値を高めるために必要な作業はほとんどありません。各コンポーネントは使用可能な幅を埋めます。場合によっては、コンポーネントにテキストの行が追加される(カードなど)場合や、コンポーネントが使用可能な幅いっぱいに伸びる(アイコンボタンなど)場合があります。
大画面サイズの追加スペースを最大限に活用するには、225 dp にサイズ ブレークポイントを追加します。このブレークポイントを使用すると、追加のコンテンツを表示したり、ボタンやデータを追加したり、大きな画面に合わせてレイアウトを変更したりできます。これには、ブレークポイントごとに異なる設計が必要です。大きな画面のデザイン(225 インチ以上)には、次の要素を追加できます。
既存のコンポーネントのサイズを増やす、または状態を変更する
これは、より詳細な情報を表示したり、コンテンツを簡単に確認できるようにしたりするために行われます。
最適化された差別化されたレイアウト
225dp のブレークポイントを超えるとレイアウトが若干変更され、デフォルト ビューの折り返しの上のコンテンツが最適化されますが、折り返しの下の同じコンテンツは、画面サイズに関係なく引き続き利用できます。
レスポンシブな動作と適応性の高い動作
Compose ライブラリ内のすべてのコンポーネントは、幅と高さを広げて、より広い画面サイズに自動的に適応します。レスポンシブ デザインの手法を使用するスクロールビューは、通常、さまざまな画面サイズに適応します。ただし、特別なケースでは、ブレークポイントを使用してディメンションをオーバーライドし、レイアウトを拡張して機能を拡張したり、一目でわかるようにしたり、コンテンツを画面に適切に収めたりできます。
クリッピングを回避し、要素を比例してスケーリングするには、上、下、左右のすべての余白をパーセンテージで定義する必要があります。PositionIndicator
はユーザーがスクロールしたときに表示され、画面のベゼルのサイズに関係なく自動的に画面のベゼルに沿って表示されます。
チェックリスト
- 上部、下部、両側に推奨される余白を適用します。
- 外側のマージンをパーセンテージ値で定義して、スクロール可能なコンテナの開始と終了でクリッピングが発生しないようにします。
- UI 要素間に固定の DP 値でマージンを適用します。
- 225dp でブレークポイントを適用して、追加のコンテンツを導入したり、大きな画面サイズで既存のコンテンツをより簡単に確認できるようにしたりすることを検討してください。

差別化されたエクスペリエンスを作成する
スクロール ビューは高度にカスタマイズ可能で、任意のコンポーネントを任意の順序で追加できます。上部と下部の余白は、上部と下部に配置するコンポーネントによって変更できます。これは、画面の湾曲が拡大してコンテンツが切り取られるのを防ぐためです。

このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-27 UTC。"],[],[],null,["# Common layouts for scrolling apps\n\nScrolling app view layouts include lists (`TransformingLazyColumn`) and dialogs.\nThese layouts make up the majority of app screens, and they represent a\ncollection of components which need to adapt to larger screen sizes. Check that\nthe components are responsive---that is, that they fill the available width and\nadopt the `TransformingLazyColumn` adjustments when more of the screen's height\nis available. These layouts are built responsively already, and we have some\nadditional recommendations to take further advantage of the expanded real\nestate.\n\nBuild responsive and optimized designs\n--------------------------------------\n\nTo help your design layouts adapt to larger screen sizes, we have updated the\nbehavior of our layouts and components to have built-in responsive behavior,\nincluding percentage-based margins and padding. To address this, we have updated\nour Android UI library layouts and components with built-in responsive behavior,\nincluding percentage-based margins and padding. If you're utilizing our Compose\ncomponents, you can automatically inherit this responsiveness.\n\nFor unique screen designs, thoroughly test across a variety of screen sizes,\nensuring components and elements adapt smoothly and avoid content clipping. Our\npercentage margins help spacers scale effectively, and we recommend using a\nbreakpoint at 225dp to introduce additional information and enhanced\nfunctionality on larger watch screens.\n\n### Check that components fill the available width\n\n\nAll components are built responsively, meaning they fill the available width and\nheight. Make sure you have the necessary margins to ensure content doesn't get\nclipped by the rounding screen. \n\n\n\u003cbr /\u003e\n\n### Show additional text characters\n\n\nMost components have text boxes which fill the available width. This means that\nthey automatically gain character counts as the screen width increases. \n\n\n\u003cbr /\u003e\n\nBuild adaptive and differentiated designs\n-----------------------------------------\n\nAs scrolling layouts will automatically show more of what was previously hidden\nbelow the screen fold, there isn't much you need to do to add value. Each\ncomponent fills the available width, and in some cases, a component might gain\nadditional rows of text (such as cards), or components stretch to fill the\navailable width (such as icon buttons).\n\nTo best use the additional space on larger screen sizes, add a size breakpoint\nat 225dp. This breakpoint makes it possible to reveal additional content,\ninclude more buttons or data, or change the layout to better suit the larger\nscreen. This requires a different design for each breakpoint. The larger screen\ndesign (225+) could include the following additional elements:\n\n### Increase the size or change the state of the existing components\n\n\nThis could be done in order to show more detail or make the content more\nglanceable. \n\n\u003cbr /\u003e\n\n### Optimized and differentiated layouts\n\n\nThe layout can alter slightly after the 225dp breakpoint, so that the content\nabove the fold in the default view is optimized, however all of the same content\nbelow the fold should still be available regardless of screen size. \n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library will automatically adapt to the wider\nscreen size, and gain width and height. Scroll views that use responsive design\npractices usually adapt to a range of screen sizes. However, in some special\ncases, you can use a breakpoint to override dimensions and augment layouts which\nexpand functionality, improve glanceability, or make content fit better on\nscreen.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. Consider that the\n`PositionIndicator` appears when the user scrolls, and it automatically hugs the\nscreen's bezel no matter its size.\n\n### Checklist\n\n- Apply the recommended top, bottom, and side margins.\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\nCreate differentiated experiences\n---------------------------------\n\nScrolling views are highly customizable, with the ability to add any combination\nof components in any order. The top and bottom margins can change depending on\nwhich components sit at the top and bottom. This is to prevent content from\nbeing clipped by the growing curve of the screen."]]