建構自動調整式應用程式

包括平板電腦在內，超過 3 億台 Android 大螢幕裝置， 現今的折疊式裝置、ChromeOS 裝置、汽車螢幕、電視，以及更多 持續更新中為了讓使用者體驗快速增加，而提供最佳使用者體驗 和多樣化的大螢幕裝置 以及標準手機，請使用 自動調整應用程式。

什麼是自動調整應用程式？

自動調整型應用程式會根據應用程式顯示畫面的變更，調整版面配置，主要是 變更應用程式視窗大小但自動調整式應用程式也能 折疊式裝置型態的變化，例如桌面或書本型態 以及螢幕密度和字型大小的變更

與其為了回應不同的 視窗大小，自動調整式應用程式會取代版面配置元件，並顯示或隱藏內容。 舉例來說，在標準手機上，自動調整應用程式可能會顯示底部 但大型螢幕上則是導覽邊欄在大螢幕上 自動調整式應用程式會顯示更多內容，例如雙窗格、清單/詳細資料版面配置。為 小螢幕，內容較少。清單或詳細資料都可以。

圖 1. 自動調整應用程式可根據不同視窗大小將版面配置最佳化。

在快速淡出、以手機為主軸的時代，應用程式是以全螢幕模式放送。應用程式目前只在 多視窗模式支援任意大小的視窗，不受裝置螢幕影響 大小使用者隨時可以變更視窗大小。甚至在單一裝置上 因此應用程式必須能自動調整

自動調整應用程式在任何設定下都能提供良好外觀和效果。

為什麼要建構自動調整式 UI？

使用者希望您的應用程式能在所有裝置上正常運作，並提供 強化大螢幕體驗使用者在多視窗模式下進行多工處理 提升應用程式體驗並提升工作效率

在標準手機上，僅執行單一工作的應用程式會錯失持續擴大的使用者 擁有多元的可能性

Google Play

Google Play 提供專為平板電腦和摺疊式裝置設計的應用程式系列。 從而推薦優質應用程式。

Google Play 會根據未針對大螢幕提高效能而最佳化的應用程式和遊戲，排名 應用程式。排名是根據大螢幕應用程式品質指南而定。較高 排名第一，讓多裝置使用者能看見 並在手機上顯示專屬的評分和評論。

不符合 Play 商店大螢幕品質標準的應用程式會顯示 警告。這則警告可以提醒使用者，應用程式可能會 無法在大螢幕裝置上順暢運作。

圖 2. 應用程式詳細資料頁面上的技術品質警告。

打造自動調整式應用程式，藉此提高應用程式在 Google Play 的曝光度，並盡可能 可下載您應用程式的裝置數。

如何開始

從規劃到開發應用程式的所有階段，都要考慮自動調整式設計 可能面臨擴充性、監控、持續整合 和部署等方面的挑戰讓平面設計師瞭解自動調整式設計。將應用程式設計為 您可以建構靈活且易於管理、可擴充的應用程式 ，適用於日後的板型規格和視窗模式

如要建立支援所有螢幕尺寸和設定的自動調整式應用程式，請按照下列步驟操作： 包括：

  • 使用視窗大小類別決定版面配置
  • 使用 Compose Material 3 自動調整程式庫進行建構
  • 支援觸控以外的輸入方式
  • 在所有裝置類型上進行測試

視窗大小類別

應用程式視窗尺寸可能因不同裝置或相同裝置而異 在摺疊式裝置上移動時 — 即使是全螢幕應用程式也一樣。 不同的裝置螢幕方向會產生不同的顯示比例。於 多視窗模式、應用程式視窗大小、顯示比例和方向， 或是裝置畫面不同。

自動調整式應用程式能簡化及統整判斷及管理的問題 將視窗大小、顯示比例和方向納入考量 ，這也適用於應用程式視窗為全螢幕時的情況。

視窗大小類別會將應用程式視窗歸類為「精簡」、「中等」或 展開：根據視窗寬度或高度。

插圖：精簡、中等和展開寬度視窗大小類別。
圖 3. 根據螢幕寬度的視窗大小類別。
，瞭解如何調查及移除這項存取權。

使用WindowSizeClass Compose 的 currentWindowAdaptiveInfo() 頂層函式 Material 3 自動調整程式庫。這個函式會傳回 WindowAdaptiveInfo，其中包含 windowSizeClass。您的應用程式 每當視窗大小類別變更時，便會接收更新：

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

內容窗格

活動的版面配置有時也稱為「畫面」。舉例來說， 應用程式可能會有主畫面、清單畫面和項目詳細資料畫面。 術語是指每項活動都會填滿裝置螢幕。

但會在裝置螢幕大到足以支援展開寬度的情況下 視窗大小類別，可同時顯示多個活動畫面。 「Pane」是顯示個別活動內容時的精確術語。

視窗大小類別可讓您決定內容窗格的數量 多窗格版面配置，如 Material Design 中所述。

裝置畫面分成多個窗格：精簡和中等視窗大小類別中一個窗格，在展開的視窗大小類別中，有兩個窗格。
圖 4. 每個視窗大小類別的內容窗格數量。

窗格可供瀏覽。在精簡和中等視窗大小類別中，應用程式會顯示 單一窗格；因此，導覽至任何目的地都會顯示一個窗格。

在展開的視窗大小類別中，應用程式能以多種方式顯示相關內容 窗格，例如清單/詳細資料版面配置。前往任一窗格的檢視畫面 建立雙窗格版面配置如果視窗大小變更為精簡或中等 自動調整式應用程式只會顯示一個窗格，也就是導覽目的地，即清單或 細節

，瞭解如何調查及移除這項存取權。
圖 5.使用清單窗格做為導覽目標的清單/詳細資料版面配置。
，瞭解如何調查及移除這項存取權。
圖 6.使用詳細資料窗格做為導覽目標的清單/詳細資料版面配置。

Compose Material 3 自動調整式

Jetpack Compose 是建構自動調整式應用程式的新型宣告式方法。 而無須複製和維護多個版面配置檔案。

Compose Material 3 自動調整式程式庫包含能管理元件的可組合項 視窗大小類別、導覽元件、多窗格版面配置，以及 摺疊式裝置型態和轉軸位置，例如：

Compose Material 3 自動調整式程式庫是以下項目的依附元件： 如何開發自動調整式應用程式

設定和連貫性

在設定變更期間，自動調整式應用程式會保留連續性。

調整應用程式視窗大小時，其型態就會發生設定變更 摺疊式裝置的變化，或是螢幕密度或字型變更。

根據預設，設定變更會重新建立應用程式活動和所有活動 都會遺失為了維持連續性，自動調整式應用程式會將狀態儲存在 活動的 onSaveInstanceState() 方法或 ViewModel 中。

防護機制

自動調整式應用程式能因應摺疊式裝置型態的變化。防護機制 包括桌面和書本型態

圖 7.桌面型態的摺疊式裝置。

Jetpack WindowManager 的 WindowInfoTracker 介面可讓您： 取得裝置的 DisplayFeature 物件清單。多元體驗 功能為 FoldingFeature.State，可指出裝置是否 完全打開或半開

Compose Material 3 自動調整式程式庫提供 currentWindowAdaptiveInfo() 頂層函式，系統會傳回 包含 windowPosture 的 WindowAdaptiveInfo 執行個體。

觸控以外的輸入方式

使用者通常會將外接鍵盤、觸控板、滑鼠和觸控筆連接至大型螢幕 螢幕裝置。週邊裝置能提升使用者工作效率、輸入精確度 個人表達和無障礙設計大多數 ChromeOS 裝置都隨附 鍵盤和觸控板。

自動調整式應用程式支援外部輸入裝置，但大部分的工作都是 Android 架構的設計原則

  • Jetpack Compose 1.7 以上版本：鍵盤分頁導覽和滑鼠或 根據預設，系統支援觸控板點擊、選取和捲動功能。

  • Jetpack androidx.compose.material3 程式庫：允許使用者編寫 以觸控筆剪輯任一 TextField 元件

  • 鍵盤快速鍵協助工具：建立 Android 平台和應用程式鍵盤 方便使用者找到這些捷徑在以下位置發布應用程式的鍵盤快速鍵： 使用鍵盤快速鍵輔助功能， onProvideKeyboardShortcuts() 視窗回呼。

為了完整支援所有大小的板型規格，自動調整應用程式支援所有 。

如何測試自動調整式應用程式

測試不同的螢幕大小和視窗大小和不同的裝置設定。 使用主機端螢幕截圖和 Compose 預覽功能檢查應用程式版面配置。 在 Android Studio 模擬器和託管的遠端 Android 裝置上執行應用程式 Google 資料中心。

大螢幕應用程式品質指南

大螢幕應用程式品質指南，可確保自動調整式應用程式正常運作 在平板電腦、折疊式裝置和 ChromeOS 裝置上運作指南中涵蓋了 可讓您針對關鍵使用者歷程驗證應用程式功能。雖然 這些規範適合大螢幕，因此與所有螢幕大小都相容。

多重設定

Compose 1.7 以上版本中的 DeviceConfigurationOverride 介面 可讓您覆寫裝置設定的各個層面。API 以本地化的方式模擬各種裝置設定 要測試的可組合內容舉例來說，您可以測試多個項目 在單一裝置上執行測試套件的單一執行時，提供任意 UI 大小；或 模擬器。

DeviceConfigurationOverride.then() 擴充功能函式可讓您 測試多個設定參數，例如字型大小、語言代碼、主題和 版面配置大小不一。

主機端螢幕截圖

主機端螢幕截圖測試是快速且可擴充的圖表驗證方式 以及應用程式版面配置的外觀使用主機端螢幕截圖測試您的使用者介面 多種顯示大小

詳情請參閱「Compose 預覽版螢幕截圖測試」。

Compose 預覽

Compose 預覽可讓您在 Android 的設計檢視畫面中查看應用程式的 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 技術)」。

其他資源