ウィンドウ サイズクラスは、独自のビューポート ブレークポイントのセットです。ウィンドウ サイズクラスを使用すると、 レスポンシブ/アダプティブ レイアウトを設計、開発、テストする。ブレークポイントのバランス シンプルなレイアウトに加え、固有のケースに合わせてアプリを柔軟に最適化できます。
ウィンドウ サイズクラスは、アプリで利用可能な表示領域を compact、medium、expanded。利用可能な幅と高さは どの時点においても、アプリにはウィンドウ サイズが 2 つ 1 つは幅用、もう 1 つは高さ用です。通常、使用可能な幅はより広くなります 縦方向のスクロールは頻繁に行われるため、利用可能な高さよりも重要になります。 幅のウィンドウ サイズクラスの方がアプリの UI により適している可能性が高いです。
図に示すように、ブレークポイントにより、 詳しく見ていきましょう。各サイズクラスのブレークポイントは、典型的なデバイス シナリオの一般的なケースを表しており、ブレークポイントに基づくレイアウトの設計を検討する際の基準として有用です。
サイズクラス | ブレークポイント | デバイスによる表現 |
---|---|---|
コンパクトな幅 | 幅 600 dp 未満 | 縦向きのスマートフォンの 99.96% |
中程度の幅 | 幅 600 dp 以上 840 dp 未満 | 縦向きのタブレットの 93.73% 開いた状態の最も大きなインナー ディスプレイ(縦向き) |
拡大幅 | 幅 840 dp 以上 | 横向きのタブレットの 97.22% 横向きの最も大きな展開インナー ディスプレイ |
コンパクトな高さ | 高さ 480 dp 未満 | 横向きのスマートフォンの 99.78% |
中程度の高さ | 高さ 480 dp 以上 900 dp 未満 | 横向きのタブレットの 96.56% 縦向きのスマートフォンの 97.59% |
拡大高さ | 高さ 900 dp 以上 | 縦向きのタブレットの 94.25% |
サイズクラスを物理デバイスとして可視化すると便利ですが、ウィンドウ サイズは デバイス画面サイズによって明示的に決定されることはありません。ウィンドウ サイズクラスは isTablet タイプのロジック用ではありません。むしろ、ウィンドウは サイズクラスは、アプリケーションで使用可能なウィンドウ サイズによって 常に同じですが 影響:
物理デバイスで、特定のウィンドウ サイズクラスが保証されるわけではありません。「 利用可能な画面スペースは、アプリの画面サイズと アクセスします。モバイル デバイスでは、分割画面モードを使用して以下のことを行えます。 2 つのアプリ間で画面を分割しますChromeOS では、Android アプリで次の操作を行えます。 任意のサイズに調整可能なフリーフォーム ウィンドウで表示できます。 折りたたみ式デバイスでは、サイズの異なる 2 つの画面に個別にアクセスできます デバイスを折りたたんだり広げたりできます。
ウィンドウ サイズクラスは、アプリの全期間を通じて変更される可能性があります。 アプリの実行中に、デバイスの向きの変化、マルチタスク、 折りたたんだり広げたりすることで、利用可能な画面スペースの大きさが変わることがあります。デバイス名: ウィンドウ サイズクラスは動的であり、アプリの UI は 必要があります。
ウィンドウ サイズクラスは、 マテリアル デザイン レイアウト ガイダンスをご覧ください。 ウィンドウ サイズクラスを使用して、アプリのレイアウトを大まかに決定します。 たとえば、特定の正規レイアウトを使用して 十分な画面スペースを確保できます。
現在の
WindowSizeClass
使用
WindowSizeClass#compute()
の関数を Jetpack で提供
WindowManager ライブラリ:次の例をご覧ください。
ウィンドウ サイズクラスを計算し、問題が発生したときに
ウィンドウ サイズクラスの変更:
Kotlin
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. val container: ViewGroup = binding.container // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(object : View(this) { override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) computeWindowSizeClasses() } }) computeWindowSizeClasses() } private fun computeWindowSizeClasses() { val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this) val width = metrics.bounds.width() val height = metrics.bounds.height() val density = resources.displayMetrics.density val windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass // COMPACT, MEDIUM, or EXPANDED val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass // Use widthWindowSizeClass and heightWindowSizeClass. } }
Java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. ViewGroup container = binding.container; // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(new View(this) { @Override protected void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); computeWindowSizeClasses(); } }); computeWindowSizeClasses(); } private void computeWindowSizeClasses() { WindowMetrics metrics = WindowMetricsCalculator.getOrCreate() .computeCurrentWindowMetrics(this); int width = metrics.getBounds().width int height = metrics.getBounds().height() float density = getResources().getDisplayMetrics().density; WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass() // COMPACT, MEDIUM, or EXPANDED WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass() // Use widthWindowSizeClass and heightWindowSizeClass. } }
ウィンドウ サイズクラスをテストする
レイアウトを変更したら、すべてのウィンドウ サイズでレイアウトの動作をテストします。 特にコンパクト、中程度、拡大のブレークポイント幅で顕著です。
コンパクト画面向けの既存のレイアウトがある場合は、まずレイアウトを最適化します (拡大後の幅)のサイズクラス。 内容と UI の変更をご覧ください。次に、生成 AI にとって適切なレイアウトを 中程度の幅のサイズクラスです。特別なレイアウトの追加を検討してください
次のステップ
ウィンドウ サイズクラスを使用してレスポンシブ/アダプティブ バナーを作成する方法の詳細 以下をご覧ください。
Compose ベースのレイアウトの場合: 各種の画面サイズをサポートする
ビューベースのレイアウトの場合: ビューを使用したレスポンシブ/アダプティブ デザイン
さまざまなデバイスと画面サイズに適したアプリの詳細については、 以下をご覧ください。