Enhance your iPad and iPhone apps for the Shared Space
System & Services 进阶 20m

优化你的 iPad 和 iPhone app 以适配共享空间

Enhance your iPad and iPhone apps for the Shared Space

2023年6月5日

在 Apple 官方观看视频

一句话判断

大部分 iPad/iPhone app 已经可以在空间计算平台上运行，但 Hover Effect 和输入适配决定了它是”能用”还是”好用”。

这场 Session 讲了什么

大多数 iPad 和 iPhone app 可以在空间计算平台的 Shared Space 中无需修改直接运行。但要让 app 在新平台上”感觉对”，开发者需要关注几个方面。

交互方面，新平台支持两种输入方式：自然输入（眼睛注视+手指捏合）和直接触摸（伸手触碰）。系统控件自动提供 Hover Effect（悬停效果）——当用户注视控件时，控件会高亮显示。但自定义控件需要手动添加 .hoverEffect() 修饰符。

视觉方面，app 保持 iPad 浅色模式的外观。系统使用动态内容缩放确保所有图片和文字在任何角度和距离下都保持锐利。建议使用矢量内容以获得最佳效果。

媒体方面需要注意，平台有多个面向外部和内部的摄像头，但并非所有摄像头都对 app 可用。必须使用 discovery session 来检测可用的摄像头。

值得深挖的点

Hover Effect 的自定义是一个关键话题。对于自定义按钮样式（custom buttonStyle），系统默认会关闭 hover effect，你需要手动重新添加。对于自定义形状的按钮（如蜂巢格），需要通过 .contentShape 修饰符指定形状，否则 hover effect 会覆盖整个矩形 frame。

另一个细节是 tap target 的处理。如果你的自定义控件有比视觉元素更大的点击区域（如视频播放器的大按钮），hover effect 会暴露这些隐藏区域。解决方案是通过 .contentShape 提供自定义形状来分离可点击区域和 hover 区域。

代码片段

// 为自定义控件添加 hover effect
VStack {
    // 卡片内容
}
.onTapGesture { /* 处理点击 */ }
.hoverEffect() // 添加悬停效果

// 自定义形状的 hover effect
Button(action: {}) {
    Image(systemName: "hexagon.fill")
}
.contentShape(HexagonShape())
.hoverEffect()

// 自定义按钮样式需要手动添加 hover effect
struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .hoverEffect() // 必须手动添加
    }
}

// 限制 hover 区域但保持大点击区域
.contentShape(
    .interaction,
    CGRect(x: 0, y: 0, width: 44, height: 44)
)

最佳实践

  • 为所有可交互的自定义视图添加 .hoverEffect()
  • 使用 .contentShape 确保自定义形状的 hover effect 正确
  • 使用矢量内容确保文字和图片始终锐利
  • 用 discovery session 检测可用摄像头，不要假设
  • 游戏类 app 应声明支持游戏控制器

还有什么值得关注

  • 系统最多支持两个同时输入（每只手一个触摸）
  • 自定义手势识别器可能需要适配自然输入
  • 弹窗提示不再是模态的，app 需要处理异步回调
  • 在 Info.plist 中添加 GCSupportsControllerUserInteraction 声明游戏控制器支持
WWDC 2023