建構自動調整式應用程式

目前有超過 3 億部 Android 大螢幕裝置 (包括平板電腦、折疊式裝置、ChromeOS 裝置、車用螢幕和電視) 正在使用中,而且數量持續增加。為了在數量與多樣化的大螢幕裝置和標準手機上的自動調整式應用程式上,提供最佳的使用者體驗。

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

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

自動調整式應用程式會取代版面配置元件,並顯示或隱藏內容,而非只針對不同視窗大小而延展或縮小 UI 元素。舉例來說,在標準手機上,自動調整應用程式可能會顯示底部導覽列,但在大螢幕上則顯示導覽邊欄。在大型螢幕上,自適應應用程式會顯示更多內容,例如雙窗格、清單/詳細資料版面配置;在小螢幕上,則會顯示較少的內容,例如清單或詳細資料。

圖 1. 自動調整式應用程式會針對不同視窗大小最佳化版面配置。

在過去以手機為中心的快速消失時代,應用程式會以全螢幕模式執行。目前,應用程式會在多視窗模式中以任意大小的視窗執行,不受裝置螢幕大小影響。使用者隨時可以變更視窗大小。因此,即使是單一裝置類型,應用程式也必須能自動調整。

只要裝置設定如何,都能在任何裝置上完美呈現並順利運作。

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

使用者希望應用程式能在所有裝置上完美運作,並在大螢幕上提供更強大的功能。使用者可在多視窗模式下進行多工處理,提供更優質的應用程式體驗並提高工作效率。

在標準手機上,如果應用程式只能執行單一工作,就會錯失不斷擴大的使用者群,無法提供多元服務。

Google Play

Google Play 提供平板電腦和折疊式裝置專用的應用程式精選和推薦內容,方便使用者發掘優質應用程式。

Play 會將針對大螢幕最佳化的應用程式和遊戲排在未經最佳化的應用程式之前。排名依據為大螢幕應用程式品質指南。透過讓多裝置使用者在手機上看到專屬於大螢幕的評分和評論,提高排名,進而提升曝光度。

不符合 Play 商店大螢幕品質標準的應用程式,會在應用程式詳細資料頁面上顯示警告。警告會提醒使用者,應用程式可能無法在大螢幕裝置上提供良好的效能。

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

建構自適應應用程式,擴大在 Google Play 上的曝光度,並盡可能增加可下載應用程式的裝置數量。

如何開始

從規劃到部署,每個應用程式開發階段都要考慮自動調整式設計。讓平面設計師瞭解自動調整式設計。設計自動調整型應用程式,您就能建構可管理、可擴充,且可支援日後板型規格和視窗模式的應用程式。

如要建立支援所有螢幕尺寸和設定的自動調整式應用程式,請執行下列操作:

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

視窗大小類別

即使應用程式處於全螢幕模式,應用程式視窗的尺寸在不同裝置上 (或在摺疊式裝置的情況下,在同一裝置上) 也可能不同。不同的裝置螢幕方向會產生不同的顯示比例。在多視窗模式下,應用程式視窗大小、顯示比例和方向可能與裝置螢幕不同。

自動調整式應用程式會在算繪版面配置時只考量應用程式視窗,藉此簡化並概略化判定及管理視窗大小、顯示比例和方向的問題,這項做法也適用於應用程式視窗全螢幕顯示的情況。

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

精簡、中等和展開寬度的視窗大小類別示意圖。
圖 3. 根據螢幕寬度的視窗大小類別。

使用 Compose 質感設計 3 自動調整程式庫currentWindowAdaptiveInfo() 頂層函式,計算應用程式的 WindowSizeClass。該函式會傳回 WindowAdaptiveInfo 的例項,其中包含 windowSizeClass。每當視窗大小類別變更時,應用程式就會收到更新:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

內容窗格

活動的版面配置有時也稱為「畫面」。舉例來說,您的應用程式可能會有主畫面、清單畫面和商品詳細資料畫面。這個術語暗示每個活動都會填滿裝置螢幕。

不過,在裝置螢幕大到支援展開寬度視窗大小類別的情況下,多個活動畫面可以同時顯示在螢幕上。窗格是更精確的術語,用於表示個別活動的內容顯示畫面。

視窗大小類別可讓您決定在多窗格版面配置中顯示多少個內容窗格,如 Material Design 所述。

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

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

在展開的視窗大小類別中,應用程式可以在多個窗格中顯示相關內容,例如清單詳細資料版面配置。導覽至任一窗格時,系統會顯示兩個窗格的版面配置。如果視窗大小變更為精簡或中等,自適應應用程式只會顯示一個窗格,即導覽目的地 (清單或詳細資料)。

圖 5. 清單/詳細資料版面配置,其中清單窗格是導覽目標。
圖 6.使用詳細資料窗格做為導覽目標的清單/詳細資料版面配置。

Compose Material 3 Adaptive

Jetpack Compose 是一種新型的宣告式方法,可用於建構自動調整應用程式,而不會產生多個版面配置檔案的複製和維護負擔。

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

Compose Material 3 Adaptive 程式庫是開發自適應應用程式時的必備依附元件。

設定和連貫性

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

調整應用程式視窗大小、折疊式裝置型態、螢幕密度或字型變更時,就會發生設定變更。

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

防護機制

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

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

Jetpack WindowManager 的 WindowInfoTracker 介面可讓您取得裝置的 DisplayFeature 物件清單。顯示功能中包含 FoldingFeature.State,用於指出裝置是完全開啟或半開啟。

Compose Material 3 自動調整式程式庫提供 currentWindowAdaptiveInfo() 頂層函式,該函式會傳回包含 windowPostureWindowAdaptiveInfo 例項。

除了觸控以外的輸入方式

使用者經常會將外接鍵盤、觸控板、滑鼠和觸控筆連接至大螢幕裝置。這些外接裝置可提升使用者工作效率、輸入精確度、個人表達方式和無障礙功能。大多數 ChromeOS 裝置都內建鍵盤和觸控板。

自適應應用程式支援外部輸入裝置,但 Android 架構會為您完成大部分工作:

  • Jetpack Compose 1.7 以上版本:預設支援鍵盤分頁導覽,以及滑鼠或觸控板點選、選取和捲動功能。

  • Jetpack androidx.compose.material3 程式庫:讓使用者可使用觸控筆在任何 TextField 元件中書寫。

  • 鍵盤快速鍵輔助工具:讓使用者可以找到 Android 平台和應用程式的鍵盤快速鍵。覆寫 onProvideKeyboardShortcuts() 視窗回呼,在鍵盤快速鍵輔助工具中發布應用程式的鍵盤快速鍵。

為了全面支援所有大小的板型規格,自動調整式應用程式會支援所有類型的輸入內容。

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

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

大螢幕應用程式品質指南

大螢幕應用程式品質指南可確保您的自動調整式應用程式在大螢幕平板電腦、摺疊式裝置和 ChromeOS 裝置上順利運作。這類指南包含測試,可讓您針對關鍵使用者旅程驗證應用程式功能。雖然規範著重於大螢幕,但也適用於所有螢幕尺寸。

多個設定

Compose 1.7 以上版本中的 DeviceConfigurationOverride 介面可讓您覆寫裝置設定的各個層面。針對您要測試的任何可組合內容,API 會以本地化方式模擬不同的裝置設定。舉例來說,您可以在單一裝置或模擬器的單次測試中,測試多個任意 UI 大小。

您可以使用 DeviceConfigurationOverride.then() 擴充功能,同時測試多個設定參數,例如字型大小、語言代碼、主題和版面配置大小。

主機端螢幕截圖

主機端螢幕截圖測試是一種快速且可擴充的方式,可用於驗證應用程式版面配置的視覺外觀。使用主機端螢幕截圖,測試各種顯示大小的 UI。

詳情請參閱「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。詳情請參閱「由 Firebase 提供支援的 Android 裝置串流」。

其他資源