掌握 Xcode 预览

（掌握Xcode预览）

各位下午好 欢迎来到 掌握Xcode预览演讲 这周你可能在许多地方 都听过Xcode预览介绍 主题演讲 国情咨文 还有一些关于SwiftUI 的演讲中可能都听过 但今天 我们关注的是 Xcode预览本身 我叫Anton 待会我会与 我的同事Nate一起介绍 Xcode预览是什么 它是如何运作的 以及在你的工作中 如何运用 无论你是用SwiftUI 创建新的app 或是用UIKit或AppKit 来维护已有app 让我先说一个小故事

一位设计师拿着他为你的 迪士尼app设计的界面样板找到你 你拿到样板 拿回办公室 开始创建 完成后再拿给设计师看 你运行代码 浏览之前做好的许多见面 找到这个界面 然后把该界面给设计师看 然后他们说 看起来不错 但是 我现在看这个做好的界面 我觉得这个按钮可以再蓝一点 没问题 你退出app 打开Xcode 开始编辑 然后再次运行 再从一堆界面中 找到刚刚创建的新界面 拿给设计师看 他们又说 好多了 但是

文字部分我觉得可以 可以再紧凑一点 你觉得呢 你应该知道这个故事是什么意思 这种弄来弄去的反复 其实是一个正常的过程 我们每个人都经历过 这也是我们创建好看的app的方式 但是这就消耗太多时间了 而且浪费时间的也不是反复的过程 不是这里小改一下 那里小弄一下 也不是得到反馈的过程 而是创建 运行 配置 浏览 再验证你刚刚对app 做出的那些更改是否达到预期效果

所以 我再举一个例子

你和设计师交流结束 你对新界面也很满意 你把它拿回去 但是你作为开发者的工作还没有结束 因为作为开发者 你肯定希望你的app能够正常运作 然后 正常运作的意思是 不管用户在什么样的 配置上运行你的app 新界面看起来都要很好 比如 在深色模式下要好看

或者是在不同动态大小

甚至是不同设备上都要好看

而且验证你的UI和app 在不同的情况下看起来都一样好 还是有一定难度的 之后还要将你的app 上架到App Store 作为开发者这个过程我们都很熟悉了 我们Xcode团队也一直在 思考这个问题 我们得出了解决方案 那就是Xcode预览 Xcode预览是 Xcode的新功能

该功能可以大大减少 构建 运行和配置视图 以验证所做改变的时间 让你能够专注于你真正想做的事情 那就是创建好app

但问题是怎么做 这一切都是如何运作的 那么你在app中启用预览时 Xcode会以一种 特殊方式来创建app

Xcode知道 你正在处理的是哪个视图和哪个文件 它就只会编译该文件 和该视图 与app中的 其他部分分开来 然后使用Swift的动态替换功能 将该实现应用于app

因为这些代码 对于每次更改进行重新编译 比重新编译整个app 工作量要小得多 Xcode可以针对你所做的 每一项更改不断重复执行此操作 也就是说对更改进行的反馈会更快 但是这些变化Xcode 还可以进一步优化 对于仅涉及字面值 如字符串或数字的更改 Xcode不会做出重新编译

只会将新值传入正在运行的app中 你就可以获得即时反馈 就像可视化编辑工具那样

还有更为重要的一点是

Xcode预览并不代表 Xcode在运行app时 所见的视图 它实际上会构建和运行代码

所以在你运行app时可用的上下文 在预览视图中也可用 所以如果你有自定义资产 你就可以在预览中使用并进行渲染 如果你想要在app中 使用自定义逻辑 当然每款app都有自定义逻辑 你也同样可以使用 甚至是运行配置 比如设置用户默认值 在预览视图下同样可以使用

所以现在的问题是 Xcode怎么知道要向你展示什么

其实 告诉Xcode 要显示什么视图以及如何进行配置 只需要几行代码 你需要做的就是实现一个 符合PreviewProvider 协议的小类型 这也是SwiftUI框架的一部分 这部分有一个要求 就是你实现的预览属性 之后就会返回一些内容 而你得到的返回 都是取决于你

因为这些代码也是你app的一部分 它与app中的其他部分一起编译的 配置代码也是一样的道理 和视图一样 所以在这里你可以使用自定义逻辑 自定义资源甚至运行配置 运用代码来配置视图 还有许多好处 比如 这是SwiftUI代码 配置代码只是SwiftUI 如果你知道如何 创建SwiftUIView 那么你就知道如何配置该视图

你也可以先写一个预览 将它放在源代码管理中 并与团队共享 这样你团队都可以从 你写的预览中获益

最后 因为你的变更 视图会不断变化 app也在不断变化 当视图或是它的API变化时 编译程序可以确保 预览与视图保持同步 这样 你就知道你预览的内容是正确的

所以这就是预览运作方式的简要介绍 接下来就讲讲如何配置预览 来充分利用预览的优势 有请Nate

Anton刚才说到预览其实是代码 现在我就来说说怎么写这个代码

我们Xcode预览团队 有一次到动物园去玩

动物园里有很多动物 我们想确保我们看到了每一个动物

作为开发者 我们实在忍不住想要创建一个app 来追踪动物园里的动物

我就担起了做这个app的任务 它的主要用户界面 就是动物园里的动物清单列表 在该列表中有每个动物名称

我来给你们看看现在我做到哪了

在画布中 你可以看到动物的预览

因为iPhone 10S的 运行目的地已经选择 我们在动物视图看到的 chrome就是这样的

但是我们想让该视图 在各个设备上看起来都好 我的手机是iPhone SE 我可以将运行目的地 更改为iPhone SE 但预览API还提供另一种机制 准确来说是预览设备

你可以将想要显示预览的 设备名称输入该机制 几乎同一时间 你就可以在画布上 看到设备显示该视图

现在我再看看设备 iPhone SE显示动物名称图 我发现了一个问题 最右边的文本被截断了

我们来解决这个问题 为此 我将HStack 改为VStack

画布马上就更新了 这正是我们先要的样子

Anton的手机是 iPhone 10r 我们想要确保该动物名称 在他的设备上也能正确显示 我们可以改变我们传递给 预览设备的参数 但是方法更简单 具体来说 我们可以将此视图 嵌入到一个组中 按住Command键并单击 动物名称图 然后向下滚动到嵌入组 之后添加动物名称图的第二个实例 这次我们用iPhone 10r 调用预览设备

我们可以看到 在画布中 该视图在两个设备中运行

动物的学名一般是用斜体写的 我们现在就来更改

现在画布中 我们就能验证更改是否正确 两台设备都可以 真的太简单了

我们可以看到在用户使用的设备上 我们的界面预览 对于像格子这样的小视图 也能让你更加专注于你想要的东西 摆脱多余的chrome 为此 预览API提供了这个方法 预览布局 现在这个预览布局方法

可以传递三个不同的参数 首先你可以指定设备 这实际上是默认使用的 也就是现在画布上的内容 然后 你可以指定 预览显示的大小 如果你要将你的视图 嵌入到特定大小的更大的界面上 这就十分有用了 最后你可以使用适合大小功能 如果你希望视图可以根据内容 确定预览大小 那该功能十分有用 因为动物名称单元格 要被嵌入到列表中 该列表允许动物单元格 根据其内容垂直调整大小 我们来使用适合大小功能

画布马上进行更新 显示我们想要的效果

我现在点击画布右下方按钮 来将视图放大

这两个文本 红狐和它下面的所述科 犬类

有点太模糊了 我希望它们看起来是清晰可见的 所以我要将红狐加粗 我对该文本点击Command 向下滚动到检验操作 将字体加粗

源编辑器添加了新代码 预览也进行了相应的更新 看起来不错

很多用户喜欢用动态字体大小 我们来看看当用户将字体 调到最大的时候 我们的界面看起来是什么样的

因为预览API是 SwiftUI的一部分 我们在写预览的时候 就可以利用SwiftUI 在这种情况下 我们可以使用环境修饰符

并将字体类别键径值 调到最大

这样就能轻松改变 我们正在看的字体大小 还有更棒的一点是 我们可以一次看到 所有不同字体大小下的界面 我们要做的就是将该界面嵌入一个组 对于每一个大小 创建一个新的动物单元格 但是重复工作太多了 还有更好的方法

SwiftUI有一个 应用于所有功能 我对动物单元格点击Command 下滑选择重复

现在对于0到5 我们都得到了对应的预览 但是我想要的 是每种字体大小 都有预览 而且我想要每种情况的 大小类别键径 都在环境中指定为对应的值

就像这样 你可以看到在画布上 每种字体大小都显示出来了

完成之后 在最小的字体那我发现一个问题 标题 也就是通俗名称 不是我想的那么显眼 让我们将它放大一点 我再次在视图上点击Command 这次实在画布中 再选择检查操作 改变标题字体

在源代码编辑器中插入代码 画布上也有相应的更新 看起来不错 你可能会遇到一个问题 当你在画布中有多个预览 很难区分 你要分清楚代码中的配置 预览静态属性的实现 对应的是画布中的哪个预览

为了解决这个问题 预览API提供一个功能 叫做预览显示名称 以免你想要使用这些 文字大小的名称 在每个预览的下方 我们就可以看到文字大小了

是的 真的很棒

预览API非常简洁且功能非常强大 接下来要讲的是 如何利用Xcode功能 来发挥预览的最大作用 有请Anton

我来继续讲这个演示 把Nate做的这个动物清单创建完 我要做的第一件事 是把注意力放到红狐图像占位符 我们发布此款app的时候 我们希望这些数据是来自于 我们将要提供的网络服务 但是我们还没有构建网络代码 所以我还没有这些数据 来填充我的视图 所以我先使用占位符代码 这对字符串来说会容易一些 就像现在我们对狐狸做的这样 但是对于图像来说就有些难度了 因为我可以在预览中加入 占位符资产 但是 但这也意味着我们要将此资产 与app一起发给用户 我不想这样 我也不想搞乱我的二进制文件 所以今年Xcode就出了一个 新功能来帮助解决这个问题 叫做开发资产 我现在就来展示这个功能 先打开项目编辑器

就在目标下面 下滑到开发资产 你可能已经注意到 我预先将预览资产 配置成目录 这里会保存所有图像 如果你是从头开始 并且使用的是新模板 它会自动预配置 但如果你编辑的是已经存在的app 添加这个也很容易 现在我将预览资产 加入到资产目录 就在我的预览数据下面 这是我的资产目录 这里已经有一张红狐的图片了 我就用它作为占位符 然后我打开动物名单元格

然后

我们可以预览

占位符已经是图片名称了 我们要做的就是把这个文字改成图像

图像就会在预览中出现了 看起来不错 但是我还想对它进行一些视觉处理 让它更加脱颖而出 我可以用SwiftUI代码来做 这看起来不错 有阴影和叠加 看起来不错 我们来看看代码 现在单元格的视图大部分 都被图像处理代码支配 我处理完图片 我也不想丢失这些细节 所以我Command 点击图像来进行提取 点击图像 选择提取视图 Xcode就会在下面的同一文件中 创建一个新的SwiftUI视图 我将其重新命名为动物图像

再给它一些参数 也就是图片名称 滑下来 这是我的动物图片 很简单 删除输入

更新预览

谢谢 我也觉得很厉害 你可以看到预览其实没有变 再划上去看看动物单元格是什么样的 现在就清楚多了 我也可以专注图像处理以外的细节了

现在看起来很好 请注意 我们现在 关注的只是视图本身 但它不会以这种方式出现在用户面前 用户只会在列表的上下文中 看到这个 所以现在我来做这一点 实际上我在这个 动物列表文件中已经开始了 之前我们还没有动物单元格 所以我创建了一个简单的 接收动物的列表 每个动物都会在单元格中展示 所以我用刚刚创建的新的 动物单元格来替换该代码 这里显示出来了 这和用户看到的十分接近了

但是没有动物园只有一只动物 所以 我用一些数据来填充该单元格 这和用户看到的就很接近了 那么要怎么做呢 向下滚动到预览配置代码 你可以看到我用只有一个元素的 数组来填充列表 所以我可以在这里进行硬编码 添加一些这个 三个单元格就会出现 很接近了 我可以继续这样填充 但这过于均匀 和用户看到的也不完全一样 动物名称有长有短 颜色也不一样 我真的很想知道它会是什么样子 那我还有其他选择吗 我还可以做一件事 因为预览代码是作为 app的一部分运行的 我实际上可以启动网络代码 点击网络 获取一些数据来做填充 可以这样做 但这样做会有一些问题 首先 我还没有创建网络代码 所以无法实现 第二 即使我创建了还是会有问题 因为每次我编辑该界面时 我必须要在线 且必须提供服务

这不是一个好方法 所以我想做的是获取数据并缓存 而且不用app中的 其他组件就可以看到视图 所以我已经提前做好； 我创建了JSON文件缓存 我来给你看看 预览数据下面就是一个 简单的JSON文件 就是一些动物列表来填充我们的数据 我能做的就是 我并不想把这个也一起传给用户 所以待会我要把它 添加到开发资产 但现在先暂时跳过 现在它已经在这里了 我只需要加载 我还要在预览代码中添加一些代码 从主包中加载JSON 并使用JSON解码器 来解析我的数据 现在我就有一组数据了 我可以 我把这个关了 我可以用

Self.sampleAnimals 来替代

更新预览 UI就会用样本动物进行填充

谢谢 这就比较像用户看到的界面了 但是在布局上马上也出现了一些问题 比如 这里的雪豹太长了 这个名称应该顶端对其 另外一个问题是 标题太大了 你现在看还可以 但到了这里就有点空 我想顶部和底部的字再大一点 因为这些改变都是在动物单元格里的 所以找到动物单元格进行连接

看看发生了什么 刚刚的预览不见了 我回到了单元格的上下文 所以列表不见了 我想在找到该单元格出现的 上下文的同时进行编辑 也就是该列表 我可以在此处添加预览 来预览该列表 就像我之前说到的 你可以提供任何内容 作为预览的一部分 但这也就意味着每次我要看 这里面的东西时 我要一遍又一编地 复制相同的代码 所以还有更好的方法

我来告诉你可以怎么做 再次回到动物列表 会看到和之前一样的预览列表 用到左下角这个固定按钮 点击 你就会看到 它将当前预览固定到此预览中 因为我是在不同的文件中进行导航的 我们来看看会发生什么

此预览不变

谢谢

这里有一个标题告诉我 现在的预览和之前 文件里的不一样 这是动物列表里的 所以你知道 如果我想从这个文件中获取原始预览 我就直接滑下去 一切都还在 我不需要做任何上下文

现在我知道要做什么 对VStack点击Command 调用检查 就可以检查和改变这里的对齐方式 放大一点

我们来看看

这有点太大了 我们回去 再放小一点

看起来好多了 我喜欢 所以就让它这样了 下一步就是 是一个操作列表 你可以在每个 单元格被选中时使用这些操作 现在我要进行单元格实现 在另一个叫可选动物单元格的文件中

因为我不想破坏我的数据 我的动物单元格模型数据 不想加一些来自UI的东西 我添加了一个小包装程序 把这些数据都包起来 再向其添加选定的点 我再用这个 叫可选动物单元格的另一个视图 它要做的就是接受模型 显示我的动物单元格 检查选定点并显示操作 这些小图标 会给我更多的信息并拍照

如果我取消固定预览 你可以看到我为此单元格 创建了两个预览 一个是选定状态 另一个是未选定状态 反了 这个是未选定的 这个是选定的

这是一个好方法 但同样我希望在列表 上下文中看到这些 所以我要将选择也加入列表中 所以定位到动物列表

SwiftUI处理这样的数据的 方式是使用State变量 所以我在此添加以储存数据 就是我现在选择的数据

再用一些代码 进行翻译 因为该数据指定了所选模型 但不管单元格是否被选中 它都有一个布尔值 我要把它也加上去

现在我做了两件事 我要用这些可选动物表格

来替换动物列表

我只需要这样 更新预览

你可以看到

没有什么变化 为什么呢 因为 这里的选则是可选的 但是我的列表默认是没有被选中 所以看不到我刚刚改的东西 我也可以点击实时模式按钮

用实时视图查看页面 如果我点击

选择就出现了 和我想的一样 但如果我想创建静态 谢谢 但如果我想创建静态预览 来提醒我选择状态是这样的 所以当我对这些 进行更改时 我不会忘记 验证更改后的选择看起来是什么样的 我可以在这里创建静态预览 但是要对代码做出一些更改 因为这些数据是比较私密的 我无法从预览中做出更改 那么我该怎么做才能展示这个预览呢 我要做的就是将其移动至 我可以设置的绑定中 我将通过引入新视图来实现 我要在动物列表中创建私密视图 会运用于所有的实现中 我要叫它内容 因为这是私密的 所以只在该文件夹中可用 然后采用我刚刚构建的所有实现 移动到我刚刚声明的视图中 最后一点是 是为动物列表添加主体实现 根据是其内容 这样做只是证实了我刚刚 声明的内容视图 运用于动物 并创建一个绑定到选定的状态 现在可以看到预览中的改变 而不是预览动物列表了 预览的是动物列表内容

当我更新后

可以看到选定出现了 实现了选定的静态预览 现 在 我在这里设置动物列表预览 同样可以验证未选定时 动物列表看起来是什么样的 而且 我仍然可以使用 Live Vote验证过渡和动画 并对预览进行编辑

谢谢

现在我们介绍了XCode预览 以及如何在SwiftUI中使用 但是它能做的还有更多 下面欢迎Nate进行讲解

（演示） 谢谢Anton

并不是所有人都是从这周开始 用SwiftUI写一款 全新的app的 可能有些人在 App Store已经有app 或者是有已经做了几年的app了 因为SwiftUI与UIKit、AppKit 和WatchKit都有很好的集成 也因为API是 SwiftUI的一部分 Xcode预览在这些框架下 也能很好地工作

在我们的动物园app 当你点击详情按钮 也就是Anton刚刚在 单元格添加的按钮 就会展示选定动物的细节 该界面是用 UIViewController写的

叫动物视图控制器

让我给你们看看代码 我先关闭画布 按Command 返回 再转到动物视图控制器

我给你们看看视图控制器是怎样的 但是先不急创建和运行 我先创建一个预览 现在预览还只是代码 所以我们可以继续在此文件中 与此UIViewController 一起创建预览 但在这个例子中 我想创建新文件 按Command-0 打开项目导航器 之后在我想要的组中添加新文件 右击 选择新文件 SwiftFile 输入名称 动物图片控制器预览

预览API是 SwiftUI的一部分 所以要编写预览 你需要导入该框架

为了创建在画布中显示的预览 你需要为预览提供程序协议 添加一致性 在该例中 我要创建一个全新类型 来确定该协议 将其命名为动物视图控制器预览 现在 预览提供程序协议只有一个 必须实现的要求 即静态预览属性 为实现该属性 我要返回某些视图 在该例中我们需要嵌入 动物视图控制器中的视图

SwiftUI支持以 Representables的形式 将UIViewControllers 嵌入到SwiftViews中 欲了解更多详情 请查看集成SwiftUI演讲 在我们的例子中 因为我们想要 UIViewController 我们想要添加一个可表示的 UIViewController的一致性 方便起见 我继续操作 将其与 PreviewProvider一起添加 至动物视图控制器预览类别

为了达到目的 UIViewController 可表示的协议 还有三个要求需要实现 第一种是指定要表示的 UIViewController 类型 在该例中就是动物视图控制器 接下来 我们需要描述如何创建这些 带有上下文的 动物视图控制器 该上下文包括 用户是在明亮或是深色模式下使用 或是动态字体的大小

在该例中 我们已经在 UIStoryBoard 添加了包好的一类 我要从中加载动物视图控制器

我们要实现的第三个要求 就是更新 UIViewController 这允许我们根据环境的变化等 改变视图控制器的外观 在该例中 我们需要创建预览 所以我将继续将此实现留空

现在我们已经符合 UIViewController 可表示的协议 我们已准备好实施预览的方法

具体来说 我们将返回符合 UIViewController 表示类型的实例 也就是动物视图控制器预览 在这几行代码 你可以在Xcode中看到 UIViewController的预览 我们来看看 我要关闭项目导航 再打开画布 按Command-选项-返回

因为我们在源编辑器中添加了新方法 所以我们要重新创建 在画布中 UIViewController预览 是用Swift写的 谢谢 这真的很棒 在UIKit中用Swift写的 UIViewController预览

但是当我看该视图控制器 我发现了一个问题 这些文本读起来太困难了 图片上方的文字下面 还有一个底层视图 它是半透明的 因此让文本更加好读 但是这还不够半透明 所以让我们继续提高不透明度 我将该预览固定 这样我们就可以看到做出的改变 转到动物视图控制器文件

在这里我将底层视图的 alpha值调到0.5 画布立马做出更新 为视图控制器显示出 刚刚所做改变的预览

Xcode的预览 并不只是与SwiftUI一起工作 而是所有Swift代码 而且 我们可以获得所有热交换 和增量更新而无需重新编译文字值 就像Anton说的 SwiftUI UIAppKit 或WatchKit都可以一起工作

谢谢

Anton向你们展示了 动物视图控制器 我已经对其进行编辑了 所以我已经加上了预览 让我给你们看看 取消固定动物视图编辑器 点击左下角取消固定按钮 再转到 动物操作视图控制器表示 这是动物操作视图控制器的预览 我们觉得按钮隔太开了 我们觉得IImage不太合适 它与平台不太一致 我们来解决这个问题 打开动物操作视图操作器文件 因为我实是在很久很久之前写的 所以我用的是 Objective-C

谢谢 很棒的语言

我们来把填充详情按钮的 系统图像改成 info.circle

再返回到 我们的预览 再更新预览 因为这是用Objective-C 而不是Swift写的

Xcode会告诉构建系统 启动正常重建 而不是使用增量更新或热交换 但还是很快 特别是比进行app重建 运行又导航来说快多了 Xcode预览不仅适用于 SwiftUI或是Swift文件 甚至UIKit、AppKit和WatchKit中 用Objective-C写的代码 而是适用于Xcode能理解的 所有源文件

（演示） 正如你所见 Xcode预览可以 真正加快工作流程 但是现在我想说说 如何调整你的app 如何调整app体系结构 使Xcode预览更加适合你 特别是 我想说说在我们动物园app中 出现过的一个类型 叫动物单元格模型 我们做了什么呢

来看看 我们填充了动物视图 动物单元格 因为SwiftUI流畅的API 还有

我们也可以很简便地 实现body方法 我们也用了单元格模型

哪个数据 进入视图的哪部分 都是非常明确的

这样 我们就可以使用动物模型对象 再将其直接传入视图 但是我们没有 原因有二

第一 使用视图模型 添加新预览 是很容易的 为实现预览提供程序的一个好方法 是在视图模型中添加静态数组 并在您的静态预览属性的实现中 迭代该视图模型数组并填充视图 当新数据配置 会导致不同布局时 这就很有用了 你要做的就是创建一个新的 视图模型并将其加入该数组

然后你就会在画布上看到新预览 显示你的新视图布局

在说第二个为什么我们 要在动物园app中使用 视图模型的原因前 如果你们忍得了我的话 我想提一点哲学问题

应用程序的模型层包含丰富的对象图 在动物园app中 我们有动物模型对象 而且该动物模型对象也只是 许多动物中的一个

另一方面 该动物模型对象中含有基因数组

那么你要怎么将 这些信息展示给用户呢

好 并不是一次做到的

比如说 你不会在动物单元格里 加入基因组信息 信息量太大了 所以你要从 模型对象中提取 最重要的信息 再创建预览 但不是用一对一的方式来提取 通常要对数据进行一些转换 我们从动物模型对象中提取了两部分 并将它们组合起来 创建一个包含属性和种类的单个文本

转化和提取的过程 很容易出错 但是用预览模型就简单多了

这是一个预览模型 特别是我们的动物单元格模型 也是从模型对象构建的

我们就可以清楚地看到这些数据 从模型对象中被提取出来 再进行结合 我们就可以向用户展示 我们想要的东西了

而且这一点非常有用 因为检验起来更容易 当我们遇到新的模型对象 需要以不同的方式向用户展示时 我们需要做的就是利用XCTest 添加一个新的测试用例 并在该测试用例中创建一个模型对象 从中创建一个视图模型 再验证该视图模型 是否具有我们希望向用户显示的数据 以表示该模型对象

这也是为什么我们 要在动物园app中 使用视图模型的第二个原因 （应用架构） 那么对于总体app架构来说 这意味什么呢

构建一款好app 重要的一点是 是在你的模型层中 采用丰富的模型对象图 再向你的用户进行展示 再从中提取最重要的信息 再以好看的方式展示给用户

使用视图模型会简单得多 原因是 你可以使用以下流程

首先 为你的模型对象构建视图模型

这个过程很容易出错 所以你一遍又一遍地测试 确保视图模型包含你想让 你的用户看到的完整数据 第二 对于每个视图模型的不同风格

都会呈现不同的布局 你都要加上预览 你可以在画布中检验 你的视图和你想让用户看到的一样 最后 你可以用XCUI测试 验证你的app在创建过程中的 工作方式

我想花点时间谈谈性能 （app的生命周期）

我们刚刚说过 预览只是一些代码 而后果就是 你不想在显示预览的时候 运行任意操作 你不想要这么多的运算 Xcode预览也是同样的道理 它会调用app 完成启动 进行操作 所以你也不想做一些无关紧要的工作 特别是当你只想看在画布上的 预览视图时 你并不想 设置UI层次结构 所以 识别app场景 使其符合 UIWindow场景代理 实现场景连接到操作方法 并在那里设置UI层次结构 看看 这并不只是对开发者有益 能让你更快地看到预览 对用户来说也是好消息 当你的app在后台运行时 它不会做一堆额外的工作 它只做它需要做的事情 然后就回去睡觉了 也避免了浪费用户的电池

（总结）

我们来做一个回顾 我们说到了如何写预览 预览API是SwiftUI的一部分 它的功能真的很强大 当你在写预览的时候 可以用到所有的SwiftUI

你也学习了如何使用 高级Xcode工作流程 比如说预览固定 在你要在不同 文件转换的时候固定预览视图 我们也说到了 如何使用开发资产 让你拥有丰富有趣的预览

而不用把测试数据也传给用户 最后 你也看到了 预览并不只是适用于 SwiftUI或者Swift 而是所有Xcode 能够理解的源文件类型 可以是用UIKit、AppKit 或是WatchKit写的

这就是掌握 Xcode预览的全部内容 谢谢大家捧场 （更多信息）

来实验室找我们吧