視窗大小類別是一組固定的可視區域中斷點, 設計、開發及測試回應式/自動調整式版面配置。中斷點平衡 易於版面配置,以及針對獨特的情境最佳化應用程式。
視窗大小類別會將應用程式的可用顯示區域分類為 精簡、中等或展開:可用寬度和高度已分類 因此應用程式在任何時間點都有兩種視窗大小 類別—一個用於寬度,一個用於高度。可用寬度通常較高 重要性高於可用高度,因為垂直捲動非常常見 寬度視窗大小類別可能與應用程式 UI 較為相關。
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_width.png?authuser=0000&hl=zh-tw)
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_height.png?authuser=0000&hl=zh-tw)
如圖所示,中斷點可讓您繼續思考 關於裝置與設定的版面配置。每個大小類別中斷點都代表了典型裝置情境的大部分案例,當您考慮設計以中斷點為基礎的版面配置時,這個參考框架便可以派上用場。
大小類別 | 中斷點 | 裝置佔比 |
---|---|---|
精簡寬度 | 寬度 <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 版面配置 指南。 請使用視窗大小類別,做出概略的應用程式版面配置決策。 例如決定是否使用特定標準版面配置 就能騰出空間
使用WindowSizeClass
currentWindowAdaptiveInfo()
androidx.compose.material3.adaptive
程式庫。這個函式會傳回
WindowAdaptiveInfo
的執行個體,其中包含 windowSizeClass
。
以下範例說明如何計算視窗大小類別並接收
每當視窗大小類別變更時進行更新:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
使用視窗大小類別管理版面配置
視窗大小類別可讓您將應用程式版面配置變更為顯示空間 可用的不同元件 (例如裝置折疊或展開時) 裝置螢幕方向改變,或是在多視窗模式下調整應用程式視窗大小 模式。
藉由傳遞視窗大小,將處理顯示大小變更的邏輯本地化 如同任何其他應用程式狀態,將類別向下分解為巢狀結構的可組合項:
@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, /* ... */ ) }
測試視窗大小類別
變更版面配置時,請測試所有視窗大小的版面配置行為。 特別是在精簡、中等和展開中斷點寬度上。
如果現有版面配置適用於小型螢幕,請先將版面配置最佳化 ,因為這個大小類別能提供最多空間 瞭解其他內容和使用者介面的變更接著,決定哪種版面配置才適合您 中等寬度大小類別不妨新增特殊的版面配置
後續步驟
進一步瞭解如何使用視窗大小類別建立回應式/自動調整設定 請參閱以下內容:
以 Compose 為基礎的版面配置:支援不同的螢幕大小
以檢視畫面為基礎的版面配置:使用檢視區塊的回應式/自動調整設計
如要進一步瞭解如何讓應用程式在所有裝置和螢幕大小上提供良好體驗, 請參閱: