watchOS 上的 SwiftUI

（watchOS上的 SwiftUI)

你们好 欢迎大家

我是Matthew Koonce 我是watchOS架构团队的 一名工程师

我非常激动今天有机会 能与我的朋友和同事 Josh Weinberg一起 聊聊如何使用 SwiftUI在你的手腕 上创建一些令人叫绝的用户体验

从功能简单的watchOS 1起 Apple Watch 同watchOS一起 已经有了显著的进步

过去的几年 我们一直在添加 新的API和开发其他功能 你们也一直在提升app的使用体验

但那只是开始

因为在watchOS 6上 我们将整个平台提升到了一个新高度 对于独立app 我们解耦了iOS和 watch OS的用户体验 这一次 你将可以 通过新的App Store直接在 Apple Watch上 下载app 我们也增加了对新的API的支持 比如流式音频 以及延长了会话运行时长

但是我们也研发了一个特别酷的功能 那就是watchOS的 SwiftUI

SwiftUI有强大的 声明式的语法 且已被集成至Xcode的 Canvas中 你现在可以很容易就能创建各种视图

在watchOS上 我们有一个全新的UI框架 同时我们也有很多酷炫的API 你可以用这些新功能创建 你之前无法想象的世界

比如

在这个列表上 我们现在支持滑动删除 和拖拽重新排序

你也可以在watch上使用 SwiftUI强大的 动画特效来创建复杂 可中断的自定义动画特效

现在SwiftUI已经完全 集成至WatchKit

也就是说 SwiftUI视图和已有的 WatchKit接口控制器 可以共存

以及 我们甚至支持 将WatchKit提供的视图对象 直接嵌入至你的 SwiftUI视图层次中 比如这个新设计的 “用Apple登录”按钮

事实上 SwiftUI已经对所有已有的 UI框架的集成提供了强大的支持 我们将有一个关于 这个话题的完整的讨论 我非常推荐你们参加

SwiftUI已被 完全集成至watchOS

即你可以在watchOS 6上 使用所有API和这些年 我们添加的其他酷炫的功能 无论你是在使用一个流式音频app 或是最近加扩展了的运行时间功能 或是你在为这个平台 创建一些新的东西

现在 我们终于有了一个可以在 所有的设备上运行的UI框架 无论你的开发环境是38毫米的 Apple Watch 或是65英寸的电视 所有一切都能用SwiftUI完成

但Apple Watch 是一个特别的设备

在创建app时 Apple Watch有独特规则

为Apple Watch 创建app时 更像是在为你的iOS app 创建一个mini版本

它是你app功能集合的精髓

Apple Watch 是一个高级的个人设备 它让我们更容易获取到重要的信息

当你在iOS app 耗费了好几分钟 或是在杂货店排队时 使用Apple Watch 会更为简单

用户一眼就可以看到信息 轻点几下就能快速回复

所以 你可能会开始为 Apple Watch创建app

但它更像是创建了 一种联系整个系统里 各种不同触碰功能的体验

无论你是在使用Siri相关的功能

在表盘上创建一条动态的提示 来实时查看信息 或是使用complication

对于Apple Watch来说 用户体验非常重要 如何定义这种体验则更为重要

这种体验需要 结合上下文 准时 在正确的时间给予用户正确的信息

以及在手表的屏幕上 简单易懂 设计精巧

它应该精简交互步骤 只需轻点几下就能帮助用户完成任务

那我们则需要先了解SwiftUI

使用SwiftUI 你就能在Apple Watch上 创建你一直想要的上述的用户体验

今天我们就来聊聊在watchOS 上使用SwiftUI的几个方法

首先 我们来看下 如何利用SwiftUI

在app中创建一则高度交互的通知

以及 利用数码表冠的高级特征 来提升用户的感官感受

首先我们来看一个app 这是Josh和我一起研发的

请看Xcode Josh和我一同开发的app 叫做Pop Quiz 这是一个抽认卡app 我可以用它随时学习

现在我打开的是接口控制器

如果你之前使用过WatchKit 你会很熟悉接口控制器 这是另一个接口控制器 但它有点不同

首先这个接口控制器 是WK托管控制器的子类 是由SwiftUI提供的 一类接口控制器

现在 因为它是接口控制器类型 这个接口控制器可以 和其他接口控制器一同使用

比如 我在故事板建立的这个 app初始化接口控制器 让这个接口控制器成为 我的app的入口界面

但是 又比如 如果我想 在我的故事板使用 文章视图 我可以在这里将 我的接口控制器放在其他 WK接口控制器一旁 给WatchKit和 SwiftUI增加了良好的互用性

我也可以使用相同的 WatchKit接口控制器 来推送API 以此来推送这个接口控制器 或者我可以使用 SwiftUI的导航按钮 给一个接口控制器一个目的地 接着从SwiftUI 推送至WatchKit

那么 我们现在来看这段代码

你可能留意到和使用 WatchKit有点不同 这里没有IB渠道

那是因为我们使用了 WK托管控制器和SwiftUI 我们整个app的接口控制器的视图 都由SwiftUI来定义 非常酷

另一个新的不同是 主体属性的使用 这是WK托管控制器 提供的一个新属性 我们在这里覆盖重写

我们可以指定这个body属性 让我们希望的SwiftUI视图 关联至接口控制器 既然如此 这是我们的主题列表 这是我的不同抽认卡的 一系列主题列表 在右侧 你能看到它的预览图

接下来 我么来聊一下主题列表

如名所见 主题列表就是一个列表

这个列表表明 对每个模块… 不好意思 对我的模块的每个主题 我创建了一个导航按钮 它会跳转到另一个 SwiftUI视图 这就是抽认卡列表

它创建主题单元格

我使用这个列表行面板颜色修改器 每个单元格的颜色就是由它确定的

下面的主题单元格 你能看到 代码非常简洁

这里 只用了我主题的标题

字体选择 System Rounded字体 这个字体在 Apple Watch上非常好看

好的 另外一件需要说明的事 是上面的app对象绑定的使用 使用app对象绑定 我能让SwiftUI知道 这个模块是这个视图的数据来源

只要这个模块数据有变动 对应的这个视图就会自动更新

现在 了解了数据如何 在SwiftUI之间传递 是非常重要的一个话题 在SwiftUI中的数据流演讲中 我们会来专门介绍 我非常推荐你们参加 现在 我们需要知道 这就是我如何让我的模块 和我的列表同步的

现在点击这个按钮 让我们来模拟器上使用这个app

这个app可以用了 我能在Xcode的右边滚动它

如你所见 默认情况下 我们的app运行非常好 关于这个列表 我们在后台做了非常酷的东西 比如随着列表的滚动 动画效果很赞 折叠这些单元格 这些内容就像从你的手腕流了出去

关于这个列表 我还有一些事情要做 那我们现在开始吧

首先 我想在每个主题单元格 添加一个标签 来展示我的每个主题下有几张卡片

这样我一看就能知道 还有多少内容我需要学习

现在我们来实现这个功能吧 我需要一个VStack Xcode的编辑器 让一切都变简单了

只需按Command 点击文本 就能快速弹出菜单

选择“嵌入VStack”选项

代码就被添加了 在文本下面 我能添加卡片的数量 你能看到浏览图马上就更新了 现在你能看到 VStack默认居中对齐 但我想要领先对齐

同样 我们可以用编辑器来实现

选择VStack 按Command键 点击它 选择检查器 这个视窗展示了不同类型的修饰符 这样我就可以修改VStack 选择领先对齐选项

浏览图就又更新了 很快我们就完成了

现在 我们在SwiftUI 使用领先对齐和尾随对齐 因为默认情况下 我们要支持右到左的语言 如我的项目中有一个国际化语言文件 是阿拉伯语或希伯来语 默认情况下 整个app的 用户界面将会左右翻转 这样就能默认支持从右到左的语言

在这里 我还想再添加其它一些东西 我想添加一个符号 这样我就能将这些主题联系起来 我想要它出现在我的文字的一侧

我可以用HStack 来实现这个功能

所以 我们再次使用编辑器 按Command键 同时点击这个VStack 选择“嵌入HStack”选项

接着我就能插入符号了 一个表情符号

现在 它看着有点小 我想让它变大一点

所以 再一次使用我们熟悉的检查器 按Command键 同时点击文本 弹出检查器 现在有很多不同的上下文定义的选项 在字体中选择标题字体 这些选择器让一切都变得简单操作 比如添加和修改这段代码 因为它在我的代码库里 添加真实的代码 不会改变我的故事版的POS文件 实际上 它教会我如何写 优质的SwiftUI的代码

短短几行SwiftUI代码 让这些单元格变得更完美了 整个过程我们都能实时 在Xcode右侧查看效果

我构建和运行这个app的需要

此次在Apple Watch上的 迭代真的很厉害

比如说 我们终于可以 快速完成设计流程 我不必在设备上来回检查

好的 在SwiftUI上 还有其他新的功能 特别是 针对于Apple Watch的

这是一个完全新的 滚动样式设计

我们来实现它 首先 我们给每个单元格 增加一点高度

回到检查器

找到高度 我将高度设为100

预览图更新了 现在回到我的列表 这个全新设计的滚动风格 叫做Carousel样式 一行SwiftUI代码就能实现 我们完全改变了列表滚动的方式

如果我现在在预览图中滚动它 你能看到每个卡片 现在都在屏幕中间居中了

这为我们的用户带来了全新的体验 当它们滚动内容时 它能让用户集中注意到 列表中的每个元素 现在 我决定为Pop Quiz 添加这种滚动风格 因为列表上只有不多的元素 使用一个框架来让它们变大 这就是Carousel 列表样式的厉害之处

如果你的每个单元格里 都有交互的设计 使用Carousel列表样式 也是一个好选择 因为它能让我们的用户 能专注 而且更容易选中目标

好 接下来 在列表上 我们也新增了 两个其他的交互功能 都是Apple Watch 新的交互设计

第一个是通过拖拽来重新排序

现在 使用一个修饰符就能简单完成

你可以添加onMove 传给onMove的闭包 告诉它如何更新你的数据库 你只需从一个元素移动到另一个

添加删除 通过滑动就能删除 传统的委托代理 需要好几个方法来实现 使用SwiftUI 只需要一行代码就能创建滑动的动作

现在 我滑动这个列表

动画特效真酷 创建这些有趣好玩的单元格的代码 都在这 就在预览视图的旁边 我找到了一个我想删除的单元格 我在预览视图中只需向右滑就能删除 就是这么简单和强大

好 这就是如何在我们的主题列表中 使用SwiftUI 以及创建之前不可能 在Apple Watch 实现的交互体验

但这只是SwiftUI 和Apple Watch 的冰山一角

想要知道如何将 你的用户体验再提升一个等级 欢迎Josh Weinberg 上台演讲

谢谢 Matthew 那么... Matthew已经聊了 很多使用SwiftUI 在Apple Watch上 创建酷炫的交互体验 不过 就像我们之前说的 Apple Watch上的 用户体验不仅仅只是 在各种app上

如何提升Apple Watch上 的用户体验 首先 我想要谈谈交互式通知 现在Apple Watch上的 交互式通知 是向用户提供 实时和上下文信息首要功能

Apple交互式通知 由两个重要的部分组成 第一个是短看 现在 一个短看被注册了 它直接展示了通知的有效信息 它同时也自动展示了app的图标

短看出现一段时间之后 它会自动转变成长看

长看是一个滚动的界面 它允许你客制化操作主体 和控制下面的通知动作

你现在看到的是Yelp的 一个试用版本 他们利用通知 创建了一个完整的预定流程

我们如何扩展Pop Quiz呢 为了和它的名字相符 我们来创建一则通知 它能将一张抽认卡直接在主体中展示 来保证我不间断学习

那么... 我想从通知控制器开始 通知控制器由 我们创建项目时的模版提供 只要勾选了“包含通知”

和接口控制器非常类似 它... 很新 是SwiftUI的一部分 但它继承自WK用户接口控制器 所以这个新的用户通知托管控制器 为交互式通知提供了入口点 以及允许我们提供 SwiftUI内容

如果你之前使用过 你会非常熟悉 和来自用户通知框架中的 didReceive方法一样

didReceive方法 允许我们从通知中 取出信息 存到我们的接口控制器里 它同时也提供了通知的主体下方 的通知动作

和接口控制器一样 我们也有相同的主体属性 唯一不同的是 当didReceive被调用后 主体属性会被自动作废和重新检验 这样你的通知视图就完全更新了

我们来查看这则通知的样子 让我们跳转到通知的视图

现在 我们在预览视图中 看到通知出现了 但它对我的学习并不是非常有帮助 在底部 是抽认卡的视图 它同时展示了问题和答案

为了做得更好一些 我想要钉住这个视图 使用画布左下角的钉按钮 接着我们回到抽认卡视图 现在我们就能看到我创建的抽认卡了 以及完成之后它在上下文的样子

我已经创建了一些视图了 我可以将它们放到我的抽认卡里 让抽认卡更加美观 第一件我想做的事是用Side 来取代Text 一张抽认卡有两面 所以我们将两面都用Side环绕 现在我们看到抽认卡被 好看的铬合金环绕着 所有我添加的内容 都是我所希望的默认样式

但我现在还是能同时看到两面 这样还是不能很好的辅助我学习 我想要用一个我自定义的容器 来取代这个VStack 我称它为翻转视图 翻转视图提供了 所有的变换和互动体验 我们马上就会看到 所有的这些源代码我都会在会议后 开源为式例代码

我们在模拟器试运行下 看看通知是什么样子 我们可以用Xcode的通知方案 来创建和运行项目 我们看到短看出现了 我们直接过渡到长看 它看上去和预览视图中的一模一样 下面的通知动作 如我们所期待的一样通知的交互顺畅 我可以点击抽认卡翻转它 甚至直接在通知主体中拖拽它

这只是一个非常简单的问题 我已经解决了

我们用了创建这个app 相同的手段来用通知 创建更加丰富好玩的 用户交互体验

最后 关于Apple Watch 我还想再聊一点 我要聊的是 数码表冠 现在 你已经可以 利用数码表冠的优势 在WatchKit app使用 WKCrownSequencer的API

这个API允许你在表冠中做一些 比较有限的事情 数码表冠 但我们想要你们创建 和iOS里app 一样的用户界面

在Apple Watch Series 4 我们介绍了全新的触觉表冠 触觉和数码表冠在屏幕上 提供了可以滚动内容的功能 它为每个元素提供了优异的 阻力和重量感 让内容可以更加适配数码表冠 它比以往更加强大和优异

我们已经在我们自己的app中 使用了所有新的功能 比如 在锻炼时 我们有这样的列表 当你滚动这些元素时 它们都附有自重 或着当你自定义一个时钟时 你可以滑动这些选择器 它能提供一个触觉回馈 SwiftUI提供了系统组件 所有的这些都可以直接用 比如列表、选择器和滚动视图 你都可以使用

但当你要创建一个更客制化的内容时 SwiftUI的一些新的修饰符 会帮你实现你的愿景

我要聊的第一类自定义界面 称为自由滚动界面 在自由滚动界面中 你不必在你的内容中创建具体的停顿 相反 你可以随着数码表冠 在序列中随时停下来

实现像这样的效果 你需要使用由SwiftUI提供的 新数码表冠旋转修饰符 它非常简单 只需3个参数 第一个我们需要知道的是绑定 像其他SwiftUI组件一样 需要绑定 它提供了数据来源 让这个修饰符与系统产生关联 在自由滚动列表中 我们想要绑定我们正在移动的 这个视图的偏移量

我们也需要告诉数码表冠 from和through的值 它限定了数码表冠移动时 序列的移动范围

我们来看下实际操作 当我们移动这个代表数码表冠 的小红点时 在数码表冠的序列中橡胶传送行为 的限制下 会得到线性反馈和很赞的触觉反馈

下一次 当你想要创建更客制化的 比如 在最新的计算器app里 的这个选择器 这里 我们不再滚动内容 相反 我们在两个元素中选择 使用数码表冠来移动到另一个

同样使用完全相同的数码表冠 的旋转修饰符 这些参数也一样 现在 这些参数… 我们不去查看可滚动的列表 我们在人数之间选择 从1到15 这里的新参数是by by参数允许我们定义序列 数码表冠的序列 的运行幅度 为你提供触感反馈和下落表现

为了查看效果 我们现在来看 当我们从某个元素移动到另一个时 数码表冠会提供的触感反馈 非常简单

最后 当你想要创建更加客制化的 比如 闹钟中的界面 数码表冠正在控制一个视图 围绕着圆旋转 它不被序列所限制

现在 我们回到 数码表冠的旋转修饰符 这个修饰符使用的参数也一样 我们之前聊过 但我想介绍新的两个参数 第一个是灵敏度 灵敏度允许我们定义 使用数码表冠控制旋转的力度 来从某个元素移动到另一个 最后一个是连续参数 这个参数允许我们定义 不再想要数码表冠在序列中停下

实际操作中 在回退和同一方向的持续操作上 交互流程非常好 序列不再有限制

最后 让数码表冠获得输入 我们需要告诉系统如何获取 为了实现这个功能 需要了解可焦距的修饰符 如果你用过我们提供的其他UI框架 你会非常熟悉可焦距性 这和UIKit里的UI聚焦引擎 或第一响应者非常像 我觉得大家一定都用过

只需添加可焦距修饰符 我们就能使用数码表冠 来更新人数选择器 轻点这个小按钮 持续使用表冠来更新当前选中的视图

想要了解更多关于可焦距性 如何工作的内容 可以参加 所有设备中的SwiftUI演讲

我们如何利用它的优势 以及在Pop Quiz创建一些 非常酷的用户体验 我们回到示例

Matthew已经展示了一个 非常完美的卡片列表 在这个app的入口点… 或app入口的主题列表

但我想要创建一个非常酷的列表 现在 我们在一个可滚动的视图上 已经有一个查看抽认卡的列表 可以在预览视图中看到 但如果我们有一个…不是更好吗 非常酷 如果完全使用数码表冠来 客制化交互过程

我首先要用ZStack 替换scrollView 现在 我们看到 抽认卡不再垂直排列了 它们都重叠在一起了 但我可以保证它们还在那

接下来 因为我们要使用数码表冠 绑定其他数据 我们需要使用可焦距修饰符 和数码表冠的旋转修饰符

现在 这里有很多参数 但它们都是我们之前知道的 完全一样的参数 我们来一个个看 首先 我们需要 一个绑定或是数码表冠 更新数据的数据源 为了能够实现目标 我们需要提供一些状态 这个自定义的交互会在两者间移动 我想要提供当前的序列号

接下来我们给状态提供绑定 回到数码表冠的旋转 这里 我想使用绑定的动画版本 这样数码表冠就会更新 会已动画特效的形式更新这个视图

接下来我们需要确认我们开始的位置 以及我们在序列中到达的位置 这是序列中倒数第二张卡 来确认我们到达的位置

接下来 我们需要确认by参数的值 来规定每张卡之间的跨度 和精度 在这里 我想使用低精度 这样每张卡都能得到一些重量 这样我能找到我想要看的那张卡

最后 为了得到我们想要的效果 我已经写了这张卡片的转换修饰符 这个自定义视图的调节器 就是我已经写好的 它可以实现3D效果 和允许卡片随着当前序列号更新 我们传给修饰符当前的序列号值 所以每当视图重绘时 它都会更新

就是这样

现在我们构建一下 运行一下这个app

在模拟器里出现了 我们看到了 和Matthew最初展示 的一样的视图

我们来浏览这个列表 选择我们要看的那个 现在我们可以使用数码表冠 滚动浏览这个界面

就是这样 如果有人知道这个问题的答案 请告诉我 我真的很想知道答案

很酷 我们已经知道 如何使用SwiftUI 创建良好的用户体验 以及利用 Apple Watch提供的 各种功能来实现我们的目标 但不仅仅只是这些 现在你能在我们所有的平台 使用UI框架 你能运用你学到的概念 创建属于你自己的 iPhone app 直接用于Apple Watch上 创建和优化体验 我们很期待看到 你在Apple Watch上 一直渴望创建的界面

今年的演讲议程中 有很多关于SwiftUI的讨论 想要知道如何创建这些3D特效 你可以参加 用SwiftUI 建立自定义视图的演讲 祝你在接下来的会议中过得愉快 谢谢