-
让你的 App 为 iPhone Duo 做好准备
了解如何针对 iPhone Duo 的折叠显示屏更新并优化你的 App。了解如何选择加入全屏体验、采用灵活布局的最佳实践，并在 Xcode 的 Device Hub 中模拟各种折叠姿态。了解如何使用尺寸级别而不是界面方向、处理不对称的安全区域，以及测试 Split View 多任务处理，以确保你的 App 在用户的各种使用方式下都能大放异彩。
章节
- 0:00 - Introduction
- 0:30 - Build with the latest SDK
- 1:17 - Get started in Xcode
- 1:33 - Adopt flexible layouts
- 2:46 - Use size classes
- 3:57 - Avoid screen assumptions
- 5:01 - Adopt standard navigation
- 6:06 - Respect safe areas
- 8:08 - Use reserved regions
- 9:12 - Next steps
资源
相关视频
Tech Talks
WWDC26
-
搜索此视频…
大家好，我是大卫 · 杰克逊（David Jackson）， UI 框架团队的工程经理。 今天，我将介绍如何将您的应用 移植到 iPhone Duo 上。 首先，我将向您介绍如何 在 Xcode 中开始开发。 接下来，我将详细讲解通用布局指南， 确保您的应用在任何平台上都能正确调整大小。 然后，我将介绍针对 iPhone Duo 的具体布局指南， 让您的应用真正大放异彩。 让我们开始吧。
即使您的应用并非使用 iOS 27 SDK 构建的，也能在 iPhone Duo 上正常运行。 当设备处于闭合状态时， 您的应用将利用状态 栏和摄像头左侧的屏幕空间。 当设备处于展开状态时， 您的应用将呈现熟悉的大小和宽高比。 以下是如何更好地利用可用屏幕空间的方法。 如果您已经采用了 iOS 27 SDK， 那么您为支持 iPhone 应用尺寸 调整所做的工作将真正发挥作用。 现在，您的应用将呈现如下效果。 您的应用将在内屏状态栏区域的左侧延伸。 以下是如何充分利用整个屏幕空间的方法。 当您使用 iOS 27.1 SDK 构建应用时， 应用会延伸至屏幕边缘。 标准的导航 和工具栏按钮现在会垂直排列在状态栏下方。
要获得全屏体验，请下载 Xcode 27.1。 在“Device Hub”中选择 iPhone Duo 模拟器来运行您的应用。 使用屏幕底部的控制按钮来打开、关闭、 旋转或折叠 iPhone Duo。
现在您的应用已使用全屏空间， 您可能会注意到在每种姿态下布局存在一些问题。 一款优秀的 iPhone Duo 应用应遵循我们之前 讨论过的灵活布局最佳实践。 最近，我们 在 WWDC26 的“让 您的 UIKit 应用更现代 化”演讲中探讨了灵活布局的原则。 对于 iPhone Duo 而言， 这些原则比以往任何时候 都更为重要，因为您的应用 需要调整大小以适应各种状态—— 无论是展开、折叠、旋转还是收起。 iPhone 应用长期以来一直在适应变化。 它们已经适应了新的屏幕尺寸、 屏幕形状以及 灵动岛（Dynamic Island ）等特殊区域。 iPhone Duo 延续了这 一发展轨迹，带来了 全新的屏幕形状和摄像头位置。 在 iOS 27 中，用户可以通过 Mac 上的 iPhone 镜像功能， 将您的应用放大到前所未有的尺寸。
iPhone Duo 的开合 操作原理与此相同。 您的应用可能会对不同的尺寸类边界做出响应， 但它仍然是一款 iPhone 应用。 最佳的应用布局能够适应各种设备。 它们避免基于用户界面惯例对屏幕 尺寸或设备能力做出预设假设。 并且它们使用尺寸类 等工具来区分小布局和大布局。
让我们进一步探讨尺寸类。 水平和垂直尺寸类与其所 在维度的可用空间松散相关。 尺寸类基于可用空间，表达了 应用应提供的用户体验。 对于 SwiftUI， 请使用环境（environment）。 对于 UKit， 请使用特征集合（ trait collection）。 在 iPhone Duo 上， 存在多种尺寸类组合。 在外屏上，与其他 iPhone 机型类似， iPhone Duo 在纵向 模式下采用常规垂直尺寸类和紧凑型水平尺寸类； 在横向模式下则采用紧凑型垂直和水平尺寸类。 在内屏上， 额外的空间允许您显示更多内容，例如侧边栏。 因此，它具有常规的水平和垂直尺寸类。 外屏的界面方向 行为与其他 iPhone 相同。 iPhone Duo 为支持 横向模式提供了绝佳机会， 因为用户可能希望像搭帐篷一样将手机平放。 内屏的界面方向行为则有所不同。 内屏不会遵循您支持的界面方向。 与 Idiom 一样，请避免在布局决策中检查界面方向。 请改用尺寸类。
在双屏设备上， 请避免在代码中引用主屏幕。 这种做法存在歧义，且将在未来版本中被废弃。 如果可能，请完全避免使用屏幕引用。 取而代之，请使用更局部的概念，例如环境、 特征集合或场景的边界。 如果需要访问屏幕， 请通过窗口场景动态访问。 为确保您的 UI 完美贴合屏幕角落， 请使用 iOS 26 中 引入的同心度 API。 这些 API 已更新，可适配 iPhone Duo 的屏幕形状。 对于 SwiftUI， 请 使用 ConcentricRectangle。 对于 UIKit， 请使用 UICornerConfiguration。 iPhone Duo 将继续支持 UIRequiresFullScreen 键，但当用户打开或关闭 iPhone Duo 时， 您的应用仍会调整大小。 iPhone Duo 会尊重 您支持的界面方向， 但您的应用会在内屏上进行缩放， 包括在“分屏视图”多任务处理中。 有关 iPhone Duo 屏幕的更多信息， 请参阅配套技术文章《充分利用 iPhone Duo 的多
屏幕和场景》。既然您的应用 现在会调整大小以适应内屏和外屏， 接下来我将讨论 iPhone Duo 特有的布局注意事项。 使用标准导航模式是适应 iPhone Duo 各种姿态的绝佳方式。 SwiftUI 的 NavigationSplitView 或 UKit 的 UISplitViewController 均具备完全自适应能力。 当 iPhone Duo 处于闭合状态时， 导航栏将折叠为单列堆叠式导航。 当设备打开 时，导航栏将以平铺和叠加两种形式同时显示。 SwiftUI 的 TabView 和 UKit 的 UITabBarController 也能适应所有使用姿态。 默认情况下，标签页会同时显示在内屏和外屏上， 并在适当情况下垂直排列。 在内屏上，您可以选择 使用侧边栏以实现更丰富的导航功能。 对于 SwiftUI， 请将默认标签栏位置设置为侧边栏。 对于 UKit，请将首选位置设置为侧边栏。 弹出视图也能适应所有显示模式。 在外屏上，弹出视图中的按钮可垂直排列。 在内屏上，弹出视图会居中显示。 其他界面元素（如弹出框、上下文菜 单和提示框）也能适应每种显示模式。
导航栏、工具栏和标签 栏会布局在安全区域之外。 它们会自动避开状态栏等系统 界面元素以及摄像头等硬件功能。 水平条提供顶部和底部内边距， 而垂直条提供行首和行尾内边距。 若要深入了解垂直排列的内容，请参阅配套 技术讲座《 Raise the Bar with iPhone Duo 》。
遵守安全区域规则可确保应用控件触手可及， 且应用界面完整可见。 以下是在应用中最佳应用安全区域的方法。
在定位 UI 时，请确保将交互式 控件等前景元素放置在安全区域内。 对于 SwiftUI， 您的内容 默认会放置在安全区域内。 对于 Uikit， 如果您手动布局视图， 请参考视图的安全区域内边距， 或使用自动布局将视图 约束到安全区域布局指南中。 允许背景元素（如全出血图片 ）填满可用空间， 并延伸至工具栏和侧边栏之后。 对于 SwiftUI， 请使用 ignoresSafeArea。 对于 UKit， 请使用 视图的边界（bounds）。 请注意，安全区域通常是不对称的。 这一点在 iPhone Duo 上尤为明显。 例如，在横屏模式和“分屏 视图”多任务模式下， 垂直按钮可能会出现在左侧。 因此， 请避免假设相对两侧的内边距相等。 相反，应编写代码独立处理每一侧。 与安全区域类似， 布局边距也是不对称的。 这使得您的前景内容可以更靠近 垂直按钮和状态栏， 同时保持相对一侧的边距。
在不同配置下测试您对安全 区域的处理方式非常重要。 “分屏视图”多任务处理也不例外。 使用 Device Hub， 在内屏上预览您的应用。 使用底部的主屏幕指示器将应用 拖动到屏幕的一侧。 此时会出现一个用于放置应用的区域。 然后，将应用拖动到另一侧。 垂直布局的内容可能会出现在应用的两侧。
最后，在 iOS 27.1 中，我们引入了一 项新 API， 可让您的自定义 UI 在不与系统提供的 UI 发生冲突的情况下， 尽可能多地利用可用屏幕空间。 对于 SwiftUI， 请使用 ReservedRegion 安全地将 UI 元素放置 在安全区域之外，同时最大限度地利用可用空间。 对于 UIKit， 该功能称 为 UIViewReservedRegion。 这是构建自定义状态栏 或实现全屏UI的绝佳选择。 有关保留区域的更多信息（ 包括如何利用它们构建 适应折叠功能的自定义 UI）， 请参阅配套技术讲座 《在 iPhone Duo 上 通过自适应布局展现风采》。
总结安全区域的最佳实践： 对于需要自动适应安全区域的 UI， 请使用标准状态栏。 将交互式或可见的前景内容对齐到安全区域内， 而背景内容则可以超出安全区域。 请务必考虑并测试 非对称的安全区域和布局边距。 如果您的布局较为复杂， 请考虑使用保留区域。
我已经介绍了许多自适应布局的最佳实践。 这里提供一种高效的方法， 确保您的应用遵循所有这些最佳实践。 在“让您的 UIKit 应用 焕然一新”的演讲中， 我们介绍了一项新的应用现代化技能。 在 Xcode 27.1 中， 该技能更名为“应用可调整大小”（ App Resizability）。 它现已支持 SwiftUI 和 iPhone Duo。 不妨尝试一下。
现在，您的应用已经准备 好在 iPhone Duo 上如鱼得水了。 总结一下：下载 Xcode 27.1， 使用 Device Hub 在 iPhone Duo 上模拟您的应用， 确保您的应用遵循了我所介绍的所有自适应布局 最佳实践，并尝试使用“应用可调整大小”功能。 就这些了。 非常感谢大家抽出时间聆听。 我期待在 App Store 的“ 首屏”看到您的 iPhone Duo 应用。
-
-
2:59 - Read size classes
// SwiftUI @Environment(\.horizontalSizeClass) private var horizontalSizeClass @Environment(\.verticalSizeClass) private var verticalSizeClass // UIKit traitCollection.horizontalSizeClass traitCollection.verticalSizeClass -
4:16 - Access the screen from the window scene
// Avoid referencing the main screen on a two-display device. // Access the screen dynamically from the window scene instead. let screen = window?.windowScene?.screen -
4:30 - Match the screen corners with Concentricity
// SwiftUI ConcentricRectangle() .fill(Color.green) .padding(8.0) .ignoresSafeArea() // UIKit // UICornerConfiguration -
5:44 - Show a sidebar on the inner display
// SwiftUI TabView { … } .defaultTabBarPlacement(.sidebar) // UIKit tabBarController.sidebar.preferredPlacement = .sidebar -
6:52 - Align foreground content to the safe area
// UIKit foreground.frame = view.bounds.inset(by: view.safeAreaInsets) -
7:07 - Let background content extend past the safe area
// SwiftUI .ignoresSafeArea() // UIKit backgroundView.frame = view.bounds -
7:30 - Handle asymmetric safe area insets
// Avoid assuming insets on opposite sides are equal let width = view.bounds.width - view.safeAreaInsets.left * 2 // Handle each side independently let width = view.bounds.inset(by: view.safeAreaInsets).width -
9:25 - Replace main screen references
func updateThumbnail(from image: UIImage) { // Before let screenScale = UIScreen.main.scale // After let screenScale = traitCollection.displayScale // ... }
-
-
- 0:00 - Introduction
David Jackson from the UI Frameworks team outlines how to bring your app to iPhone Duo: getting started in Xcode, general resizing guidance, and layout guidance specific to iPhone Duo.
- 0:30 - Build with the latest SDK
Your app runs on iPhone Duo even without recompiling, but screen usage improves with each SDK. The iOS 27 SDK extends your app left of the status bar on the inner display; the iOS 27.1 SDK reaches the screen edge and lays standard navigation and toolbar buttons out vertically.
- 1:17 - Get started in Xcode
Download Xcode 27.1 and run your app in the iPhone Duo simulator using DeviceHub. On-screen control buttons let you open, close, rotate, and fold the device to check your layout in every pose.
- 1:33 - Adopt flexible layouts
iPhone Duo extends the long-standing need for adaptive layout — new screen shapes, camera locations, and iPhone mirroring on the Mac. Avoid assumptions about display size or capability based on user interface idiom, and design across a continuum of sizes.
- 2:46 - Use size classes
Size classes express the experience your app should provide for the available space — the environment in SwiftUI, trait collection in UIKit. The outer display behaves like other iPhone models, while the inner display is regular in both dimensions, leaving room for sidebars. The inner display doesn't honor supported interface orientations, so use size classes rather than orientation for layout decisions.
- 3:57 - Avoid screen assumptions
Don't reference the main screen on a two-display device — it's ambiguous and will be deprecated. Prefer the environment, trait collection, or the scene's bounds, and access screens dynamically from the window scene. Use the iOS 26 Concentricity APIs, ConcentricRectangle and UICornerConfiguration, to fit the screen's corners.
- 5:01 - Adopt standard navigation
NavigationSplitView, UISplitViewController, TabView, and UITabBarController are fully adaptive across every pose — columns collapse when closed and tile or overlay when open. On the inner display you can opt into a sidebar placement for richer navigation. Sheets, popovers, context menus, and alerts adapt as well.
- 6:06 - Respect safe areas
Standard bars lay out outside the safe area and automatically avoid the status bar and camera. Keep interactive foreground content inside the safe area, and let background artwork extend past it with ignoresSafeArea or the view's bounds. Safe areas and layout margins are often asymmetric on iPhone Duo, so handle each side independently and test in Split View.
- 8:08 - Use reserved regions
New in iOS 27.1, ReservedRegion in SwiftUI and UIViewReservedRegion in UIKit let custom UI claim as much screen space as possible without colliding with system UI — useful for custom bars and edge-to-edge designs.
- 9:12 - Next steps
The app modernization skill introduced in "Modernize your UIKit app" is now called App Resizability in Xcode 27.1, with support for SwiftUI and iPhone Duo. Download Xcode 27.1, simulate with DeviceHub, follow the adaptive layout practices, and try the skill.