iPhone Duo自適應版面教學

本講重點

• iPhone Duo 的鉸鏈與內外螢幕前置攝像頭，會改變不同狀態下可使用的螢幕空間；對應到畫面中的影響範圍稱為保留區域。
• 位移模式會依可用空間動態移動、縮放或重新配置既有元素，但要維持元素與其內容的視覺關聯。
• 可連續捲動的文章、文件、列表與 Feed 流通常不應位移，避免中斷捲動體驗。
• Arrangement 排列模式以多項版面輸入決定 primary view 與 secondary view 的呈現方式，可使用 split 或 overlay。
• 優先採用系統容器的原生適配；只有手動配置且優先級高的區域，才以 Reserved Region API 實作自訂位移邏輯。

「讓咱們的APP更好地適應iPhone Duo獨特的硬體特性」
— Izzy

iPhone Duo保留區域位移模式Arrangement排列模式Reserved RegionsDivision遮擋區域Arrangement View

概念整理：硬體特性與保留區域

iPhone Duo 的硬體特性不只是裝置外觀，而是會直接影響介面可用範圍。外螢幕的攝像頭在視覺上會持續存在，並會與系統狀態欄、APP 工具欄及 Tab 欄，在新的側邊安全區中縱向排列。內螢幕則需要因應中央折疊位置，以及處於啟用狀態的前置攝像頭來調整內容。

• 保留區域是硬體特性在螢幕上所對應的區域，會影響內容可見性、觸控空間與版面安排。
• 中央折疊位置屬於 Division 類型：它會將一個大區域切分為數個較小區域。
• 例如 FaceTime 攝像頭的位置屬於遮擋區域：它遮住局部範圍，但不負責分隔整體版面。
• 保留區域有啟用與非啟用兩種狀態。iPhone Duo 的折疊 Division 區域只會在開始折疊時啟用；未折疊時預設非啟用，寬度為 0。
• 即使 Division 尚未啟用，也可先在網格等版面中規劃其兩側欄數如何維持平衡。

概念整理：位移模式的判斷原則

位移模式是依可用空間變化，動態調整既有介面元素的呈現方式。目標不是單純把內容挪開，而是讓元素在裝置部分折疊後，仍位於能完成自身功能的可用區域，並持續維持可見、可用與易用。位移對象可以是單一控制項、容器，或更大範圍的版面組成。

• 單一空間若能表達完整、自洽的功能邏輯，例如按鈕，可讓它單獨位移。
• 多個空間若具有協同關係，例如內容與其操作選單，應共同位移以表達彼此關聯。
• 避免位移幅度過大。元素離原始位置太遠，會削弱它與內容之間的視覺關聯性。
• 位移方向與最終位置要看元素用途，也要配合使用者當下的裝置使用方式。
• 若有多個可作為目標的區域，優先選擇最能保留上下文關聯的位置。

相簿長按照片後出現的選單，是共同位移的例子。若折疊觸發版面調整，照片與其選單應一起移動，可由螢幕彎曲位置自然分隔；若只移動照片，照片與選單距離過遠，使用者便難以理解兩者的關係。

「如果多個空間，包括容器，它們存在一種協同的關係，那麼就讓它們共同位移，從而體現出它們的關聯性」
— Izzy

相反地，文章、文件、列表與 Feed 流等可連續捲動的內容，不會採用位移。這類內容的關鍵互動是不中斷地捲動瀏覽；若強行位移，反而會破壞連貫的捲動體驗。

概念整理：依姿態與上下文決定目標位置

Alert 等元素在部分折疊時通常會移到設備末端的一側，因為即使使用者繼續閉合設備，其位置仍能保持連貫。桌立姿態則以上半螢幕的內容可見性較好為前提，因此 Alert 會移至上方；下半螢幕較適合作為穩定的觸控表面，媒體控制等面向內容操作的元素通常移至下方。

備忘錄 App 的搜尋提供了上下文優先的範例。啟用中的搜尋框會吸附於鍵盤頂端；內螢幕完全展開時，搜尋框可利用水平空間置中顯示；部分折疊時，則改放到搜尋對象所在的那半邊螢幕，以維持搜尋行為與其結果的關聯。

• 確定目的地後，還要調整元素如何適應新位置：可能改變位置、尺寸、圓角半徑或邊距。
• 操作表單、Alert、菜單與彈出窗口屬於輕量級情境元件；它們可預設顯示於折疊位置的保留區域，折疊時系統會自動重新定位到保留區域周圍。
• 分屏視圖在折疊時可自動調整欄寬，例如讓兩欄五五開，以確保兩欄皆完整可見。
• 健身 APP 的卡片即使在部分折疊時也必須保有完整互動性，因此可增加折疊區域元素間距，讓左右內容各自完整留在自己的容器內。

概念整理：Reserved Region API

SwiftUI 可透過 GeometryReader，或 onGeometryChange 修飾符中的 GeometryProxy 查詢保留區域，並使用 GeometryProxy 的 Reserved Regions 方法取得視圖可用的保留區域。UIKit 則可使用 UIView 上的 Reserved Regions 方法，並讀取保留區域的 frame，將結果納入自訂版面計算。

• Reserved Regions 預設只回傳啟用中的區域。
• 若也要查詢非啟用區域，可使用 Reserved Regions 方法的 Include Inactive 選項。
• Division 類型適合處理中央折疊所造成的區域切分。
• 查詢遮擋區域時，可將對應類型傳入 Reserved Regions 方法；攝像頭處於活躍狀態時，其遮擋區域也會啟用。

概念整理：系統容器與排列模式

NavigationStack、NavigationSplitView 與 TabView 提供常見的導航設計模式，協助使用者在 APP 中有效導航；List 與 Scroll View 則可作為內容容器。介於導航容器與內容容器之間，還有一類會依特定規則決定兩個視圖關係的新型版面容器，稱為 Arrangement，也就是排列模式。

羅爽以播客 APP 的 Now Playing 為例：在 iPad 點選文字稿按鈕後，文字稿會出現在另一側，形成拆分版面。iPhone Duo 即使折疊後也可採相似拆分方式；再次隱藏文字稿時，播控視圖不會如 iPad 般回到中央，而是留在折疊區域左側，讓它容易觸達且不被遮擋。

• 排列模式的輸入可包括視圖的水平與垂直尺寸分類、視圖寬高比，以及是否存在啟用中的分隔區域。
• 排列模式的輸出可決定視圖是否顯示；若顯示，也決定其 frame。
• 當 iPhone Duo 旋轉為高度大於寬度時，播控視圖與文字稿不再採拆分，而會把文字稿內嵌於視圖。
• 在 iOS 27.1 中，可於自己的 app 使用系統提供的排列模式。

「這個將輸入轉換為輸出的函數，被稱為排列模式」
— 羅爽

概念整理：Arrangement View 的建立與 split

SwiftUI 中，可在 NavigationStack 內加入 arrangement view。它接收 primary view 與 secondary view；語音備忘錄的範例中，player view 用於顯示正在播放的語音備忘錄，up next view 用於顯示其後即將播放的待播列表。UIKit 則使用 UIArrangementViewController，將其加入 UINavigationController 作為 root view controller，再分別指定 player view controller 與 up next view controller 為 primary 和 secondary。

arrangementViewStyle 的預設值是 split。拆分排列會分配畫面區域給 primary view 與 secondary view：一般在寬度大於高度時水平拆分，例如 iPad 橫向或類似寬高比的 iPhone；旋轉後若高度大於寬度，則改為垂直排列。

若播放視圖只希望水平排列，可用 axis 函數指定 horizontal。當 arrangement view 無法依指定軸向排列時，只會顯示一個視圖；例如高度大於寬度、主軸為垂直，但又限定只能水平排列時，畫面只顯示 player view。UIKit 可用 updateArrangement 為 UIArrangementViewController 設定水平軸向。

概念整理：overlay 與樣式選擇

另一種 arrangementViewStyle 是 overlay。split 傾向將內容並排，overlay 則傾向將內容上下疊加。語音備忘錄範例將樣式改為 overlay、交換播放視圖與待播列表的位置，並為待播列表增加收攏樣式。裝置折疊時，overlay 會傾向讓兩個視圖並排，使待播列表獲得獨立展示空間。

使用 overlay 時，可查詢環境屬性 overlayArrangementZIndex。待播列表中的此值會隨裝置折疊或展開改變，因此可用來在收攏與展開樣式之間切換。UIKit 對應作法是呼叫 UIArrangementViewController 的 state(for:) 函數，再由回傳狀態的 zIndex 屬性查詢主視圖的 z 軸索引。

• 既有頁面若使用 HStack 或 VStack，可考慮 split。
• 既有頁面若使用 ZStack，可考慮 overlay。
• 若沒有既有版面模式可參考，且兩個視圖具有明顯前景與背景關係，適合考慮 overlay。
• 輔助閱讀器中，空間位於前景、可讀內容位於背景；因可在疊加層捲動內容，局部被遮擋可以接受，適合 overlay。
• 若兩個內容更像主視圖與詳情頁，例如播客播放與文字稿，且不應彼此遮擋，適合 split。

重要提醒

• Arrangement View 不提供 APP 的導航基礎架構，因此不要把 NavigationSplitView 等導航容器放入 Arrangement View。
• 不要把 Arrangement View 放入 List、Scroll View 等可捲動容器中，以免違反這類容器的使用特性。
• Arrangement View 能提供更多自適應排列選項，但並非所有情境都需要使用它。
• 若使用標準系統容器與呈現方式，系統已完成許多自適應工作；應先利用這些能力，再處理自訂版面。
• 對手動配置的版面，應先找出優先級最高的區域，再以 Reserved Region API 只在必要處實作自訂位移。

「首先審查你的App的居中佈局，考慮一下是否可以改成雙列佈局，或者是哪種位移模式最適合當前場景」
— 羅爽

課後複習

• 盤點 APP 中所有居中配置的畫面，判斷在 iPhone Duo 部分折疊時是否需改為雙列，或採用位移模式。
• 為每個會受鉸鏈、攝像頭或折疊影響的畫面，標示 Division 與遮擋區域，並檢查啟用與非啟用時的版面表現。
• 檢查元素與內容的關係：具有協同關係的控制項、容器與內容要共同位移；文章、文件、列表與 Feed 流則維持連續捲動。
• 以 SwiftUI 的 GeometryProxy 或 UIKit 的 UIView Reserved Regions 方法，實作並測試必要的保留區域查詢。
• 針對兩個視圖的頁面，判斷應使用 split 或 overlay；分別檢查橫向、直向、展開、部分折疊與桌立姿態。
• 確認沒有將 NavigationSplitView 放進 Arrangement View，也沒有將 Arrangement View 放進 List 或 Scroll View。
• 優先改用標準系統容器與呈現方式；僅針對高優先級且手動配置的區域，補上自訂位移邏輯。