このページは 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 使用 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.
    }
}