本頁面由 Cloud Translation API 翻譯而成。

視窗大小類別

視窗大小類別是一組固定的可視區域中斷點，設計、開發及測試回應式/自動調整式版面配置。中斷點平衡易於版面配置，以及針對獨特的情境最佳化應用程式。

視窗大小類別會將應用程式的可用顯示區域分類為精簡、中等或展開：可用寬度和高度已分類因此應用程式在任何時間點都有兩種視窗大小類別—一個用於寬度，一個用於高度。可用寬度通常較高重要性高於可用高度，因為垂直捲動非常常見寬度視窗大小類別可能與應用程式 UI 較為相關。

如圖所示，中斷點可讓您繼續思考關於裝置與設定的版面配置。每個大小類別中斷點都代表了典型裝置情境的大部分案例，當您考慮設計以中斷點為基礎的版面配置時，這個參考框架便可以派上用場。

大小類別	中斷點	裝置佔比
精簡寬度	寬度 <600dp	99.96% 直向模式的手機
中等寬度	600 dp ≤ 寬度 <840dp	93.73% 直向模式下的平板電腦直向模式下最常展開的大型內螢幕
展開寬度	寬度 ≥ 840 dp	97.22% 橫向模式下的平板電腦、橫向模式中最未摺疊的大型內螢幕
精簡高度	高度 <480dp	99.78% 橫向模式的手機
中等高度	480 dp ≤ 高度 <900dp	96.56% 橫向模式下的平板電腦、 97.59% 直向模式的手機
展開高度	高度 ≥ 900 dp	94.25% 直向模式的平板電腦

雖然以實體裝置呈現大小類別有時很有幫助，但視窗大小類別並非由裝置螢幕大小明確決定。視窗大小類別不適用 isTablet 類型的邏輯。相反地大小類別取決於應用程式可用的視窗大小無論執行應用程式的裝置類型為何，這兩項技術的重要步驟影響：

實體裝置不能保證特定的視窗大小類別。 應用程式的可用螢幕空間可能會與基於多種原因在行動裝置上，分割畫面模式可以分割畫面。在 ChromeOS 中，Android 應用程式可以顯示在可任意調整大小的任意形式視窗中。摺疊式裝置可以有兩種不同大小的螢幕例如摺疊或展開裝置。
視窗大小類別可能在應用程式的生命週期中發生變化。 應用程式執行期間、裝置螢幕方向改變、多工處理和同時摺疊/展開狀態可能會影響可用的螢幕空間大小。身為結果，視窗大小類別會動態變化，應用程式 UI 應會調整。

視窗大小類別可對應至以下元素：精簡、中等及展開中斷點： Material Design 版面配置指南。請使用視窗大小類別，做出概略的應用程式版面配置決策。例如決定是否使用特定標準版面配置就能騰出空間

您可以使用 Jetpack WindowsManager 程式庫提供的 WindowSizeClass#compute() 函式計算目前的 WindowSizeClass。以下範例說明如何計算視窗大小類別，並在視窗大小類別變更時接收更新：

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

測試視窗大小類別

變更版面配置時，請測試所有視窗大小的版面配置行為。特別是在精簡、中等和展開中斷點寬度上。

如果現有版面配置適用於小型螢幕，請先將版面配置最佳化，因為這個大小類別能提供最多空間瞭解其他內容和使用者介面的變更接著，決定哪種版面配置才適合您中等寬度大小類別不妨新增特殊的版面配置

後續步驟

進一步瞭解如何使用視窗大小類別建立回應式/自動調整設定請參閱以下內容：

以 Compose 為基礎的版面配置：支援不同的螢幕大小
以檢視畫面為基礎的版面配置：使用檢視區塊的回應式/自動調整設計

如要進一步瞭解如何讓應用程式在所有裝置和螢幕大小上提供良好體驗，請參閱：