進一步瞭解折疊式裝置

折疊式裝置為創新應用程式開發提供了新的機會。一台裝置上同時有大小兩個螢幕,可以提供彼此互補但各自獨立的互動體驗。桌面型態或書本型態等折疊功能,可以帶來充滿想像力的版面配置,形成跳脫傳統框架使用者介面。

圖 1. 可折疊的裝置有多個型態,包括折疊式、平鋪式、平鋪旋轉至橫向螢幕式、半平鋪式 (桌面型態)。

回應式/自動調整設計

如果想支援折疊式裝置,就要先從回應式設計開始。回應式設計可讓應用程式在多種螢幕大小上,都相當美觀,且可正常使用,包括折疊式裝置在折疊前後的兩種螢幕大小。如果想製作以檢視畫面為基礎的版面配置,請用 ConstraintLayout 實作回應式設計;若是 Compose,則請用 BoxWithConstraints

有的時候,版面配置也需要自動調整。某些裝置在折疊前後有非常顯著的螢幕大小和長寬比差異,這種情況下,回應式設計也無法用最佳方式按照這兩種螢幕調整大小。自動調整設計可以針對不同螢幕大小和設定建立不同的最佳化版面配置。不管是折疊式裝置折疊前後,或是直向和橫向,又或者是桌面型態或書本型態,自動調整版面配置都可以提供最佳化的使用者體驗。

舉例來說,如果一台有大型螢幕的折疊式裝置在折疊前採用橫向方式 (如平板電腦),那麼採用兩個窗格的版面配置搭配導覽邊欄,便可徹底發揮寬螢幕的優勢。如果裝置在折疊後和標準手機相似,此時採用單一欄版面配置搭配底部的導覽列,就能提供簡潔而有效的體驗。由於版面配置是各自獨立的,因此您可以針對各個不同用途最佳化各版面配置的設定。

折疊式裝置往內折疊和往外展開的動畫。
圖 2. 針對折疊前後的螢幕進行最佳化的自動調整版面配置。

折疊式裝置的折疊方式有很多種,如往內折疊 (將螢幕往裝置內部折疊) 或往外折疊 (用螢幕包住裝置)。回應式/自動調整設計讓應用程式得以支援各種折疊式裝置的板型規格。

若想進一步瞭解適合折疊式裝置的回應式/自動調整設定,請參閱:

折疊狀態與型態

折疊式裝置的折疊位置會將螢幕分割為兩個區塊。折疊位置可能是螢幕的彈性區域,如果是雙螢幕裝置,則是從轉軸分成兩個螢幕。

折疊位置具有維度,而且能夠使用 occlusionType 定義折疊後是否會遮蔽部分螢幕。在雙螢幕裝置上,occlusionTypeFULL,即使應用程式展開到兩個螢幕上,折疊位置 (轉軸) 區域依然無法看到任何內容。

折疊式裝置可能處於各種不同的折疊狀態,如 FLAT (完全展開) 或 HALF_OPENED (介於完整展開和完全關閉之間)。

圖 3. 平鋪式和半平鋪式狀態的折疊式裝置。

如果有裝置處於 HALF_OPENED 狀態,則根據折疊方向,該裝置可能有兩種型態:桌面型態 (水平折疊) 或書本型態 (垂直折疊)。

桌面和書本型態都可以提供全新的版面配置,但是 HALF_OPENED 裝置狀態也代表需要遵守某些限制。舉例來說,使用者可能難以操作折疊位置附近的 UI 控制項,而位於折疊位置的文字也可能非常難以閱讀 (如果 occlusionTypeFULL,則完全無法閱讀)。

請按照情況設計版面配置,以便使用者在所有裝置狀態下都可以存取 UI 元素。調整對話方塊和彈出式選單的位置,以免和折疊位置重疊。確認當裝置有部分摺疊起來的時候,依然可以看到重要內容。當裝置處於 HALF_OPENED 時,將內容分割成兩塊區域,如果是桌面型態就是上下兩塊,如果是書本型態則是左右兩塊。

若想進一步瞭解折疊位置和折疊式裝置型態,請參閱「讓應用程式適用折疊式裝置」。

應用程式連續性

裝置在折疊或展開時,應用程式會在內容從一個螢幕移動到另一個螢幕時停止運作,然後重新啟動。為了維持使用者的連續性,應用程式在針對折疊前後的螢幕重新建立應用程式版面配置時,應該要儲存應用程式的狀態。舉例來說,應用程式應該:

  • 保留輸入欄位內輸入的文字
  • 還原鍵盤狀態
  • 還原捲動欄位的捲軸位置
  • 接續應用程式停止運作時的進度播放媒體

折疊式裝置的不同螢幕版面配置也應該要能夠彼此互補。舉例來說,如果折疊後的螢幕會顯示某網路商店產品的圖片和說明,那麼展開後的螢幕就應該維持連續性,並顯示同樣的圖片和說明,但另外顯示補充內容,例如產品規格或評論。

如果想進一步瞭解如何管理應用程式狀態和連續性,請參閱「儲存 UI 狀態」和「處理設定變更」。

多工處理

有大型螢幕的折疊式裝置會擁有平板電腦大小的螢幕,非常適合使用多視窗模式進行多工處理。折疊式裝置支援分割畫面模式,某些裝置更支援任意形式模式,在此模式下,應用程式會裝在可以移動並調整大小的視窗內,如同桌上型電腦的視窗系統。

圖 4. 橫向狀態的折疊式裝置,正在用分割畫面模式 (左方) 和任意形式模式 (右方) 執行三個應用程式。

Android 12 (API 級別 31) 以上版本會預設使用多視窗模式,若為大型螢幕,則無論應用程式設定為何一律使用多視窗模式。在之前到 Android 7.0 (API 級別 24) 之間的版本中,您必須設定應用程式為可以調整大小,才能支援多視窗模式。

若要進一步瞭解多視窗模式的多工處理,請參閱「多視窗模式支援」。

拖曳

有大型螢幕的折疊式裝置具有充足的螢幕空間,可供使用者以拖曳方式進行互動。折疊式裝置的多視窗模式可以讓使用者在應用程式之間拖曳項目。

拖曳互動功能可以提供有效率且互動良好的使用者體驗。利用 Android 的拖曳架構,為應用程式加入拖曳功能。詳情請參閱「拖曳」。

其他資源