このページは Cloud Translation API によって翻訳されました。

ウィンドウサイズクラス

ウィンドウサイズクラスは、独自のビューポートブレークポイントのセットです。ウィンドウサイズクラスを使用すると、レスポンシブ/アダプティブレイアウトを設計、開発、テストする。ブレークポイントのバランスシンプルなレイアウトに加え、固有のケースに合わせてアプリを柔軟に最適化できます。

ウィンドウサイズクラスは、アプリで利用可能な表示領域を 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 を計算します。 currentWindowAdaptiveInfo() の最上位関数 androidx.compose.material3.adaptive ライブラリ。この関数は、 windowSizeClass を含む WindowAdaptiveInfo のインスタンス。「次の例は、ウィンドウサイズクラスを計算して受信する方法を示しています。ウィンドウサイズクラスが変更されるたびに更新されます。

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClassAdaptiveLayoutSnippets.kt

ウィンドウサイズクラスを使用してレイアウトを管理する

ウィンドウサイズクラスを使用すると、アプリのレイアウトを表示スペースとして変更できるたとえば、デバイスが折りたたまれたり開いたりしたときに、デバイスの画面の向きが変更された、またはマルチウィンドウでアプリウィンドウのサイズが変更されるモードです。

ウィンドウサイズを渡してディスプレイサイズの変更を処理するロジックをローカライズする他のアプリの状態と同様に、クラスを状態としてネストされたコンポーザブルにダウンさせることもできます。

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}AdaptiveLayoutSnippets.kt