在 iPhone Duo 上使用自适应布局适配各种姿态

你好，我叫玛丽亚。 我是一名人机界面设计师。 参与苹果设计系统开发。 我是 Harry，一名 UI 框架工程师。 今天，我们将讨论如何创建布局。 能够适应iPhone Duo 的独特特性。 其宽大的屏幕为您的内容创作创造了新的机会。 以及让你的应用适应其形状的新方法。

iPhone Duo 包含多个显示屏， 每一种都有自己的尺寸等级。 如果您已经在设计可调整大小的组件， 这应该会让你感到熟悉。

新的硬件功能也对可用 空间的形成起到了一定作用。

其中包括铰链 以及位于外屏和内屏上的两个摄像头。

我们称这些为保留区域， 哈里稍后会更详细地介绍这些内容。 对待这些区域，就像对待布局 中已经适应的其他区域一样。 例如iPadOS上的窗口控件。 外置显示屏摄像头始终处于开启状态。 带有系统工具栏 以及在新安全区域内垂直排列的标签栏。 欲了解更多信息，请查看“ iPhone Duo 提升标准”。 巧的是，我也会到场。

在内部显示屏上， 您的界面可能会进行调整以适应折叠。 或者启用新的 FaceTime 通话摄像头功能时。 如果取景器对你的体验至关重要， 保持该区域内的重要内容和控件畅通。

在你的设计方案中，铰链的处理方式会有所不同。 当设备像书一样部分折叠时， 它将内部显示屏分隔开来 分成多个可用区域 当显示屏在中心弯曲时。

嘿，玛丽亚，我找到这本书了。 请看这张跨页照片。 看起来不太妙，对吧？ 没错。当它接近脊柱时， 图像的某些部分变得难以辨认， 因此，它不再被视为一幅连续的图像。 同样的情况也会发生在应用程序上吗？ 绝对地。 跨屏显示的内容和控件的行为非常相似。 为了帮助你的应用适应这些变化， 我们开发了一套设计模式和工具。 让你的应用在 iPhone Duo 上感觉如鱼得水。 我们先来跟你讲解一下位移模式。 以及它们背后的一些设计原则。 接下来我们将讨论一种我们称之 为“排列”的新型用户界面模式。

我们开始吧。

iPhone Duo 的绝佳 设计关键在于懂得何时做出调整。 许多接口可以自然地绕过保留区域， 而另一些人则受益于更有意识的方法。 通过一种我们称之为位移的模式， 它会调整现有元素的框架。 根据可用空间， 保持重要内容可见、易于访问 即使设备部分折叠，也不会受到阻碍。

常见的设计是从屏幕上居中的元素开始的。 当设备处于打开状态时。 折叠之后， 该元素会移动到能够实现其功能的区域。

我先从一个小的元素开始， 但排量还可以更大， 从一个按钮到整个容器 或者布局中更大的部分。

选择最符合内容的范围。 如果某个元素可以独立调整位置， 就让它自行移动。 当各个要素协同作用时， 将他们安置在一起以维系他们的关系。 还要注意避免过度运动。 将元素远离其来源会削弱它们之间的视觉联系。

例如，在相册中选择照片时， 而不是将上下文菜单居中放置在尾部区域， 这两个元素一起移动，并围绕折叠处对齐。 像文章一样连续滚动的内容 信息流、文档和列表不会相互干扰。

这些体验已经可以通过滚动进行调整， 因此，在可用区域之间 移动它们可能会中断连续性。

移动内容时， 让它的使命指引它的行进方向和归属之地。 根据设备的使用方式，数值可能会有所变化。

当它像书一样部分折叠起来时， 诸如警报之类的元素会移到列表末尾。 这样一来，它们就能更接近 它们将要出现的地方。设备关闭，体验继续。 在外屏上。

当设备被支在桌子上时， 这两个地区提供不同类型的体验。 顶部区域非常适合放置 那些需要远距离观看的内容。 同样的警报可以移到这里，以便于查找。

底部区域非常适合用于交互式控件。 媒体控制等可点击元素可以移到这里， 提供更稳定的触摸表面。

当多个地区都合适时， 首先要考虑上下文。 就像在iPhone上一样，当搜索聚焦时， 它在键盘上方。 当设备打开时， 该场地充分利用了其提供的额外空间。 随着设备折叠，其宽度和位置也会随之调整 保持在它正在搜索的视图上方。

一旦你选定了某个物体应该移动到的位置， 思考它如何适应新的环境。 位置和尺寸是最常见的改动， 但其他视觉属性也可以进行调整。

操作表、警报、菜单和弹出窗口 都是轻量级的情境体验 它可以出现在预留区域上。 所以主要目标是让它们完全可见。 该系统会自动重新定位组件。 在保护区周围。 在像“提醒事项”这样的分屏应用程序中， 该系统会保持两列都可见。 通过调整它们的宽度 并将它们平均分配到 50/50 的位置。

在这个健身设计中， 我希望网格中的每个项目都具有交互性。 当设备折叠时。 我可以保留外边缘。 同时增加铰链周围的间距， 将每个容器保持在其区域内。 所有这些例子的共同之处在于，我们都在移动， 调整大小，或重新组织现有内容。 保持内容、功能和布局的可用性 这样人们就能获得完整的体验 无论他们如何使用iPhone Duo。

现在你知道如何考虑适应保留区域了。 哈里，开发者们应该注意哪些新的API？

玛丽亚，你问得好。 我最喜欢的就是新的API。 事实上，我有一些新的 API 想和你们谈谈。

在 SwiftUI 中，您可以使用 GeometryProxy 查询保留区域。 来自 GeometryReader 或 onGeometryChange 修改器。在几何代理上使用 新的 reservedRegion 方法 获取您视图中可用的区域。 保留区域有多种类型。 这里， 该折叠部分由一个分区保留区支持。 因为它将较大的区域划分成多个较小的区域。

在 UIKit 中，您将使用 UIView 上 提供的 reservedRegion 方法。 您可以查询保留区域的 frame 属性 将其融入您自己的布局中。 一个区域可以是活跃的，也可以是非活跃的。

默认情况下，只会返回处于活动状态的条目。 但您可以使用以下方法查询不活跃的用户 reservedRegion 方法 中的 includeInactive 查询选项。

在 iPhone Duo 上，折叠区域的分割功能仅 在用户折叠设备时才会激活。 平放时，它处于非活动状态，宽度为零。 您可以使用非活动区域 对你的应用做出高层次的决策。 例如，在网格状布局中， 你可能更喜欢偶数列。 当存在分区区域时 无论其处于激活状态。

还有另一种类型的保留区域 称为闭塞区域。

这些并不划分区域； 相反，它们会遮蔽它们。 把它们想象成你视野范围内的较小框架。

在 iPhone Duo 上， FaceTime 通话 摄像头以遮挡区域表示。 您可以通过传递遮挡类型来查询它们。 到 reservedRegion 方法。 就像折叠的分割区域一样， 当摄像头处于活动状态时，此区域处于活动状态。 当相机不活动时，该功能也处于非活动状态。

谢谢你，哈里。 你似乎总能解答我的问题。

我非常期待使用带有自定义视图的预留区域。 但作为一名系统设计师，我不得不说： 我更兴奋的是能够利用我们自己的组件来适应 折叠。你可能对其中很多都很熟悉。

例如 NavigationStacks、 NavigationSplitViews、 以及选项卡视图。 这些系统容器允许您使用通用模式 影响用户如何在您的应用中浏览。 此外还有像 List 和 ScrollView 这样的视图。这些是用来盛放内容的容器。

嘿，哈利， 我有一个布局，它是 有点像分屏显示， 但我其实并不需要 它所伴随的所有扩张和收缩行为。 还有其他可以用的吗？

哇，玛丽亚，又是一个好问题。 是的， 我还可以跟你谈谈另一个容器。

布局容器位于这些导航之间。 以及内容容器。 这些布局容器用于排列两个视图 按照一套规则。 它们被称为安排。 那么，我说的安排和规则是什么意思呢？ 为了解释这一点，我们打开播客应用。 我开始在我的iPad上播放播客节目了。 我正在查看“正在播放”页面。 右下角有个按钮，点击后会显示它的文字稿。 如果我点击那个按钮， 现在出现了成绩单视图，将布局分成了两半。 如果我在 iPhone Duo 上 显示相同的视图，效果也非常相似。 我折叠好设备之后。 iPad的这种分屏布局 非常适合 iPhone Duo。

但请注意，如果我再次切换转录按钮会发生什么。 它又消失了。 但是“正在播放”视图不像 在 iPad 上那样居中显示。 相反，它始终局限于折叠线所定义的左侧区域。 正如玛丽亚所说， 这样可以确保其控制装置易于操作且不受阻碍。 如果我把 iPhone Duo 旋转， 使它的高度大于宽度， 正在播放和文字稿浏览量 完全不要使用分屏布局。 相反，成绩单视图以内联形式显示。

所以，要确定合适的布局。 当前播放视图 我需要考虑多方面因素， 例如视图的水平和垂直尺寸类别， 视图宽度与高度的纵横比， 以及是否存在任何活跃的分区。

基于这些输入信息， 我可以确定布局的输出。 在“正在播放”视图中， 比如我是否应该展示这个景色， 如果我确实要展示这个视图，它的框架是什么？

总而言之，这种输入到输出的功能 这被称为安排。 在 iOS 27.1 中，您可以在自己的应用 程序中使用系统提供的配置。

玛丽亚之前提出了很多很好的观点， 我当时应该记笔记的。 纯属巧合， 我一直在开发一款语音笔记应用。

让我来向您展示如何在我的应用 程序中使用这些新的 API。 这是我的导航堆栈。 我首先在堆栈中添加 一个 ArrangementView。 ArrangementView 包含 主视图和辅助视图。 因此，我将提供我的 PlayerView 来显示信息。 关于当前播放的音频提示， 我的 UpNextView 会显示即将播放的音符。 在当前笔记结束后。 在 UIKit 中， 我会选择 UIArrangementViewController。 将其添加为我的 UINavigationController 的根视图控制器。 然后我将配置我的播放器 和 UpNextView 控制器。 作为主要和次要视图控制器我的 ArrangementViewController。 您可以配置首选方案。使用 arrangementViewStyle 修饰 符。

默认样式称为拆分样式。 我将在这里手动指定。

正如你所想，这种分割式安排会分裂。 它在其主要观点和次要观点之间划定了界限。

默认情况下，它会水平分割。 当视野宽度大于高度时， 例如像这样在iPad上使用宽屏比例时， 或者在iPhone上以类似的宽高比显示， 或iPhone Duo 上类似的宽高比。

如果我旋转设备， 分屏样式会垂直分屏。 因为现在视野的高度大于宽度。 就我目前的游戏体验而言， 我只想把它水平分割。 因此，我将指定它应该分割的坐标轴。 在 split ArrangementStyle 上使用 axes 方法。 如果分割后的排列方式无法沿轴线分割， 它是主轴， 布局视图选择仅显示单个视图。 这里，它选择只显示 PlayerView， 因为 ArrangementView 的高度大于宽度。 所以它的主轴是垂直的。 但它只能水平分裂。 在 UIKit 中，我会使用更新排列方法。 在我的 UIArrangementViewController 中，并使用 UISplitArrangement 类型配置为具有相同的水平轴 在 SwiftUI 中配置。

这是我的播放器，接下来将在 iPhone Duo 上显示。 采用分体式布置。 我想探讨另一种安排。 用于阐述我的观点。 它被称为叠加排列。 与分裂不同的是， 它倾向于将内容并排排列， 叠加层布局倾向于将内容置于上方。 或者上下排列。 在这里，我将更新我的排列视图， 使其使用叠加排列视图样式。 我想在展示这张照片之前再稍作润色，玛丽亚。 所以我要切换播放器和“接下来播放”视图 并添加一个折叠状态。 结果还不错。

现在如果我把设备折叠起来， 叠加布局倾向于将主层置于特定位置。 以及并排显示的次要视图。 这让我的“待播列表”视图有了更大的空间。 我想利用这一点。

使用叠加排列方式时， 我可以查询 overlayArrangementZIndex 环境属性。

在“接下来要播放 ”视图中，随着用户折叠 和展开设备，它会发生变化。 我将用它来切换折叠状态 以及我的“接下来要看”视图的扩展版本。

在 UIKit 中， 我可以查询主视图的 Z 轴索引。 通过使用视图放置状态方法 在 UIArrangementViewController 上，然后对返回的状态 使用 Z 索引属性。 哈利，选择真不少。 我必须问一下。 你考虑过该如何从中做出选择吗？

当然有。 首先，请务必遵循您现有的应用程序模式。 如果您已经在使用类似分割式的布局 在应用程序的某些部分中 使用组件例如 HStack 或 VStack， 考虑采用分体式布置。 如果你的应用已经在部分 区域实现了类似覆盖层的布局 使用 ZStack 等组件， 考虑使用叠加排列方式。 这些组成部分自然 而然地转化各自的安排 内置对 iPhone Duo 的支持。 如果你没有现成的模式 可以借鉴，当有明显的你的观点 之间存在前景 / 背景关系。

例如，在 Accessibility Reader 中，控件位于 前景中可读内容位于背景中。 因为你可以滚动查看叠加层上方的可读内容， 偶尔部分被遮挡也没关系。 因此，采用叠加式排列方式是一个很好的选择。

考虑分摊方案当 你的内容之间存在更明显的主次关系时。 回到播客，查看文字稿 正在提供有关当前播放播客的更多详细信息。 重要的是，这两者都不能被遮挡。 所以，采用分屏布局是个不错的选择。 好了，玛丽亚，让我看看你有没有在认真听讲。 我的音频笔记应用应该使用哪种格式？ 唔。 我认为我们应该使用拆分式 ArrangementView。 因为 接下来的列表 提供了有关比赛状态的更多详细信息。 而不是与玩家有背景关系。 这是正确的。

选择合适的方案固然重要， 考虑何时 ArrangementView 不是完成这项工作的合适工具。 例如， ArrangementView 不会 为您的应用程序提供导航基础架构。 因此，请避免放置导航容器。例如 ArrangementView 中的 NavigationSplitViews。 由于 List 和 ScrollView 等视图的特性， 避免将 ArrangementView 放置在这些可滚动容器内。

iPhone Duo 为您的应用 引入了许多新的配置选项。 为了确保您的应用已准备 好在 iPhone Duo 上运行，首先审核一下你的应用的居中布局。 考虑一下是否可以采用两栏布局， 或者说，在这种使用场景下， 什么样的位移模式才合理。 如果您使用的是标准系统容器和演示文稿， 你会发现，很多行为都是免费获得的。

如果您使用的是自定义水平分割或叠加布局， 考虑使用 ArrangementView 来处理此布局。 适用于您的应用支持的所有设备。 最后，确定优先级最高的事项。 在视图中手动布局控件 并考虑采用 ReservedRegions API 在需要的地方实施您自己的位移。 那么，除了布局之外，铰链还有什么其他用途吗？ 我有一个很棒的交互创意，想尝试把它实现出来。

听起来很有趣。 还有另一个API 这样你就可以对设备的折叠状态做出响应。 请查看“如何在 iPhone Duo 上 利用多个显示器和场景”了解更多信息。 自适应布局让你的应用在每种 姿势下都显得设计得非常用心。 移动、调整大小 只有当调整能带来更好的体验时才会进行调整。 有了这些新的可能性， 我们迫不及待地想看看你们会创造出什么。