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

ウィンドウサイズクラス

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

ウィンドウサイズクラスは、アプリで使用可能な表示領域を「コンパクト」、「中」、または「展開」に分類します。利用可能な幅と高さは別々に分類されているため、どの時点でも、アプリにはウィンドウサイズクラスが 2 つ（幅用と高さ用）あります。縦方向のスクロールが多いため、通常、利用可能な幅は利用可能な高さよりも重要です。そのため、幅のウィンドウサイズクラスはアプリの 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 つの重要な影響があります。

物理デバイスで、特定のウィンドウサイズクラスが保証されるわけではありません。アプリが使用できる画面スペースは、さまざまな理由からデバイスの画面サイズとは異なる場合があります。モバイルデバイスでは、分割画面モードを使用して 2 つのアプリ間で画面を分割できます。ChromeOS では、任意にサイズ変更可能なフリーフォームウィンドウで Android アプリを表示できます。折りたたみ式デバイスでは、デバイスを折りたたむか広げることで、2 つの異なるサイズの画面に個別にアクセスできます。
ウィンドウサイズクラスは、アプリの全期間を通じて変化する可能性があります。アプリの実行中に、デバイスの向きの変化、マルチタスク、折りたたみ/展開によって、利用可能な画面スペースの量が変わることがあります。そのため、ウィンドウサイズクラスは動的であり、アプリの UI はそれに適応する必要があります。

ウィンドウサイズクラスは、マテリアルデザインレイアウトのガイダンスに記載されているコンパクト、中程度、拡大の各ブレークポイントにマッピングされます。ウィンドウサイズクラスを使用して、アプリレイアウトの概要を決定します。たとえば、特定の正規レイアウトを使用して追加の画面スペースを利用するかどうかを決定します。

現在の WindowSizeClass は、Jetpack WindowManager ライブラリの WindowSizeClass#compute() 関数を使用して計算できます。次の例は、ウィンドウサイズクラスを計算し、ウィンドウサイズクラスが変更されるたびに更新を受け取る方法を示しています。

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.
    }
}