在 iOS 上实施深色模式

（iOS上实施深色模式）

早上好 欢迎参加 在iOS中应用黑暗模式演讲 我是Kurt 我会和Tyler 一起为大家演讲

现在 当我们在iOS 13 添加黑暗模式 我们看到UI的各个部分 让它在新的深色外观中更好看 这是iOS的全新设计 现在 到你了 我们来帮你在你的app中 加入黑暗模式 很简单 我们将会在现场演示 一些示例

它也是在一个非常灵活和强大的 系统里创建的 所以不论你想要你的app 在黑暗模式中是什么样子 你都能实现它

首先 我们来聊一下黑暗模式的设计 现在 我来展示一个示例 这是设置 一个很熟悉的 你看到的是黑暗模式 一样的app 一样的布局 运作方式也相同 只是外观不一样 我们知道了iOS的设计系统 并为它增加了黑暗模式 当我们实现时 我们要考虑三件事

第一件 也是最重要的 颜色 iOS app传统上硬编码了 它们所有的颜色 你为UI的每个部分指定了RGB值

现在我们有了黑暗模式 几乎所有的颜色都需要改变 我们需要管理很多颜色

我们使用语义颜色来解决 这些颜色都有一个它们代表的名字 我们这里的文字标签 使用了颜色“label” 那是文字和标签的默认的颜色

我们的背景是 “systemGroupedBbackground” 那是因为我们在一个分组表视图 UI表视图给了我们默认设置

最后是这个图标 我们用了“systemBlue” 它不是纯粹的蓝色 但它被调整来适应剩下的颜色 所以 当我们设置UI时 我们为每个部分选择了一个合适 的语义颜色

当我们切换至浅色模式时 我们还是使用相同的颜色 但因为这些颜色是动态的 它们在浅色和暗色模式有不同的值

最棒的事情是 当你使用语义动态颜色时 UIKit会帮你实现 你不需要思考你处于哪种模式 切换模式时 你不必做任何修改

现在 我们的设计系统提供了一个 全新的调色板 我来展示一些例子 我们这有一些背景颜色 它们被设计一起工作 “systemBackground” 是默认的背景颜色 浅色模式下是纯白色 非常熟悉吧 在黑暗模式下纯黑色

最上面是 第二和第三级系统背景颜色 这些允许你构建你app的 信息层次结构 请留意黑暗模式不只是 一个浅色模式的简单翻转 它更为精妙

我们的文字也使用层次结构的方案 有四种层级的文字颜色 它们允许你突出 哪些元素和其他的最相关 比如 第一级颜色可能会被用于 标题之类的地方 第二级颜色被用于次标题等等

颜色的完整目录在人机界面指南里 你能从中知道它们是什么 什么时候使用它们 我们提供了很多颜色 但你需要自己实现 你可以制作你自己的动态颜色 我等会会向你展示如何实现

现在 我们来看看我们设计系统的 第二部分材质 这是Photos的一个例子 材质不仅仅是颜色 模糊效果看上去像是背景上面的 半透明的材质 上面有一个振动穿过了模糊脱颖而出 当然 它们在我们的图片上方 看上去很棒 它们能在深色和浅色模式下运行

设计系统的第三个部分是 由UIKit的提供的 内置视图和控制器 它们使用了相同的颜色和材质 所有的物件都被很好的适配了

所以 当你为你app 设计黑暗模式时 在你写代码之前 先学习设计系统和了解如何 利用它提供的功能 接下来 弄清楚你想要自定义的内容 iOS app各有不同 我们不能为你提供你需要的一切 但是我们提供给你需要的资源

那么 现在你想好了你的设计 我们来聊一下如何如何实现它

当你使用iOS 13的 SDK来创建 你app的浅色和深色外观 切换设备至黑暗模式 运行你的app 看看它是什么样子 你首先会发现你有事情要做了 我们不能自动为你实现 最后 让你的app在黑暗模式下 界面的外观好看与否 是你自己的责任 你需要做的第一件事是颜色

在过去 每个UI颜色只有一个值 它永远是一样的 现在它们能设置为动态的 在浅色和黑暗模式下颜色 会有不同的值 当你在视图上设置 其中一个动态的颜色时 比如 一个背景颜色或文字颜色 UIKit会自动使用正确的值 当模式改变时会更新 所以 你只需设置颜色一次 如果你熟悉macOS的黑暗模式 这就是NSColor如何工作的 我们会遵循一样的模式

所以 我们开始吧 我们在一个app里实现黑暗模式 Tyler会向大家演示一个例子

谢谢Kurt

我们有一个最开始在iOS 12上 开发的一个简单的示例app 我们想要向你展示在iOS 13的 黑暗模式下我们做的修改

这也许会给你一些 在自己的app里的类型 改动的建议 我们的app在右侧的模拟器运行 它非常简单 所以 我们为什么不切换到黑暗模式 看看它是什么样子 我们可以使用Xcode的 新的环境重写功能 那么 我们在Xcode中运行 我们可以点击切换按钮 切换至深色界面 你可能注意到 我们的app立刻做出了反应 它转背为黑暗模式了

现在 你可能注意到 比如 屏幕底部的标签栏改变了 那是因为我们使用了UIKit 标准的标签栏 所以我们免费获得了一切 但是我们的app颜色 并没有变得很深 那是因为我们还有其他事情要做 那么 我们为何不切回到 Storyboard 看看我的UI是如何被创建的

这里是我们app的主界面 我们应该做的第一件事是看看 为什么我们的这个白色背景 在一切物件的后面

我们能在Storyboard 选择这个视图 如果你查看右侧的属性检查器 你能发现你在设置一个硬编码的白色 之前它可能有效 但我们现在想要切换至使用 动态颜色的其中一个 Kurt前面提到过 那么 系统背景颜色是一个 很好的选择 你能在这个新列表上找到所有的 系统颜色 我们选择系统背景 操作后什么也没有改变 那是因为浅色模式下 系统背景颜色还是白色 但是我们能做的是 在Storyboard编辑器 切换我们的预览视图来看看 黑暗模式下是什么样子 所以 如果我们这样做 我们现在能在深色背景颜色下的样子

但是 我们的文字不见了 发生了什么？

因为我们的黑色文字 被绘制在了黑色背景上 那么 我们需要来看这里 我们可以选择 我们从标题标签开始 我们看到右侧 文字也被这个配置硬编码为黑色颜色 那么 再一次 我们需要切换至 动态颜色中的其中一个 这种情况下 我们可以选择一个 很棒的标签颜色

那会在黑暗模式中显示白色

类似地 我们选择我们的文字视图 它也被设置为黑色了 所以我们需要更新它

所以 现在我们已经做出了这些改变 关于如何在模拟器运行 以及物件将如何呈现

这是在浅色模式下运行 的我们的app 我们将再一次回到环境覆盖 将它转变为深色

现在我们看到了更多的更新 它看上去很棒 但如果我们要进一步优化呢？ 上面是一张星星图片 那是我们app的标志 我们想要在黑暗模式下 自定义一个不同的颜色

这不难 我们在Storyboard 选择图片 你会看到这是一个图片视图 它配置了 来自我们资产目录的一张图片 这张图片被作为一张模版图片来渲染 它意味着任何出现在图片视图上的 颜色 都会给图片着色 那么 我们来用这个自定义的 我们已经在 资产目录定义过的图标颜色来着色 我们点击这个小箭头跳转到该颜色 来看如何设置它 这就是那个颜色 它是自定义的绿色 如果我们想要为黑暗模式 添加一个不同的外观 现在我们可以打开一个新的槽 指定深色外观

只要我们完成 我们就能选择深色外观改变它 一个很棒的黄色或者类似的 现在我们有一个颜色设置来自动 在浅色和深色两种外观中转换

如果我保存 然后回到 我们的Storyboard

我们看到当我们在预览图中切换 浅色和深色 它自动更新了 很棒

但还有更多 如果我们想要更新背景图片呢？ 现在它是一张好看的白天热带海边 风景图片 如果我们要将它在黑暗模式中 换成一张日落的暗色风格的图片？ 我们选择哪个图片视图 步骤和改变颜色的方式非常相似 这里的图片视图 配置了我们的资产目录的标题图片 我们点击箭头直接跳转到那

这就是图片被设置的地方 就像你之前看到的颜色一样 它们几乎一样 你能为深色外观打开一个新的槽 接着 我们要做的只是拿到日落图片 将它拖进来 保存 我们来运行一下 看看现在在模拟器是什么样子

那么 这是浅色模式 没有任何改变 这是我们开始的地方 在所有改变之前 但只要用环境覆盖 切换到深色 现在屏幕上的所有物件都更新了 来支持黑暗模式

所以你看到的最酷的事情是 使用了所有的动态颜色 和利用了这些动态图片 以及在支持目录自定义了颜色 我们不用写任何代码就能使用 黑暗模式 这就是利用Xcode和UIKit 为你提供的基础设施的好处 你也能在你app的启动 Storyboard做出这些变动 在你的app启动时支持黑暗模式

那么 现在我们来看一下 我们app的另一个屏幕

如果你点击了解更多按钮 我们在这个新的卡片样式 展示的一个视图控制器 我们也想在这里支持黑暗模式 有趣的是 在下半部分 你能看到我们利用了材料的优势 所以 有一个模糊覆盖了背景图片 接下来 上面有一个突显的标题 有请Kurt回来为大家继续讲解 如何使用这些视觉效果 来自动更新黑暗模式

谢谢Tyler

那么 我来给大家展示一些 材料的例子 这是一个新的模糊效果 这是厚 正常 薄和极薄样式 当然 这些样式能同时在浅色 和黑暗模式下运作 现在 我们来看如何使用它们

在我们的app中 我的背景有一些视图 我想在最上面模糊它们 第一件我要做的是创建一个 UIBlur效果 我们指定一个样式 在当前状况下 我会使用系统的材料 这是一个好的默认选择 接下来 我们使用这个效果 创建一个UIVisual效果视图 我们要保证它的尺寸和位置合适 接着我们把这个视觉效果 视图放入我们的视图层级中

你看 它模糊了下面所有的物件 非常简单

现在 在模糊效果上面 你能添加突显内容了 突出效果穿过了一些背景材料 以前 只有一种突显效果 但现在有好多种了 这是为文字设计的四种样式 其中三种样式是更大的覆盖区域 一种是为细的分割线设计的 当然 它们能在浅色 和黑暗模式下运行

那么 我们来看如何实现突显效果 现在 突显效果始终 添加在模糊效果之上 和之前开始设置的方式一样 我们来创建一个突显效果 我们指定一个样式 在当前状况下 我使用填充 因为我要展示一个大的填充区域

请留意 当你创建一个突显效果时 你给了模糊效果一个参考 两者协同工作

为了展示突显效果 我们创建了 另一个视觉效果视图 接下来我们将它加到模糊效果里面 现在 这里有一些不同 我们不在视觉效果视图上直接添加 子视图 取代的 我们穿过它的内容视图

现在我们添加这个突显视图 我获取到内容视图 接下来 我添加会突显的视图 你会看到效果 现在的情况是 我们的视图的 背景颜色不透明 但取代了它正常的颜色 你看到的是突显效果 那是因为这个突显样式的 颜色被忽视了 只有阿尔法值被使用了 那么 再次有请Tyler来完成 在我们的示例app中添加材料

好的 我们回到了解更多的屏幕 我们看到的这个屏幕和 上一个屏幕的区别 在于这一个完全是由代码创建的 我们现在看我们的视图控制器 你能看到所有的一切都在这个 loadView方法里面 在我们开始之前 我们先切换到黑暗模式看一下 是什么样子

我们找到环境覆盖 切换到深色 你可能看到 有些物件改变了 我们的导航栏自动变了 因为它来自UIKit 我们动态的自定义颜色 以及自定义图片也变了 它和我们之前更新过的一样 这些已经运行正确了 但当然 你能看到我们的 背景还是白色 这些材料在黑暗模式下 看上去还不太对 所以 我们来做一些改动

下面 我们来看一下这些是 如何被创建的 我们首先要在背景中 设置这个视图 这是白色来源的地方 就像你在Storyboard中 看到的一样 我们需要切换使用一个 新的系统背景颜色 像之前做过的 我们再来选择系统背景

接下来 我们设置星星图片 接下来 使用我们的资产目录颜色 所以这里不必做修改

这是你看到的了解更多标签 屏幕的标题 我们需要做一下改动 因为我们在这里将黑色硬编码了 我们切回到其他物件 比如标签

现在 我们看到的下半段 是处于黑色中的图片视图 就在这 在图片视图的上层 是一个模糊效果的视觉效果视图 那么 那是这个薄样式的模糊 接着 在上面 我们有另一个突显效果的 视觉效果视图 在这里 最后 在内容视图的突显视图里面 我们有标签

所以 我们需要做出更新这些材料 的改变 首先 切换到动态模糊效果 这个薄效果并不是动态的 当我们切换至黑暗模式 它不会为我们更新 所以 我们要利用iOS 13的 全新系统材料调色板 好选择 因为这个特殊用途的 系统薄材料 它看去和我们之前做过的很类似 接着 我们也想要利用新系统突显 效果样式更新我们的突显效果 这些突显样式现在 出现在了一个很棒的层级 所以 我们能添加一个样式参数 在当前情况 它是一种二级内容 所以我们能选择二级标签样式 做了这些改动 我们来运行看一下效果

我们打开展 现在我们处于浅色模式 和我们之前看到的几乎一样

但我们现在切换至黑暗模式

看吧 所有物件都更新为美观的 新的深色材料

这里要指出的一点是虽然我们 这次写了一些代码 这没什么错 我们实际上并不需要写一些代码 来显式检查我们所处的模式 或处理浅色到黑暗模式 转换的变化等等 这也是利用你app中的 这些动态系统颜色和材料的优势 我将舞台交给Kurt 他会向你解释 这个场景背后的是如何工作的

谢谢

那么 这里有一些你可能 没留意到的微妙的变化 我们使用系统背景颜色 作为我们app中主要的背景 它是黑色 接着 我们在展示视图中 再次使用了它 如果你支持查看 你能看到它是浅色调的灰色

那是因为黑暗模式的设计 有两种不同的级别 当视图填充了整个屏幕的边缘 我们称之为基本级别 接下来 当内容在一个 单独的层级出现时 我们称之为进阶级别 所以 在黑暗模式 系统提供的背景颜色 在进阶级别的颜色值更浅 这帮助我们从下面的黑色背景 区分它们 但是前景颜色不会改变 现在在iPhone上 就像你 在这看到的 展示时会出现 在iPad上 当app在多任务 分割视图中也会出现 所以它不会填充整个屏幕

我们已经知道实现黑暗模式的 重要事项了

我们都看到物件就这样工作了 它是自动的 那么 我们来深入了解动态颜色 和图片是如何工作的 这会帮你全面灵活的 使用好这个功能

我们已经看到动态颜色自动地 改变的它们的外观 但是颜色如何知道它是浅色 还是深色的？ 特征集合能帮助实现 所以 你app的每个视图和 视图控制器都有一个特征集合 它帮助确认视图的外观 当前状况下 我们所有的视图 都有相同的特征集合 风格为手机设计 在手机上运行 而非iPad或CarPlay车载 用户界面的样式是黑色 因为我们 处于黑暗模式 用户界面是基本级别 因为我们处于全屏 所以 如果你想要 确定使用哪种外观 使用特征集合 查看用户界面样式和其他特征

现在 使用特征集合解决了 动态颜色 所以 它是一个动态颜色和一个 特征集合的结合 来确认最后的颜色 通常情况下这会自动发生 但如果你需要自己来确定颜色 你可以自己来做 假如我们有一个动态颜色 我们从一个视图那获取了 一个特征集合 如果我们想要确认那个颜色 我们只要使用特征集合和 动态颜色来决定颜色 它会返回一个确定的非动态的颜色

所以 调用任何颜色都是安全的 如果那个颜色不是动态的 它就会返回自己

你也能自定义动态颜色 我们在资产目录展示了如何操作 但是你也能在代码中实现

使用一个闭包来初始化一个颜色 参数是一个特征集合 接着我们的闭包会返回另一个颜色 所以 每次这个动态颜色 都需要被指定 那个闭包会被调用合适的特征集合 在闭包内 你能使用特征集合 来确定返回另一个颜色 这个例子实现了我们刚才看到的图表

另一个问题是 你可能会质疑动态颜色 能直接被用于其他颜色 它们是如何被自动指定的？ 如果我有一个动态颜色 我要向它询问RGB组成 它会返回一个结果 如果我的颜色是黑色 我会得到000 当我问它时 我不用通过一个特征集合 那它是如何知道的呢？

是这样的 在UITrait Collection里 有一个新的属性叫做current UIKit会为你设置它 使用当前特征集合 来指定颜色 再一次 我们遵循Mac一样的样式 这和NSAppearance.current 是一样的概念

现在 UIKit为你设置了 当前特征集合 当它调用确定的方法 这是一个例子 我有一个UIView的子类 我重写了它的draw方法 那么 这个视图会完成它所有的绘制

在我调用这个方法之前 UIKit会为视图特征集合设置 当前特征集合 在这段代码里面 当一个动态颜色需要被指定时 它会使用视图特征集合

事实上 当模式改变时 UIKit知道你重写了 draw方法 所以它会自动在你的视图 调用需要展示方法 用新的颜色再次绘制一遍

UIKit也为你设置当前 特征集合 在它调用其他一些方法之前 我是…视图的子类 视图控制器和 展示控制器 解释绘制

但UIKit也在布局的时候 设置当前特征集合 所以 在你的视图子类中重写 子视图布局 接着添加指定动态颜色的代码 当模式改变时 设置需要布局会被调用 布局会再次改变 这包含在视图控制器和展示控制器 相关的调用

最后 所有的这三种物件 当一个特征改变时 获得traitCollectionDidChange 视图会得到tintColorDidChange 当浅色改变时 所以 这些方法的内部 可以立刻使用动态颜色是 很方便的

现在 你要记住这些方法外的 重要的一点 当前的特征集合不能被保证 有任何特殊值 所以如果你需要在这些方法外部 制定一个动态颜色 你需要管理它 这是为什么你需要这么做的一个例子

低级别的类比如 CA Laye和CG Color 无法理解动态颜色 它是一个UIKit的概念

所以现在 我们创建一个层级 接着设置它的边界颜色 那让一个CG Color 无法成为动态 所以 在UIKit动态颜色调用 CG Color需要指定它 现在 我们想象一下 我们不在我之前提到的这些方法里 这意味着我们自己需要负责管理 这个过程 我们需要的第一个物件是一个 特征集合 我们会从一个视图获得它 现在我们需要使用那个特征集合 我会通过三种方式实现它 第一种方式我们之前已经看到过 使用特征集合来让颜色指定它自己 现在如果你只有一种颜色是可以 这么做的 但是如果你有多种颜色时 会发生诡异的状况 你必须每次都记得这么做 第二种方法要简单一点 直接在特征集合调用 performAsCurrent 那让特征集合成为了 当前特征集合 接下来它在你提供的闭包中执行代码 因为我们在那个闭包中指定了颜色 你得到了正确的值

最后 第三种方法 直接设置当前特征集合 这看上去有一点可怕 但它绝对是安全的 它是轻量级的 没有其他负面影响 它甚至可以安全地在后台的线程完成 它只会影响你当前运行的线程 所以它不会影响你的主线程

如果你将要使用这个方法 最好保存当前特征集合 为了防止有其他代码使用它 你接下来要在后面归还它 请注意 current为你实现的功能 它做了完全一样的事情

所以 如果你做了这些事情 你也会想知道 当动态颜色需要再一次被指定时 它通常发生在特征改变时 当特征改变时 traitCollectionDidChange会被调用 但不是所有的特征改变都会 影响到颜色 如果用户界面样式由浅色变为深色 那会显著的影响颜色 但是当一些改变比如当你app的 尺寸改变 一个尺寸类改变了 它不会影响颜色 那么 使用这个方法最好是 有不同的颜色外观来查看 是否相关的特征变化了 如果它是 接下来你需要再一次 指定这些动态颜色

所以 最后 我们来聊一下图片 如你所见 你可以在资产目录里创建 动态图片 当你使用UIImage视图 来展现这些图片中的其中一个时 它使用它自己的特征集合来决定 展示哪张图片

现在UIImage视图完成了工作 与UIColor不同 UIImage不会关注 当前的特征集合 所以 我们推荐大多数情况下使用 UIImage视图 但如果你需要自己指定颜色 你可以做到

提供一张图片 询问它的图片资产 那是所有不同图片的变量集合

接下来 询问符合一张符合特定 特征集合的的图片

你也能使用图片资产 在运行时注册新的变量 如果你自己绘制你的图片 你可以为浅色和黑暗模式添加变量 在图片视图添加它就好 它会自动展示正确的那个

当适配黑暗模式时 我们来聊一下 我们需要留意的一些事情 有请Tyler

谢谢Kurt 我们用几分钟时间来回忆下 特征集合时如何工作的 因为如你所见 它们在黑暗模式中至关重要 最重要的事情是在你整个app 记住特征集合中不止一个

特征集合实际上贯穿了 你整个app的层级 从屏幕的根级别开始 到窗口视图 这是今年iOS 13的新功能 从这里到窗口

在这一点上 特征开始进入 你app中任意的展示页面 接下来 是展示页面的视图控制器

最后 特征串联至你每一个的 视图控制器中视图层级 因为这个层级设计 你可以一直使用指定的视图 或视图管理器的特征集合

现在 当一个特征值改变时 你可以获得在你app中 所有的物件的 traitCollectionDidChange 当它们收到改变时 如果系统黑暗模式设置改变了 比如 你会看到特征改变马上穿过了

但我想深入聊一下特征改变 因为今年我们在iOS 13 新引入了一些功能 我们来放大下半部分的示意图 通过一个例子来了解什么改变了

那么 我们想要添加这个视图到 视图层级中 它会成为上面视图控制器中的 视图

首先 我们会创建这个视图 现在 当一个视图初始化后 它还没被添加至这个特征层级中 所以 当视图被创建 在iOS 13中 UIKit会预测这个视图 最终会在哪里

基于预测的目的地 从一开始就将视图的特征集合植入

现在我们添加这个视图 然后 非常酷

那么 现在我们将这个视图 加入至层级中

我们先调用子视图 它移动至这里 只要视图被添加了 它会从它父辈的特征环境 继承它实际的特征 现在它继承的是上面的视图控制器

但是现在 因为特征集合在 这之前被预测了 当这个视图移动至这个 视图控制器和视图层级时 没有一个特征发生了变化 所以 你看到的是iOS13 的一些新变化 总结一下 特征现在 在初始化时被预测

视图控制器和视图都 会收到一个完整了前面的 特征视图 这非常有用 只有这些原始的特征改变时 traitCollectionDidChange 之后才会被调用 所以 当你更新iOS 13中 你已有的app时 留意下你已有的 traitCollectionDidChange 方法里的代码 在一个特征改变 你将它移入层级时 它可能使用的是旧方法

现在 为了在iOS 13中 更容易看到 一些特征值的变化 我们今年增加了一些新的调试功能 你可以启用这个启动参数 它会立刻告知你 traitCollectionDidChange 被调用的时机和变动的细节 它非常酷 你可以尝试一下

现在 当你更新完你的代码 或增加了使用特征的新代码 最好的实践就是等待布局 从视图或视图控制器获取特征集合 在此基础上开始工作

在布局出现之前 特征一直处于 更新状态 如果你从这些方法中获取到了 特征集合 你可以确信它不会再被预测了 它会反映它从父辈中继承的实际的值

只要记住如果你在代码中使用了 任意的这些布局方法 它们能在视图可见时被调用 任何时候有物件要调用 需要布局 请确保你没有重复处理它

这就是你使用特征集合时 需要注意的点 但我们也能在我们的app中 修改这些特征集合

这是你可能需要这么做的一个例子

这是我们的了解更多屏幕 展示给你的app一直是深色的 甚至我们app的剩余部分 都是浅色的设计 我们可以利用特征层级来实现它

一般情况下 这个示意图展示的 我们的app的 系统是浅色模式的 所有的物件都有浅色用户界面样式 就像你看到的这个

但我们只想要 在右下角的这个视图控制器 在它那边的一切都暗下去 我们可以通过重写 深色用户界面样式特征 现在视图控制器内部的物件 都会是深色的了 甚至是你app的剩余部分 或你的系统运行的还是浅色模式时 那么 你要如何重写呢？

我们今年在iOS 13上提供了 一些新的API 简化了实现步骤 这些是视图控制器和视图的新属性 这样你就能设置你想要的 用户界面样式 它会给它内部和子类提供所有的 需要的物件

现在 需要时 你要尽可能 使用这个视图控制器属性 这个视图只应该 在当你想要改变某个特定物件时 如果你没有一个视图控制器时的 情况下被使用 如果你使用那个视图属性 会有一些报错 所以使用时请阅读文档

最后 如果你的整个app需要一直 处于浅色或深色 你可以设置Info.plist的 一个关键字来简化操作

你也可以使用一些 已有的API来重写特征

这会让你重写一个视图控制器或 展示控制器的任意的特征 关键是记住当你使用它时 你重写的特征集合 应该只包含 你想重写的特定特征的值 不要改动其他不确定的特征 不要改动它们 这样UIKit就会自动为这些 特征填充通常的继承的值

那就是你需要知道的如何在 iOS 13中成功使用特征集合

我们来聊一下我们今年更新的 其他的一些API 当你更新你的app至黑暗模式时 你需要留意的其他事情 我们从状态栏开始

iOS 13之前 我们有两种 状态栏样式 默认样式和浅色内容

在iOS 13上 我们有了新的深色内容样式 它几乎是取代了之前默认的位置 我们将默认改变成一种 自动样式切换模式

现在 自动切换基于控制状态栏的 视图控制器的用户界面样式 一直以来 你能在视图控制器重写 一个特定的偏好状态栏样式 返回一个你想要的特定样式

最后 它不会在这展示 但请留意 我们也更新了 UIScroll视图指示符风格 来更适配这种风格

接下来 我们来聊一下活动的指示符 在iOS 13 我们不再 推荐使用这些已有的风格 因为它们被默默指定了 一个非常特定的颜色外观 这不再有用了 但在其他地方 基于活动指示符的尺寸 我们引入了一些新的样式

它们也默认使用了一个好看的 动态的灰色 所以不用做任何修改 它们在浅色 和黑暗模式都看上去很棒 但你能使用已知的颜色属性 来设置一个自定义的 动态颜色 或甚至一个静态的颜色 比如白色 如果你想要一个特定固定的外观

接下来 这是一些你要留意的事情 当你在app中处理文字时

现在 默认情况 文字类比如 UILabel UIText文本域和 UIText视图使用标签颜色 所以 如果你只在新的文本域 文字视图或标签设置文字 你会在浅色和黑暗模式得到一个 默认的好看无误的外观

但如果你在app中使用属性字符串 你在文字类中的一个设置属性文字 或如果你自己手动绘制属性字符串 你需要指定一个前景颜色 没有前景颜色属性时 像这样绘制属性字符串 实际上是会被定义为产出黑色文字

所以 如果你在app的黑暗模式下 看到黑色的文字 你使用属性字符串 只是为了保证 你为比如标签 指定了一个动态的颜色 就像你在这看到的 为前景颜色属性 它真的非常简单

现在 你们中在app中 嵌入了网页内容的 你需应该知道黑暗模式是可选的 你可以通过配色方案风格属性 或一个相同名字的元标签来实现 接下来 你就能使用喜欢的 配色媒体查询 来在浅色和黑暗模式中 自定义不同颜色和图片

你可以在今年的WWDC了解到更多 关于在网页内容中支持黑暗模式 的视频

对于你们中已经在tvOS的app 支持黑暗模式来说

这是一个好机会 因为我们已经支持这个功能好几年了 今年 你的tvOS 13的app 将会和iOS一样 默认支持黑暗模式了

我们今天提到的多数新的API 比如所有的动态颜色和图片资产 都可以使用了 但比如新系统材料等物件 只在iOS上能使用

现在 如果你已经在你的tvOS app上支持了黑暗模式 你可以适配你想要的 所有的新功能和新的API 但如果你已有的黑暗模式 已经很好用了 你无需重写所有功能

今年 如果你想要将 iPad app适配至Mac 你可以以同样的方式 在Mac上支持黑暗模式 使用所有相同的API 就像我们在iOS上介绍的那样

现在 你的Mac app会遵循 用户在系统偏好中 选择的黑暗模式设置 非常简单 就像在iOS上一样

但唯一的区别是你已经留意到的 在某些情况下 在Mac上 UIKit会自动提供 不太一样的系统颜色的 动态颜色 和一些材料的版本 为了更好地适配它们 你可能需要使用Mac提供的框架 比如AppKit 这样 你的app会变得更好 就像在Mac上其他 使用了AppKit的app一样

相不相信 这就是你需要了解的所有了 今天 你能在iOS 13上 为你所有的 app开适配黑暗模式了

只要你创建了iOS 13 SCK 你的app会默认适配黑暗模式 就像你在我们的示例中看到的 你可能还有其他事情要完善

现在 我们已经减少了你利用 这些新功能来快速让你的app 适配黑暗模式的工作量了 请确保你开始使用 我们今年提供的 所有的这些动态颜色和材料 接下来 是创建你自定义的外观 自定义颜色 自定义图片等等 最后 不要忘记好好利用UIKit 的强大的客制化功能和灵活性 来让你的app在黑暗模式下更好看 我们非常期待随后看到 你app在黑暗模式下的样子

在我们演讲的页面 你可以 了解更多信息和一些示例代码 非常感谢大家