Meet UIKit for spatial computing
Swift & UI 进阶 20m

UIKit 遇见空间计算：适配、材质与交互

Meet UIKit for spatial computing

2023年6月5日

在 Apple 官方观看视频

一句话判断

把 UIKit App 带到空间计算平台，核心工作是替换硬编码颜色、使用语义字体、适配不可用 API，其余系统帮你搞定。

这场 Session 讲了什么

Grace Kendall 和 Andrew 演示了一个像素动画 App 从 iPad 移植到空间计算平台的完整过程：

移植步骤。在 Xcode 项目中添加新的运行目标、为平台准备三层叠加的 App 图标（图标会动态响应用户注视）、编译并解决不可用 API 的编译错误。典型的不可用 API 包括 UIDeviceOrientation（设备没有多方向概念）、UIScreen（不存在单一硬件屏幕的概念）、Apple Pencil 相关 API 等。

视觉适配。最关键的改动是使用语义颜色和语义字体。直接用 RGB 值定义的颜色在玻璃背景上效果很差，改用 UIColor.label、UIColor.secondaryLabel 等语义颜色后，文字自动获得 vibrancy 效果，在半透明背景上清晰可读。UITextField 的 roundedRect 边框样式会自动获得凹陷（recessed）外观。

材质（Material）。空间计算平台的视觉核心。UINavigationController 和 UISplitViewController 默认使用玻璃背景，周围环境的细节可以透过来。材质根据光线条件和背后物体的颜色自动调节对比度和色温，因此这个平台没有明暗模式的区分。

悬停效果（Hover Effects）。系统组件自动提供悬停高亮，让你的 App 感觉活跃和可交互。添加悬停效果还能让视图更容易被眼睛瞄准。

值得深挖的点

语义颜色的平台适配价值。UIColor.systemCyan 在 iOS、macOS、watchOS 上是略有不同的蓝色。在空间计算平台上，systemBackgroundColor 默认就是 vibrant 的。使用语义颜色意味着你在任何平台上都不需要手写平台判断逻辑。

preferredContainerBackgroundStyle。UIViewController 新增了这个属性，支持 .automatic、.glass、.hidden 三种容器背景样式。.hidden 可以让窗口完全透明，只展示内容本身。

iOS 14 之前的废弃 API 全部不可用。这是一个很好的清理机会——如果你的代码里还有 iOS 13 时代的废弃 API 调用，现在不得不更新了。

代码片段

// 修正颜色：从硬编码改为语义颜色
// 之前：
// label.textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
// 之后：
label.textColor = .label  // 自动适配平台，获得 vibrancy
subtitleLabel.textColor = .secondaryLabel

// 文本框获得凹陷外观
textField.borderStyle = .roundedRect
// 在空间计算平台上自动呈现 recessed 样式
// 条件编译处理不可用 API
#if os(visionOS)
// 空间计算平台不支持 Apple Pencil
// 跳过相关代码
#else
let pencilInteraction = UIPencilInteraction()
pencilInteraction.delegate = self
view.addInteraction(pencilInteraction)
#endif
// 设置容器背景样式
override var preferredContainerBackgroundStyle: UIContainerBackgroundStyle {
    return .glass  // 或 .hidden 实现透明窗口
}

最佳实践

  • 全面使用语义颜色和语义字体，不要用 RGB 值或固定字号。
  • 用系统组件（controls、lists）获得免费的悬停效果、材质和 vibrancy。
  • 条件编译是处理不可用 API 的推荐方式，比运行时检查更清晰。
  • 测试时关注玻璃背景上的可读性——暗色文字在深色环境内容前可能不够清晰。
  • 在 Simulator 中用鼠标点击模拟”注视+手指捏合”的交互。

还有什么值得关注

  • “Meet SwiftUI for spatial computing” 和 “Elevate your windowed app for spatial computing” 是姊妹 Session
  • “Take SwiftUI to the next dimension” 讲了更多 3D 内容在窗口中的展示
  • App 图标的三层设计：背景层、前景层、混合层，会在用户注视时产生视差效果
  • viewIsAppearing 在空间计算平台上同样适用
WWDC 2023