文章引证来历：WWDC23 session Elevate your windowed app for spatial computing

概述

• SwiftUI 能够将多渠道运用程序引入 visionOS 和 Shared Space(同享空间)。SwiftUI 代码能够主动适应以支撑 visionOS 渠道的共同上下文和呈现。经过不局限于更新自定义视图、改进运用的 UI 以及增加特定于此渠道的功用和控件等办法，能够使窗口运用程序在这个新的空间渠道上真正引人注目。凭借 Spatial Computing(空间计算)，能够使运用程序在物理空间中存在，从而实现全新类别的令人惊叹的三维体会。

关键词

• SwiftUI、Shared Space、Dynamic Content scaling、Vector Assets、Vibrancy Material、Hover effects、Ornaments、TabView、Toolbar。

SwiftUI

前言

• visionOS 从开始构建时就考虑到了 SwiftUI。事实上，在 Vision Pro 中的大多数体系运用程序都是用 SwiftUI 编写的，例如 Keynote、Freeform 和 TV，它们都将其熟悉的界面带入了你的的物理环境中。虽然这些运用程序看起来与 iPad 运用程序类似，但它们充分利用了该渠道上的新设计语言和交互办法。

  本文将以一款 支撑 iPhone、iPad、Mac、和 Apple Watch 渠道的 Backyard Birds 运用为例，叙述怎么将运用引入到 Vision Pro 中以及怎么润饰、增强你的运用的交互体会。

  

  图 1 – Vision Pro 中的 Keynote

  

  图 2 – Vision Pro 中的 Freefrom

  

  图 3 – Vision Pro 中的 Apple TV

SwiftUI in the Shared Space(身处同享空间中的 SwiftUI)

将 App 构建到 Vision Pro 的 Shared Space(同享空间)

• 1、 Xcode 中挑选主 Target，General->Supported Destination，点击+号，挑选 xrOS Device， 挑选 Enable。

  

  图 4 – Xcode 中启用 xrOS Device（1）

  

  图 5 – Xcode 中启用 xrOS Device（2）

• 2、主 Target scheme 挑选 xrOS Device，充构建运用程序即可。在模拟器中，当我四处移动光标时，运用程序会像在 Vision Pro 上的眼睛的移动的交互反馈相同给予你响应。例如，当光标移动到某一个可选项时，光标会呈现 Hover effects(悬浮作用)。

  

  图 6 – Xcode 挑选 xrOS Device 作为运用构建方针

  

  图 7 – Backyard Birds 构建成功后 Vision Pro 模拟器作用 & 光标移动到可选中时的 Hover effects 作用

运用特性

Glass backgournds(玻璃布景)

• 1、默许由运用程序的窗口供给。
• 2、会依据照明条件和背面物体的颜色调整对比度和颜色平衡。
• 3、没有 light 和 dark 外观的 style 区分。不管运用处在物理空间中的何处，玻璃作用都会主动保证运用坚持明晰可读状态。

Polishing your app(润饰你的运用)

Dynamic content scaling(动态内容缩放)

• 与其他 Apple 渠道不同，处于 Shared Space 物理环境中的运用，其没有带有物理像素的屏幕来定义内容能够制作的质量。别的因为运用程序能够放置在任何地方，它们可能会被推得离你很远，或被拉近，甚至从某个视点观看，在此过程中，体系经过动态缩放内容来保证运用程序在所有场景下都看起来明晰可见。对此，对于内容就用了动态缩放的要求。

1. Prefer vectors over bitmaps：传统的位图，在缩放的时候会下降质量，为了坚持质量，要让体系做到这一点，咱们必须供给矢量资产。

2. Text and SF Symbols are vectors：文本和 SF 符号默许是矢量的，可缩放。

3. 在 Xcode 中设置矢量资产

   1. 将图片的 individual scale 切换为 single scale。

      

      图 8 – 将图片资源的 individual scale 改设置为 single scale

   2. 将图片已设置的 2x、3x 等所有资源移除后，挑选图片对应的矢量图，并勾选 Preserve Vector Data，以答应图片进行恣意尺寸的缩放，该装备所有渠道都支撑。

      

      图 9 – 挑选矢量图资源并勾选Preserve Vector Data

      视频 1 – 矢量图片的装备及缩放预览作用

适配 Vibrancy 以让内容以最佳方式展现：

• Vibrancy 原料引入了额定的对比度和亮度，以保证 Glass 作用顶部的内容不管透过什么都明晰可见。默许情况下，所有内置控件和容器都运用 Vibrancy 原料，假如咱们运用的是规范控件，则无需额定的作业。

  

  图 10 – 体系空间 Vibrancy 原料作用

规范的语义风格：

• SwiftUI 的语义款式在每个渠道上主动采用适当的外观。在 Vision Pro 上因为 Glass 布景会跟着环境光改变，运用这些语义款式能够使咱们的内容更明晰易读。

  

  图 11 – SwitUI 中 Text 控件在 Vision Pro上的 4 种风格

Remove Solid Color(去除固定颜色装备)

• 下图中的植物选项卡显现所有植物的网格，因为在代码中写的是固定的纯色，导致植物后面的这些圆圈看起来很亮而且不合适，在物理空间中，植物网格应该适应物理空间的布景，有投过去的作用。

...
// 植物网格布景
var backgroudColor: Color {
    if colorScheme == .dark {
        Color(white: 0.6)
    } else {
        Color(white: 0.8)
    }
}
// 植物网格布景设置
var body: some View {
    PlantIcon(plant)
        .background(backgroudColor, in: .circle)
}
...

图 8 – 植物网格纯色布景作用

• 运用运用语义填充颜色替换纯色：替换后，可从 13~15 中发现，网格布景在每个不同光照的房间中，在 Glass 布景下，都有着很好的作用。

     ...
     // 植物网格布景设置
     var body: some View {
         PlantIcon(plant)
             .background(.fill.tertiary, in: .circle)
     }
     ...
  

  

  图 9 – 植物网格语义填充色布景图(1)

  

  图 10 – 植物网格语义填充色布景图(2)

  

  图 11 – 植物网格语义填充色布景图(3)

提升可交互组件的操作性

• Vision Pro 中与 App 交互的 4 种办法：眼、手、光标、无障碍拜访。

  • 最常见的交互是直接捏合手势配合凝视控件并将手指合拢以履行点击。假如某个运用程序离你很近，你只需伸出手触摸它就能够直接与其进行交互。假如你装备了触控板，则能够将其用作精确输入的指针。无障碍技能的 VoiceOver 和 Switch Control 等工具使都每个人能在运用运用程序时获得同样出色的体会。

    

    图 12 – Vision Pro 中与 App 交互的办法

• Hover effects：

• • Vision Pro 中，当用户用眼睛注释到某个可交互的体系控件时，控件会高亮以显现你能够与其交互，这种悬浮作用称为 Hover effects。它有以下的有点：
  • 1、使运用感觉响应迅速。
  • 2、给予你更多与 App 进行互动的信息。
  • 3、体系的规范控件自带 Hover effects 作用。
  • 运用 SwiftUI 自带的 hoverEffect 为植物网格布景增加 hover effects 作用。

    

图 13 – 设置内容圆角和布景 hover effects 作用

Hover effects privacy

• 1、悬浮作用旨在维护隐私。
• 2、这些作用由运用进程之外的体系履行。体系悬停作用是使你的运用程序对用户所凝视的方位做出反应的唯一办法。
• 3、运用程序仅接纳交互告诉：只有当有用户捏手指、直接触摸你的运用程序或将手指或指针悬停在你的控件上时，你的运用程序才会被奉告该展现悬浮作用了。

Brand new concepts(全新的功用)

Ornaments 之 TabView

• 不同于传统的 iPad 运用中的 tabBar、toolBar，TabView 独立于 App 主窗口单独显现。

  

  图 14 – 体系 Photo 运用左边 TabView 收起作用图。

  

  图 15 – 体系 Photo 运用左边 TabView 打开作用图

• 将 运用的 NavigationSplitView 改造为 TabView，如下图：

  

  图 16 – Backyard Birds 原有运用 NavigationSplitView

  

  图 17 – Backyard Birds 将 NavigationSplitView 改造为 TabView

  

  图 18 – Backyard Birds 改造后 TabView 显现作用-打开

  

  图 19 – Backyard Birds 改造后 TabView 显现作用-收起

Ornaments 之 Toolbar

• Toolbar 同 TabView 同归于 Ornaments。它独立显现于运用底部，和TabView 相同主动供给玻璃化的胶囊布景，有着对应的 Hover effects、点击响应等作用。

  

  图 20 – Ornaments 之 Toolbar 作用

自定义Ornaments

• 经过ornaments()函数调用，能够实现自定的 Ornaments。

• attachmentAnchor：确定 Ornaments 将附加在你的的运用程序中的哪个方位。这里是底部。

• contentAligment： 答应你挑选装饰物的哪一部分与 attachmentAnchor 对齐。这里是居中对齐。

• glassBackgroundEffect()：针对自定义的控件，需求自己调用办法以启用 Glass 布景作用。(体系控件自带)

  

  图 21 – 自定义 ornament

图 22 – Backyard Birds 改造告诉为 Ornaments 作用图

进一步

• 你还能够经过《Take SwiftUI to the next dimension》session 了解 3D 内容的体积和空间体会的沉溺式空间；经过《Go beyond the window with SwiftUI》了解怎么将你的 app 扩展到窗口之外。

• 相关的其他 Session：

  • Meet SwiftUI for spatial computing
  • Meet UIKit for spatial computing
  • Run your iPad and iPhone apps in the Shared Space
  • What’s new in privacy