将你的窗口 App 提升至空间计算领域

♪ 悦耳的器乐嘻哈 ♪ ♪ 大家好！ 我是 Harlan 一名 SwiftUI 工程师 我非常高兴能帮助你 让你的窗口 App 在这个新空间平台上大放异彩 通过空间计算 你的 App 存在于 用户周围的实体环境中 这将带来全新的 令人惊叹的三维体验

在所有 Apple 平台上 SwiftUI 都是 编译 App 最好的方式 SwiftUI 添加了 一整套 API 和行为 可以充分利用 这个新平台提供的一切 如果你还没看过 可以观看 “了解空间计算 SwiftUI” 以了解所有在该设备上 使用 SwiftUI 的新方式 我会重点讲解 SwiftUI 但如果你使用的是 UIKit 还是有很多你可以充分利用的地方 观看“了解空间计算 UIKit” 以了解如何获得 UIKit 最佳体验 如果你有一个现成的 iPhone 或 iPad App 并希望保留 iOS 体验 请看 “在共享空间中运行 iPad 和 iPhone App” 不论你是从另一个 Apple 平台迁移 App 还是编译一个全新的 App 不论在哪里运行 SwiftUI 都是让 App 与平台兼容的最佳方式 在该讲座中 我们会更新 该平台的一个 SwiftUI App 我们将从探索内置控件如何自适应 以获得更好的浏览舒适性和交互开始 我们也会谈谈如何确保 你的自定义视图和控件 能充分利用该设备上的 全新的视觉和输入技术 我们还会采用一些 该设备上独有的全新功能 该平台的整个构建过程 都以 SwiftUI 为核心 事实上 大多数系统 App 是用 SwiftUI 写的 比如 Keynote 讲演、 无边记、 和 TV 这些 App 将它们熟悉的界面 带入你身边的空间中 尽管这些 App 看起来像它们的 iPad 版本 但它们充分利用了该平台的 新设计语言和交互方法 让我们一起探索你可以 如何通过更新 iPad App 将你的 App 也 带入到用户身边的空间中 这是 Backyard Birds 一个虚拟观鸟 App 你可以在这个 App 中 喂养和记录所有造访你院子的鸟 作为一个 Swift 开发者 我非常喜欢鸟 这样的 App 是我喜欢的类型 Backyard Birds 是用 SwiftUI 写的 它是一个多平台 SwiftUI App 的优秀范例 它支持 iPhone、iPad、 Mac 和 Apple Watch 我想让它再多支持一个平台 让 Backyard Birds 在共享空间中真正歌唱起来吧 首先 确保你的 App 支持新平台 将 App 添加到 Xcode 的支持平台菜单中

这会添加一个新的运行目标 我们选择新运行 目标并在模拟器中运行

在模拟器中 当我移动光标时 App 会好像 我在用眼睛看一样做出响应 我们运行 Backyard Birds 时 我们马上就能发现 它和 iPad 版本 有一样的基本布局 但有些地方有点不一样 我留意到的第一个不同是 App 有一个玻璃背景了 玻璃背景是窗口默认的标准背景 它根据光线条件和它背后物体的颜色 来调整对比度和颜色平衡 因此 平台不区分 浅色和深色外观 不论你在哪里使用 玻璃背景自动地 确保你的 App 总能舒适浏览 让我们进一步探索 Backyard Birds Backyard Birds 在顶层有个导航分屏浏览视图 在提供的侧边栏中 用户能在顶层视图之间切换 侧边栏自动将其 玻璃背景上的背景颜色调深 以在视觉上将其与详细视图区别开来 当我将光标悬停在这些列表行上时 它们会有轻微的高亮显示 我可以轻点这些行来切换视图 就像在 iPad 上一样 分屏浏览视图的右侧是 navigation stack 我轻点其中一个后院 就导航到它的详细视图 在这里 我能看到当前院子里 还有多少鸟食和水 我可以向下滚动来查看 所有最近造访的鸟 导航栏有些这样的圆形按钮 当我看它们时 它们也会高亮 当我按下收藏按钮时 它会缩小并且切换到已收藏的状态 这些只是 SwiftUI 为了增强共享空间中的每个 App 所做的其中几件事而已 我们简单地浏览了Backyard Birds 已经发现了一些新的 内置控件提供的自动行为 现在让我们了解如何能让我们的 自定义视图和控件完美运行 在我们浏览后院列表时 我发现了一个小问题 如果我很靠近 App 鸟和植物还是很清晰 但喷泉变得有点模糊 我怀疑喷泉是用固定分辨率绘制的 该设备的 App 是 存在于用户周围的空间内的 它不像其他平台 并不存在一块 有真实像素的屏幕 不能定义绘制内容的图像质量 App 可以放置在任何地方 它们可以放在离你很远的地方 或就在你的眼前 甚至有一定的倾斜角度 系统通过动态缩放内容 来确保 App 在所有情况下 都看起来很完美 要让系统这样做 你必须提供矢量素材 因为位图一缩放就会降低图像质量 文本和 SF Symbols 已经是矢量图形 但如果你正在使用自定义图标或图形 请使用矢量图形来 充分利用动态内容缩放的优势 让我们看看喷泉是不是位图图像 看 如果我检查比例选项 这里显示是按照个体比例指定的 还好 我已有该素材的矢量图形了 所以我可以切换到单一比例 移除现有的素材 并替换为矢量图形 然后我会勾选 Preserve Vector Data 框 以便内容能缩放到任意大小 这项设置在所有 Apple 平台上都支持 现在好多了 现在喷泉很清晰了 不管我是靠近还是远离 App 图像都保持着高质量 让我们再看看其他的一些标签页 植物标签页显示了 一个包含所有植物的网格 这些植物后面的圆圈 看起来很亮 不太自然 如果我们检查代码就会找到答案： 背景是一个单色 像这样的单色在 玻璃背景上有固定的对比度 不能根据用户身边的空间而调整 这里有个条件判断 如果是深色模式 背景就会使用 稍微更深一点的颜色 这种做法在 iOS 中很常见 平台将其颜色方案设置为深色 因此植物后面的颜色就是深色 但要记得 该平台并不区分 浅色和深色的颜色方案 因此 不论玻璃背景后的环境如何 确保你的内容浏览舒适的最佳方式是 采用虚化效果 虚化材质引入了 额外的对比度和亮度 确保玻璃上的内容浏览舒适 不论背后的光线条件如何 所有内置控件和容器 都默认使用这些虚化材质 因此如果你使用标准控件 这里你无需做任何额外的工作 SwiftUI 的语义样式 在每个平台上自动采用合适的外观 在这台设备上 当它们放置在玻璃背景上时 它们会看起来很明亮 如果你正在编译自定义视图或容器 使用这些语义样式 来确保无论玻璃背景 如何适应你周围的空间 你的内容都能浏览舒适 让我们将这些植物图标的 背景更换为语义填充颜色 而不是单色 因为我们正在使用语义材质 我们完全可以移除 颜色方案的条件判断 现在 在所有平台上 代码更简单也更正确了 哇 这些图标看起来好多了 在每一种光线条件下 它们都能与玻璃背景 形成漂亮的对比效果 我们已经花了些时间 改善 App 的视觉呈现 现在让我们确保 所有交互组件清晰易用 正如你在 “了解空间计算 SwiftUI” 中学到的 有四种方式 可以与你的 App 交互 最常见的交互方式是间接捏合手势 你可以看着一个控件 然后捏合手指来轻点 如果 App 离你很近 你可以通过伸手触碰 App 来直接与其交互 如果你连接了一个触控板 你可以将其用作一个指针 来精确输入 还有你已经熟悉的 支持各种 Apple 平台的 世界级辅助功能技术 也可以在这台设备上使用 像旁白和切换控制一类的工具 让每个用户在使用你的 App 时 都能获得一样的出色体验 在该平台上 可交互的内容 使用悬停效果来高亮 例如 当你看着一个 按钮或列表等控件时 视图边界会出现轻微的高亮效果 让用户清楚知道 该内容是可交互的 为了让用户感觉 App 有响应 添加这些悬停效果是至关重要的 悬停效果让用户确信 他们正看着或触摸的视图 就是他们会交互的视图 悬停效果会自动添加到 所有系统控件上 如果你使用 SwiftUI 提供的内置控件 无需任何额外的操作就能 让你的 App 获得这些效果 我留意到我们的 App 中的 Birds 标签页上少了一个悬停效果 我能轻点其中一只鸟 但没有任何视觉指示表明我能轻点 因为没有悬停效果 每当你创建一个响应手势 (如轻点) 的控件时 控件应该有悬停效果 你可以使用 hoverEffect() 修饰符来添加悬停效果 在默认设置下 悬停效果是高亮 当你看着控件时 它会更明亮一点 有了新悬停效果 我就清楚地知道我能与这些控件交互 但悬停效果有这些直角 我觉得圆角看起来会更好 我可以使用 contentShape() 修饰符 来提供一个自定义形状 将 hoverEffect 作为 kind hoverEffect() 修饰符 读取其修饰的视图的内容形状

现在感觉好多了 悬停效果很清晰 并且有一点内边距和好看的圆角 但是 我认为我们还可以做得更好 在 SwiftUI 中 如果一个控件 以执行某个操作来响应轻点 那可能该控件就只该是个 button 让我们把鸟视图更改为 button

在该平台上 按钮默认是有边框的 但当我不看这些按钮时 我不想让按钮有背景 我会把 button 设置为 plain button 这样 按钮会有标准的 悬停效果 但不会有背景或内边距 完美！ 这些按钮具有标准悬停效果 当轻击按钮时 它们会缩小 悬停效果是为了保护隐私而编译的 这些效果是在 你的 App 进程之外 由系统执行的 系统悬停效果是让你的 App 对用户所注视的位置 作出响应的唯一方式 你的 App 只会 在用户捏合手指、直接触摸 或用手指、指针在控件上悬停时 收到交互请求 在做了所有这些更改后 我可以说 Backyard Birds 看起来很不错了 但通过对布局做一些小的调整 以及采用一些平台独有的功能 我们就可以让 App 更完美 让我们谈谈顶层布局 在 iPad 上 当一个窗口的 水平大小的类别是 regular 时 使用侧边栏比标签页视图更好 因为这样做更好地 利用了增加的宽度 但是在该设备上 窗口不受屏幕大小限制 并且控件也不是必须 放置在窗口里面 考虑使用 TabView 来在顶层视图之间切换 使用 TabView 时 标签栏附在你的 App 左侧 就像这里照片中的一样 当你看着其中一个图标时 标签栏会自动展开 显示每个标签页的标签 让我们将 NavigationSplitView 更改为 TabView 我为 App 中的每个 screen 创建一个视图……

……再加上一个 有标题和图标的 tabItem

太棒了！ 当你不与标签交互时 标签栏是折叠起来的 现在 App 有更多 可以留给内容的空间了 请留意标签栏放置在窗口外面 而不是里面 这种组件叫做挂饰 挂饰位于窗口边缘的边界外 并且是放置额外控件的理想位置 它可以让你将想要的额外控件 放置在主要内容的旁边 除了标签栏 照片在底部还有一个工具栏 工具栏让你能控制 图库中显示的时间范围 这些挂饰非常常见 你可以将 bottomOrnament 作为占位符 使用 .toolbar 修饰符 自动添加一个挂饰 工具栏挂饰自动提供一个 药丸形的玻璃背景 我想到一个能添加到 Backyard Birds 的挂饰 我尽量留意还剩下多少水和鸟食 但如果水和鸟食快没了的时候 我希望能收到一个提醒 你可以使用 ornament() 修饰符 来编译这样的自定义挂饰 attachmentAnchor 决定了 在 App 中 挂饰附在什么位置 我可以将通知放置在 App 窗口的任何边缘上 但我想将它与底部对齐 contentAlignment 这个参数让你能选择 挂的哪个部分与 attachmentAnchor 对齐 我希望将我的挂饰的中心 与 App 的底部对齐 由于你对自定义挂饰的内容 有更多控制权 因此在默认情况下 SwiftUI 不会 给它们提供玻璃背景 如果你希望有一个玻璃背景 你可以在挂饰的内容上使用 .glassBackgroundEffect() 修饰符 现在 在我的任何院子里 没有足够的水或鸟食时 我都会在 App 底部 收到这条信息 并且我可以轻点信息 来导航到院子 我喜欢！ 由于 SwiftUI 自动适应 其运行的平台 我们轻松地做到了 让 Backyard Birds 在共享空间中完美运行 你可以在你的 App 中 遵循相同的步骤 为交互控件添加悬停效果 使用矢量素材和虚化效果 来让内容浏览舒适 以及为辅助控件创建挂饰 在该平台上 你还可以探索很多平台独有的功能 例如支持 3D 内容的 volume 和支持空间体验的 Immersive Spaces 请观看 “将 SwiftUI 带入第三维度” 和“与 SwiftUI 一起突破窗口” 以了解如何将 你的 App 扩展到窗口以外的空间 感谢收看 编程快乐！ ♪