iPhone Duo App 自適應佈局教學

本講重點

以 Xcode 27.1 建構並透過 iPhone Duo 模擬器與 Device Hub 測試，才能取得完整的全螢幕體驗。
iOS 26、iOS 27.0 與 iOS 27.1 SDK 建構的 App，在 iPhone Duo 內屏上的可用顯示範圍不同；越新的 SDK 能更完整延伸內容至螢幕邊緣。
佈局判斷應以尺寸類為主，不應依賴 userInterfaceIdiom、介面方向或 Main Screen。
優先使用系統導航、工具欄、Tab 欄、Sheet 等標準元件，讓系統自動因應內外屏與不同姿態。
互動式前景內容必須待在安全區內；背景可延伸至安全區外，但必須處理不對稱的安全區與 Layout Margin。
複雜自訂 UI 可使用 iOS 27.1 的 Reserved Region 與 UIViewReservedRegion；也可嘗試 Xcode 27.1 的 App Resizability Skill。

「你之前為iPhoneApp尺寸自適應所做的所有的工作，現在都可以發揮作用。」
— 羅爽

概念整理：從 SDK 與模擬器開始

若 App 仍以 iOS 26 系列 SDK 建構，仍可在 iPhone Duo 執行：裝置合攏時，App 會使用狀態欄與攝像頭左側的螢幕空間；展開後，內屏會以熟悉的尺寸與寬高比呈現，左右會留下黑邊。

1:18iOS 27.0 SDK 建構的 App 在 iPhone Duo 內屏上，顯示區域可延伸至狀態欄左側；既有的 iPhone 尺寸自適應設計能在此基礎上延續使用。

以 iOS 27.0 SDK 建構後，內屏顯示區域會延伸到狀態欄區域左側。以 iOS 27.1 SDK 建構後，顯示區域更可延伸到螢幕邊緣，標準導航按鈕與工具欄按鈕也會在狀態欄下方垂直排列。

1:45要檢驗 iPhone Duo 的完整全螢幕呈現，應在 Xcode 27.1 選擇 iPhone Duo 模擬器，並從 Device Hub 執行 App。

下載 Xcode 27.1，選擇 iPhone Duo 模擬器，並在 Device Hub 執行 App。
利用螢幕底部的控制按鈕，分別測試展開、合攏、旋轉與折疊狀態。
不要只確認能否啟動；必須逐一檢查 App 在各種裝置姿態下的實際佈局。

概念整理：以尺寸類取代裝置與方向判斷

iPhone App 原本就必須適應不同螢幕尺寸、螢幕形狀與靈動島等特殊區域。iPhone Duo 延續這個方向，新增不同螢幕形狀與攝像頭位置；此外，iOS 27 使用者也能透過 Mac 上的 iPhone 鏡像，將 App 調整到前所未有的顯示尺寸。這些情境都說明：App 應面對可變空間，而不是假設固定裝置尺寸。

2:39iPhone Duo 在展開與合攏時會調整 App 尺寸，原理與 App 面對其他可變顯示尺寸相同；重點是讓佈局能跨越不同尺寸分類。

優秀的自適應佈局不根據 userInterfaceIdiom 判斷螢幕尺寸，而是用尺寸類區分較小與較大空間的布局策略。
尺寸類分為水平與垂直方向：SwiftUI 從 Environment 取得，UIKit 從 traitCollection 取得。
外屏直向為水平 Compact、垂直 Regular，與一般 iPhone 類似。
外屏橫向為水平 Compact、垂直 Compact，這是需要特別留意的組合。
內屏空間較大，水平與垂直皆為 Regular，因此可以容納側邊欄等更多內容。

4:06外屏直向的尺寸類為水平 Compact、垂直 Regular；設計時應以這類可用空間特徵，而非裝置名稱，決定介面配置。

「那優秀的App佈局可以自適應各種設備，它們不會根據userInterfaceIdiom來判斷螢幕尺寸，而是使用尺寸類等機制。」
— 羅爽

外屏會遵循 App 已宣告支援的介面方向，這也是補上橫向支援的好時機，因為使用者可能把手機以帳篷形態放置。相對地，內屏不會遵循已宣告支援的介面方向，因此不能透過檢查介面方向來決定佈局，應改用尺寸類。

5:17在多螢幕情境下，Main Screen 與 Main Scene 的意義可能產生歧義；應從目前介面所屬的 Environment、traitCollection 或 Scene 邊界取得佈局資訊。

避免在程式碼直接引用 Main Screen：現在有兩塊螢幕，Main Scene 存在歧義，而且該 API 未來將被棄用。
優先使用與目前介面上下文相關的 Environment、traitCollection 或 Scene 的邊界。
若確實需要存取 Screen，應透過 windowScene 取得。
需要讓 UI 貼合螢幕圓角時，SwiftUI 使用 ConcentricRectangle，UIKit 使用 UICornerConfiguration；這些同心圓角 API 已更新以適配 iPhone Duo 螢幕形狀。

5:35若必須取得螢幕資訊，請透過 windowScene 存取，避免直接依賴 Main Screen。

5:48使用 iOS 26 引入並已更新的同心圓角 API，可讓 SwiftUI 的 ConcentricRectangle 或 UIKit 的 UICornerConfiguration 配合 iPhone Duo 螢幕圓角。

iPhone Duo 仍遵循 UIRequiresFullScreen。即使使用者展開或合攏裝置，App 仍會調整大小；系統會依照 App 宣告的介面方向渲染全螢幕 App，但 App 在內屏上會等比縮放，分屏多任務模式也是如此。

概念整理：採用系統標準導航元件

面對 iPhone Duo 的不同姿態，最穩定的做法是採用系統標準導航模式。SwiftUI 的 Navigation Split View 與 UIKit 的 UI Split View Controller 已具備完整自適應能力：合攏時，多欄會折疊成單一導航棧；展開時，多欄可並排，也可讓側邊欄覆蓋在詳情頁上方。

6:22內屏提供較大的 Regular 空間，可使用側邊欄等多欄內容；採用系統標準導航模式可讓多欄與單欄在合攏、展開間自動切換。

6:47SwiftUI 的 Navigation Split View 與 UIKit 的 UI Split View Controller 會隨 iPhone Duo 姿態自適應：合攏時折疊為單一導航棧，展開時則可並排顯示多欄。

SwiftUI 的 Tab View 與 UIKit 的 UITabBarController 同樣會自適應所有裝置姿態。
預設 Tab 欄會在內屏與外屏顯示，並會在適當時機改採垂直排列。
內屏可改用側邊欄提供更豐富的導航：SwiftUI 將 Default Tab Bar Placement 設為 Side Bar；UIKit 將 Preferred Placement 設為 Side Bar。
Sheet 可自適應：外屏中的按鈕可垂直排列，內屏則居中顯示；Popover、Context Menu 與 Alert 等系統彈出視圖也會自動適配。

重要提醒：安全區與不對稱邊距

導航欄、工具欄與 Tab 欄會佈局在安全區外，並自動避開狀態欄、攝像頭等系統 UI 與硬體區域。水平欄項會保留頂部與底部內邊距，垂直欄項則保留首部與尾部內邊距。開發者應把可互動的前景元素放在安全區內，讓背景圖片等視覺元素鋪滿可用空間並可延伸到工具欄或側邊欄背後。

8:26系統導航欄、工具欄與 Tab 欄會位於安全區外，並自動避讓狀態欄、攝像頭與其他系統 UI；互動內容仍須放在安全區內。

8:36水平與垂直排列的欄項會採用不同方向的內邊距，以避開系統 UI 與硬體區域並維持可操作性。

SwiftUI 的內容預設位於安全區內；若需讓背景延伸，可使用 ignoresSafeArea。
UIKit 手動佈局時，請參考視圖的 safeAreaInsets；或以 Auto Layout 將視圖約束到安全區佈局指南。
UIKit 的背景可直接使用視圖的 bounds，延伸至完整可用範圍。
安全區經常不對稱，iPhone Duo 尤其明顯；不可假設左、右內邊距相等。
橫向與分屏多任務時，垂直按鈕可能位於左側，因此程式碼要分別處理每一側的內邊距。
Layout Margin 也可能不對稱，使前景內容能靠近垂直按鈕與狀態欄，同時在另一側保留邊距。

8:54在 UIKit 手動排版時，應使用 safeAreaInsets 或安全區佈局指南約束互動內容；SwiftUI 內容則預設位於安全區內。

9:09背景圖像等非互動元素可鋪滿可用空間並延伸至工具欄與側邊欄後方；SwiftUI 可用 ignoresSafeArea，UIKit 可使用視圖 bounds。

9:47iPhone Duo 的安全區可能左右不對稱，尤其是橫向或分屏多任務狀態；佈局不可假設兩側內邊距相同。

9:51應在程式碼中分別處理左右兩側的安全區內邊距，避免垂直排列按鈕出現在其中一側時造成內容擠壓或遮擋。

10:00Layout Margin 同樣可能不對稱：可讓前景內容靠近垂直按鈕與狀態欄，並在另一側保留適當留白。

「首先優先使用系統的標準欄，讓UI自動適配到安全區，然後將可交互的前景元素約束在安全區內，而背景內容可以延伸到安全區之外。」
— 羅爽

安全區處理必須在不同模式下實測，包含分屏多任務。在 Device Hub 的內屏中，可拖曳底部指示條將 App 拖往一側，待出現可放置區域後，再拖往另一側，以驗證工具欄在兩側位置的表現。

重要提醒：自訂 UI 與開發輔助

iOS 27.1 新增 API，讓自訂 UI 能盡量使用可用螢幕空間，同時避免與系統 UI 重疊。SwiftUI 對應 Reserved Region，UIKit 對應 UIViewReservedRegion；特別適合自訂欄項，或需要延伸到邊界的 UI。

10:38處理自訂欄項或延伸至邊界的 UI 時，可使用 iOS 27.1 的 Reserved Region 或 UIViewReservedRegion，在充分利用空間的同時避開系統 UI。

安全區最佳實踐的第一步，是優先使用系統標準欄，交由系統完成大部分適配。
前景互動元素約束於安全區；背景內容才延伸至安全區外。
將安全區與 Layout Margin 視為可能不對稱的值，並在各種姿態與分屏模式中測試。
遇到更複雜的自訂佈局時，再考慮 Reserved Region。

Xcode 27.1 也將原本用於 App 現代化升級的 Skill 更名為 App Resizability。它除了支援 UiKit，也支援 SwiftUI，並已針對 iPhone Duo 最佳化，可用來協助檢查與改善 App 的可調整大小能力。

11:35面對較複雜的佈局需求，可考慮使用 Reserved Region；並可透過 Xcode 27.1 的 App Resizability Skill 協助 App 依循自適應最佳實踐。

課後複習

將專案改用 Xcode 27.1 建構，並在 iPhone Duo 模擬器的 Device Hub 中執行。
依序測試合攏、展開、旋轉、折疊與分屏多任務，記錄每種姿態下的畫面與互動問題。
檢查所有佈局判斷：以尺寸類取代 userInterfaceIdiom、介面方向與 Main Screen；若需螢幕資訊，改由 windowScene 取得。
確認外屏橫向的水平 Compact、垂直 Compact 組合，以及內屏雙 Regular 組合都有適當的版面策略。
盤點導航與分頁元件，優先採用 Navigation Split View、UI Split View Controller、Tab View 或 UITabBarController 等系統標準元件。
檢查每個可互動前景元素是否位於安全區內，並確認背景是否能在需要時延伸至安全區外。
在橫向與分屏多任務時，分別驗證左右安全區與 Layout Margin，確認工具欄在被拖到兩側時都不會遮擋內容。
若有自訂欄項或滿版自訂 UI，評估導入 Reserved Region 或 UIViewReservedRegion，並嘗試 App Resizability Skill。

12:33本段總結的實作路徑：以 Xcode 27.1 建構，在 Device Hub 的 iPhone Duo 模擬器測試各種姿態，並落實自適應佈局與 App Resizability Skill。

iPhone DuoXcode 27.1Device HubiOS 27.1 SDK尺寸類EnvironmenttraitCollectionwindowSceneConcentricRectangleUICornerConfigurationNavigation Split ViewUI Split View Controller安全區safeAreaInsetsLayout MarginReserved RegionUIViewReservedRegionApp Resizability