目前使用中的 Android 大螢幕裝置超過 3 億台,包括平板電腦、摺疊式裝置、Googlebook、ChromeOS 裝置、車輛螢幕和電視,而且數量持續增加。為了在越來越多樣化的大螢幕裝置和標準手機上提供最佳使用者體驗,請建構自動調整式應用程式。
什麼是自動調整應用程式?
自動調整式應用程式會根據應用程式顯示畫面的變化 (主要是應用程式視窗的大小) 調整版面配置。不過,自動調整式應用程式也會配合摺疊式裝置的型態變化 (例如桌面或書本型態),以及螢幕密度和字型大小的變化。
自動調整式應用程式不會只根據不同的視窗大小,延展或縮小 UI 元素,而是會替換版面配置元件,並顯示或隱藏內容。舉例來說,在標準手機上,自動調整應用程式可能會顯示底部導覽列,但在大螢幕上則會顯示導覽邊欄。在大螢幕上,自動調整應用程式會顯示更多內容,例如雙窗格、清單/詳細資料版面配置;在小螢幕上,則會顯示較少內容,例如清單或詳細資料。
過去,應用程式通常會以全螢幕模式執行。現在,應用程式會以多視窗模式在任意大小的視窗中執行,不受裝置螢幕大小影響。使用者可以隨時變更視窗大小。因此,即使在單一裝置類型上,應用程式也必須具備自動調整功能。
自動調整式應用程式在任何裝置上都能呈現良好視覺效果,並妥善運作。
為什麼要建構自動調整式 UI?
使用者希望應用程式在所有裝置上都能完美運作,並在大螢幕上提供更強大的功能。使用者可在多視窗模式下多工處理,享有更優質的應用程式體驗,並提高工作效率。
如果應用程式在標準手機上只能執行單一工作,就無法觸及日益擴大的多元使用者族群。
Google Play
Google Play 提供平板電腦和摺疊式裝置專屬的應用程式精選和推薦內容,讓使用者發掘優質應用程式。
Play 會將針對大螢幕最佳化的應用程式和遊戲,排在未最佳化的應用程式之前。Play 會根據大螢幕應用程式品質指南進行排名。排名越高,曝光度就越高,因為多裝置使用者可以在手機上看到大螢幕專屬的評分和評論。
如果應用程式不符合 Play 商店的大螢幕品質標準,應用程式詳細資料頁面就會顯示警告。警告訊息會提醒使用者,應用程式可能無法在大螢幕裝置上正常運作。
建構自動調整應用程式,提高在 Google Play 的曝光度,並盡可能增加可下載應用程式的裝置數量。
如何開始使用
從規劃到部署,在應用程式開發的所有階段,都應考量自動調整設計。向平面設計師說明自動調整式設計。將應用程式設計為自動調整式,即可建構易於管理、可擴充,且能因應未來板型規格和視窗模式的應用程式。
如要建立支援所有螢幕大小和設定的自動調整式應用程式,請按照下列步驟操作:
- 使用視窗大小類別決定版面配置
- 使用 Compose Material 3 Adaptive 程式庫建構
- 支援觸控以外的輸入方式
- 在所有裝置類型上測試
Android 技能
前往 GitHub 查看讓應用程式自動調整
adaptive Android 技能更新應用程式 UI,使其能配合不同的 Android 裝置和螢幕。android skills add adaptive視窗大小類別
即使應用程式處於全螢幕模式,應用程式視窗尺寸在不同裝置上 (或在摺疊式裝置上) 也可能不同。裝置方向不同,顯示比例也會不同。在多視窗模式下,應用程式視窗大小、顯示比例和螢幕方向可能與裝置螢幕不同。
自動調整式應用程式在算繪版面配置時,只會考量應用程式視窗,因此可簡化並概括判斷及管理視窗大小、顯示比例和方向的問題,這在應用程式視窗為全螢幕時也適用。
視窗大小類別會根據視窗寬度或高度,將應用程式視窗分類為精簡、中等或展開。
使用 Compose Material 3 Adaptive 程式庫的 currentWindowAdaptiveInfo() 頂層函式,計算應用程式的 WindowSizeClass。這個函式會傳回 WindowAdaptiveInfo 的例項,其中包含 windowSizeClass。每當視窗大小類別變更時,應用程式就會收到更新:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
內容窗格
活動的版面配置有時稱為「畫面」。舉例來說,應用程式可能會有主畫面、清單畫面和作品詳細資料畫面。這個術語意味著每個活動都會填滿裝置螢幕。
不過,如果裝置螢幕夠大,可支援展開寬度視窗大小類別,則可同時在螢幕上顯示多個活動畫面。窗格是更精確的術語,用於描述個別活動的內容顯示。
視窗大小類別可讓您判斷要在多窗格版面配置中顯示多少內容窗格,如 Material Design 所述。
窗格可供瀏覽。在精簡和中等視窗大小類別中,應用程式會顯示單一窗格,因此前往任何目的地都會顯示一個窗格。
在展開視窗大小類別中,應用程式可以在多個窗格中顯示相關內容,例如清單詳細資料版面配置。導覽至任一窗格都會顯示雙窗格版面配置。如果視窗大小變更為精簡或中等,自動調整應用程式只會顯示一個窗格,也就是導覽目的地,可以是清單或詳細資料。
|
|
|
Compose Material 3 Adaptive
Jetpack Compose 是建構自動調整式應用程式的新型宣告式方法,可避免重複和維護多個版面配置檔案的負擔。
Compose Material 3 Adaptive 程式庫包含可組合函式,可管理視窗大小類別、導覽元件、多窗格版面配置、摺疊式裝置姿勢和轉軸位置,例如:
NavigationSuiteScaffold:根據應用程式視窗大小類別和裝置狀態,自動切換導覽列和導覽邊欄。ListDetailPaneScaffold:實作清單詳細資料標準版面配置。根據應用程式視窗大小調整版面配置。在展開視窗大小類別中,並排顯示清單和清單項目詳細資料,但在精簡和中等視窗大小類別中,只顯示清單或詳細資料。
SupportingPaneScaffold:實作輔助窗格標準版面配置。在展開的視窗大小類別中,顯示主要內容窗格和輔助窗格,但在精簡和中等視窗大小類別中,只顯示主要內容窗格。
Compose Material 3 Adaptive 程式庫是開發自動調整應用程式的重要依附元件。
設定和連貫性
自動調整型應用程式在設定變更期間會保持連續性。
當應用程式視窗大小、摺疊式裝置的摺疊狀態、螢幕密度或字型變更時,就會發生設定變更。
根據預設,設定變更會重新建立應用程式活動,並遺失所有活動狀態。為維持連續性,自動調整式應用程式會將狀態儲存在活動的 onSaveInstanceState() 方法或 ViewModel 中。
防護機制
自動調整式應用程式會因應摺疊式裝置的型態變化。型態包括桌面和書本型態。
Jetpack WindowManager 的 WindowInfoTracker 介面可讓您取得裝置的 DisplayFeature 物件清單。其中一項螢幕功能是 FoldingFeature.State,可指出裝置是完全展開還是半開。
Compose Material 3 Adaptive 程式庫提供 currentWindowAdaptiveInfo() 頂層函式,可傳回包含 windowPosture 的 WindowAdaptiveInfo 執行個體。
觸控以外的輸入方式
使用者通常會將外接鍵盤、觸控板、滑鼠和觸控筆連接至大螢幕裝置。周邊裝置可提升使用者工作效率、輸入精確度、個人表達能力和無障礙體驗。大部分 ChromeOS 裝置 都內建鍵盤和觸控板
自動調整式應用程式支援外部輸入裝置,但 Android 架構會為您完成大部分工作:
Jetpack Compose 1.7 以上版本:預設支援鍵盤 Tab 鍵瀏覽,以及滑鼠或觸控板點選、選取和捲動。
Jetpack
androidx.compose.material3程式庫:讓使用者能以觸控筆在任何TextField元件中書寫。鍵盤快速鍵協助工具:讓使用者能找到 Android 平台和應用程式鍵盤快速鍵。覆寫
onProvideKeyboardShortcuts()視窗回呼,在鍵盤快速鍵協助工具中發布應用程式的鍵盤快速鍵。
為完整支援各種大小的板型規格,自動調整應用程式支援所有類型的輸入。
如何測試自動調整式應用程式
測試不同的螢幕和視窗大小,以及不同的裝置設定。使用主機端螢幕截圖和 Compose 預覽畫面,檢查應用程式版面配置。在 Android Studio 模擬器和 Google 資料中心代管的遠端 Android 裝置上執行應用程式。
大螢幕應用程式品質指南
大螢幕應用程式品質指南可協助您確認自動調整應用程式在平板電腦、折疊式裝置和 ChromeOS 裝置上是否能正常運作。指南包含測試,可讓您驗證關鍵使用者歷程的應用程式功能。雖然指南著重於大螢幕,但適用於所有螢幕尺寸。
多重配置
Compose 1.7 以上版本的 DeviceConfigurationOverride 介面可讓您覆寫裝置設定的各個層面。這個 API 會以本地化的方式模擬不同的裝置設定,適用於您要測試的任何可組合內容。舉例來說,您可以在單一裝置或模擬器上,單次執行測試套件,測試多個任意 UI 大小。
使用 DeviceConfigurationOverride.then() 擴充功能函式,您可以同時測試多個設定參數,例如字型大小、語言代碼、主題和版面配置大小。
主機端螢幕截圖
主機端螢幕截圖測試可快速且可擴充地驗證應用程式版面配置的視覺外觀。使用主機端螢幕截圖,測試各種螢幕大小的使用者介面。
詳情請參閱「Compose 預覽螢幕截圖測試」。
Compose 預覽
Compose 預覽功能可讓您在 Android Studio 的設計檢視畫面中查看應用程式 UI。預覽畫面會使用 @PreviewScreenSizes、@PreviewFontScale 和 @PreviewLightDark 等註解,讓您查看各種設定的可組合項內容。甚至還能與預覽畫面互動。
Android Studio 也會在預覽畫面中醒目顯示常見的可用性問題,例如按鈕或文字欄位過寬。
詳情請參閱「使用可組合項預覽功能預覽 UI」。
Android Emulator
Android Studio 提供多種模擬器,可用於測試不同版面配置大小:
- 可調整大小的模擬器:模擬手機、平板電腦或摺疊式裝置,並可即時切換
- Pixel Fold 模擬器:模擬 Pixel Fold 大螢幕摺疊式手機
- Pixel Tablet 模擬器:模擬 Pixel Tablet 大螢幕裝置
- 電腦模擬器:可測試任意形式視窗、滑鼠懸停和鍵盤快速鍵
遠端裝置串流
安全連線至 Google 資料中心代管的遠端 Android 裝置,並在最新的 Pixel 和 Samsung 裝置上執行應用程式。您可以安裝應用程式及進行偵錯、執行 ADB 指令,以及旋轉和摺疊裝置,確認應用程式在各種實體裝置上都能正常運作。
遠端裝置串流功能已整合至 Android Studio。詳情請參閱「Android 裝置串流 (採用 Firebase 技術)」。
其他資源
- I/O 大會簡報:建構自動調整 Android 應用程式