SF Symbols 简介

好的

我们开始吧

大家好 我是 Paolo 之后我的同事 Tom 也会上台 我们今天将为大家 介绍 SF Symbols 标志在界面上 有着很重要的作用 它们可以有效地 传递意义

它们可以显示 你选择的项目 也可以在视觉上 区分不同类型 的内容 标志通过系统 出现在不同的情景中

这在用户界面中 创造了一种熟悉感

标志的使用方法有很多种 设计标志有一种 固有的挑战 与 UI 其它的 必须的元素 相匹配 那就是文本 文本在 UI 的运用中 有不同的磅值 标志也是如此

我们经常使用标志 你们也是

我们想要让你们的工作更简单

在 iOS 13 系统中 我们重新设计了 我们的标志

你们会注意到这些标志 看起来更丰满 在粗细方面 也显得更粗 看起来更明显 我们也将其设计得 与文字完美融合

虽然我们花费大量精力 重新设计这些 系统中你们已经熟悉的 标志 我们还是很激动地 宣布我们已经 拓展了这个名单 并设计了更多 我们称之为 SF Symbols 它们是由 Apple 开发的 可以在你们的 App 中 使用的与平台兼容 高质量的 一个设置

它们是以矢量形式出现的 这意味着它们可缩放 不论磅值大小都 展示良好

它们的粗细也 适合我们的系统字体 San Francisco 中 所有的粗度

这里面有超过 1000 种可以选择 如果这些还不够 你甚至可以自定义 并创造你自己的标志 我们来详细地 了解一下

它们被设计成与文本匹配 它们的排版大小和文本一样 是指定好的

当标志出现在文本旁时 它们都完美的出现在同一 基线上

当标志和文本 垂直排列时 有两个最常见的情形 文本支撑标志

或者标志支撑文本 平行排列让 一切看起来都比较好

这也可能是因为它的留白

它们并不一定是相同的 正如你们在右下角 蓝色长方形所看到的 留白是不可见的 在屏幕上展示元素时 却经常会考虑到它们 我们来看看粗细 SF Symbols 很仔细地 让其在不同粗度下 都显得很美观 不论是超细 还是黑体 就像我们的 系统字体一样

每个粗度都是手动 画成的 而且 每一个设计都加入了特殊的考量 较细的粗度有一种 独特而美丽的优雅感

而粗的更加能彰显 细节和清晰度 当它们与文本相邻时 即使文本的大小不变 我们也需要使用 不同大小的标志

这是我们中很多人 根据标志可能需要 强调的部分 以及可用的空间 已经做过的工作

在 iOS 13 中 我们将其 转换成了一个系统

我们用缩放大小来调用它们 -- 小 中 大 值得注意的是 标志的尺寸 还是一样的 变化的只是缩放比例

每一个缩放 都与文本的粗细是相匹配的 提醒大家一句 这不仅仅是线性缩放 笔画的粗细 根据文本的粗细而进行调整 其他好处就是 使用缩放意味着 它们会自动 与大写字母的高度 垂直对齐

因此 标志和文本中间

垂直的布局 对于三种缩放大小来说都是自动的

那么这些缩放应该在哪里使用 你又应该在何时 使用一个特定的缩放大小呢 这里有三个 UI 的例子 它们都是 17 磅值的文本 但是这些标志的边框 拥有不同的高度 所以文本在这三个例子中 都是一样的 标志也是如此 但是标志使用了一个不同的 缩放比例 为了 来最好地适配空间 在某些如 工具栏的地方 你的工具包 会做出正确的事情 同时也会自动地为控制 选择正确的缩放比例

当我们把这些都放在一起的时候 -- 改变大小 缩放和粗细 -- 这意味着你可以通过 动态类型来使用它们 一切都运行得很好 当然 标志也可以 本地化 这是一个语音备忘录的 App 用英文运行 也用阿拉伯语运行 请注意时间控制 是如何反应 当地的数字系统的 如果你在想如何 理解这些标志的意思 每个标志都有一个 独特的名称

大部分标志 可以改变轮廓 或填充 它们可以被圆圈 或正方形所包围 也可能 会有标准化的标记系统

我们让你们可以更方便地 使用这些标志

首先 它们被包含在 San Francisco 字体中 而且可以下载 所以你们可以 在你们的设计提示符中使用

这些缩放大小可以在 打开类型这个功能中打开 默认的缩放大小是中等 小和大都可以通过 排版面板或者 App 特定的 UI 来选择

做个提醒 这些字体只能用于设计 不能用于部署 那你们如何使用这些标志呢 你如何访问它们 并将其运用到自己的设计中呢

为了帮助你们 我们开发了一个名字叫做 SF Symbols 的新 App 这就是它的样子 它会通过集合视图的形式 或是表格视图的形式 让你浏览标志

你可以通过名称搜索 也可以预览字体中 不同的粗度

你可以从 developer.apple.com/design 下载带有新字体的 SF Symbols App 说到设计 设计资源 -- 在 developer.apple.com 中 新的设计资源 同样使用标志 它们通过名称来引用

一些系统图标现在 也是标志 如果你要使用这些 它们会自动 使用新设计 现在我们已经了解了 如何寻找有效的标志 让我们来看一个真实的例子 这是一个你可能需要 为你的 App 装配的一个规范

你可以看到在这之前 你也许需要这样做 -- 明确规定你的图像 矩形的范围 明确的 填充和插入 现在 标志明显地简化了范式 你只需要指定一个名称 它的磅值和对齐

如果合适的话 也可以是其粗细和缩放大小

我和 Tom 一起在研发这个 App 第二行的标志 有点太普通了 这是一个饮料的清单 所以我想把它换成 更合适的标志 让其可以表达 这些是可口的热饮

所以我要把它给换了 我想把它换成茶杯

这个茶杯看起来很好 我相信 Tom 也会喜欢的 这并没有包含在 我们提供的标志中

SF Symbols App 让你可以 自定义并创建 你自己的标志

为了实现这一点 你需要从 App 中 输出标志 标志也可以通过模板来输出

这就是模板的样子

这拥有标志所有的粗度和 所有的大小 这个模板是 SVG 格式的 这意味着它可以被 大多数设计工具所编辑 它被专门设计成 在任何设计阶段 都有导向性且可使用 相同的模板也同样 作为源构件 直接运用在 Xcode 中

再也不会有成千上万的 文件四处浮动

那接下来就让我们看看我们是如何制作 茶杯标志的 首先 我们来到 SF Symbols App 我们先寻找一个好的起点 我们的茶杯被一个圆圈 所包围 所以我觉得 圆圈是一个很好的起点 所以我检索圆圈 找到了 我可以选择它 并从文件菜单导出样式 我可以保存它 现在就可以自定义了 在我的编辑器中打开 请注意这些图层都有 不同的名称 这些名称很重要 它们可以识别 标志的每个个性化配置 粗细 缩放大小 所以在你画画 来保证你的轮廓 是在合适的那一层时 需要非常仔细 现在我要开始我的自定义工作了 我把茶杯标志 放在中等大小的常规层 我要保证它居中 同时光学上是平衡的 然后我把它缩小 为了笔画粗细 我将它设为小的常规大小 接着我重复这个过程 我放大它的粗度 将其居中 保证它 在大的常规大小中也很好看 然后继续直到 这个样式完成

现在 我已经准备好 将 SVG 从设计工具中导出 00:11:54.556 --> 00:11:56.166 A:middle 我可以把接下来的事情交给 Tom

我相信他会很好地完成 实际上 他不需要做太多 它已经准备好按照原本的样子 被拖入 Xcode

所以如果你不想要 为你的标志提供 所有的粗度 你至少得 在中等大小中提供常规号 然后是常规号的大小

然后是针对粗体文本相同的粗体 如果你想要支撑 所有的动态类型 那也可以包含中等和粗体 当然 如果你想要 考虑你 App 的 排版调色 你可能会需要更细或更粗的粗度 简要概述一下 我们需要了解一个 与 San Francisco 匹配的新标志库

它们是矢量图 拥有不同的粗度和大小

你可以通过 SF Symbols App 浏览它们

我们看过了如何在 你们的规格中使用它们 如何通过名字检索 如何指定它们的 位置 最后就是 你们可以使用从 SF Symbols App 导出的 SVG 样板来 自定义标志

现在 我想邀请 Tom 来到台上 他会告诉你们 如何在代码中 使用这些标志 谢谢 Paolo

我真的很激动 我想做的第一件事就是 看看能否在我自己的 App 中 使用这些标志 这是一个简单的幻灯片 App 它有一些 UI 可以让你改变速度 但我真的不太喜欢 这些图片 它们非常基础 我们来看一看 它们很适合被替换 我们来看一下如果在 Symbols App 中 找一个标志会怎么样 首先启动 SF Symbols 搜索乌龟 因为我们可以使用这个 典型的乌龟和兔子

出来了 这里有一个 我可以用这个 这很不错

兔子也在这 完美 接下来 我要如何使用它们呢 非常简单 我们要介绍一个名为 UIImage(systemName 的 新的 API 它和现有的 API 非常相似 你只需要放入 你从 SF Symbols App 复制的名称 这样就可以了 如果我们构建并运行 -- 哇 砰 看起来非常好 这只是两行代码 完美 Paolo 发给了我一个规范 因为我们一起在开发 这个 App 他真的不能再把 热比利时巧克力放在那了 因为我现在感觉自己就是 热比利时巧克力 但是他给了我这个规范 这看起来和之前的 不太一样 这里信息更少 我喜欢这个 这减轻了我的工作量 不过让我们集中注意力在图片上 因为这里有一个新的茶杯 他还给了我一个文件 我需要把这个 teacup.svg 文件 导入到我的资源目录 这当然是一个茶杯 还有很多 他真的花了很多精力 这就是我喜欢 Paolo 的原因 他非常注意细节

现在我们可以看到我的图片在这里 我只需要使用 UIImage(named 来获得我的茶杯标志 如果我们运行这个 得到的是这个 这真是一个又好看又清楚的茶杯 这就是我想要的

但是我不知道你们是否注意到 当我导入这个文件时 在我的资源目录中 有两个茶杯 你可以有两张 有着相同名称的图片 但是它们的类型不同 让我们回头看一看 解释一下正在发生的事 我们要使用信封 因为茶杯不是一个很好的例子

到现在为止 UIImage(named 还是很简单的 在资源库中有一个图像 你可以使用 API 将其导出

而标志的情况 相对于复杂一些

事实上你可以拥有一个 有相同名称的图片 但是它可能有三个版本 你可能会有一个 有这个名称的系统标志 还有一个有这个名称的 自定义标志 你之前的非标志图片也

依然存在 对于系统图片来说 这一点问题都没有

因为它们有单独的 API 所以它们在不同的 名称空间内 所以它们之间 没有冲突 这也意味着使用这个 API 不能获得一个自定义标志 你也不能使用 UIImage(named API 来获得一个 系统标志 它们是完全分开的 对于自定义标志 这是不同的 我们可以加载优先级 所以我们会先寻找一个 标志图片 如果我们找到了一个 我们就会返回另一个 不然我们就会寻找非标志图像 然后你们就会得到 那个图像 现在 你可能会说 这真麻烦 如果我两个都想要怎么办

运用相同的代码 我可以在 iOS 12 或者早期系统 运行我的 App 我将获得旧的图像 在这个例子中 就是点阵图 如果我在 iOS 13 或以上的系统运行我的 App 我将获得标志图像 所以我不需要编写 任何版本检测代码 来为不同的 OS 系统 获取不同的图像 只需要提供相同名称的两个图像 它就可以立刻使用

如果你想要在 iOS 13 或以上的系统 使用老的图片 你需要复制或重命名

让我们回到我们的幻灯片 我们还需要说的一件事 就是这个茶杯的配置 它应该是大的

如何做到呢 我们创建了一个引进的新的类型 SymbolConfiguration 我们将它创建为 大尺寸的 其它对象上的 配置属性是 未指定的 这里只有大缩放比例 然后我们可以使用 imageView 来展示我们的图像 在 UIImageView 上 有一个名为 preferredSymbolConfiguration 新的 UIImageView 它将指示 imageView 使用这些配置 来呈现一个标志图像 它对于非标志图像 是没有影响的 如果我们运行这个 看看缩放大小的变化带来的改变

现在 你还可以使用 这个配置来改变 标志的尺大小 你指定一个磅值 也可以是粗度或缩放大小 重要的一点是 标志的磅值 不是屏幕的磅值 标志的磅值是 字体的大小 它们本身是排版的 屏幕磅值可以描述 图片的尺寸 它的宽度和高度 一图抵千言 我们来直观地看一下 比如说 在 “Favorite” 文本旁的 圆形标志 它们都被指定使用 28 磅值的系统字体 你可能会希望这个图片是 28 x 28 的尺寸 但结果并不是 这些数值 才是这个标志 在这个配置下的正确数值 图片不是方形的 而是圆形的 你需要放弃 使用尺寸来 描述标志 你必须使用 标志的磅值 而且你可以将其视为一个文本 因为如果你有一个文本 你会使用字体大小来 描述它 而不是使用尺寸 这也是一样 另外一个配置标志的 方法就是使用文本风格 这就意味着 标志会根据 动态文本风格规则运转 它会和拥有文本风格的 文本一样运转 它与文本风格匹配得 非常好 imageView 会自动地 改变图像的尺寸 还会在运行的时候 根据 App 的 偏好内容尺寸目录 来查找正确的尺寸 在实际操作中你会看到 比如这个文本很好看 字体也很大 那么标志也 随之缩放 它们拥有非常好看的 相同的粗度

所以图片可以 动态地改变大小 我们必须要谈到这个 因为你一般都会想要 通过宽度和高度 压缩一个图片 因为一个标志总是会渲染 -- 它是一个矢量

你可能会想要 指定它的宽度和高度 但这并不是一个好主意 首先 这不是正确的 你可以看到在屏幕快照上 标志被描述为 17 磅值的标志 这可以说是非常小 但它还是被视为一个大的图片 因为宽度和高度 在那摆着 但是你也可以看到 它不是完全居中的 它有点偏左 也有点居上 第二 这不是性能 -- 这不是展示一个 标志图像 最具性能的方法

所以你要做的 是不压缩标志图像 并让它保留 原始的大小 在这个例子中 我们把 标志的大小改成了 500 磅 以此来匹配 我们之前的尺寸 这样看起来好多了 因为它的居中比之前要好 尺寸也正确

性能也更多

如果你需要一个固定的尺寸 设置磅值大小 但是让标志对标志配置 作出反应 因为即便是大的 标志配置或小型的 配置都可能对 相同标志的尺寸 带来巨大的改变 现在 这里有很多配置 我们设定了 这些标志 -- Paolo 之前提到了 这些标志可以 与 San Francisco 即我们的系统字体 兼容 不过它们可以与任何字体兼容 所以你可以使用这个 API

SymbolConfiguration(font 来创造一个可以 与你提供的字体相匹配 并与系统字体兼容的配置 它可以使用动态类型 字体 也可以使用 自定义字体 尤其是对于自定义字体来说 它会创造一个 比你通过手动复制 字体的数值 到你的配置中 要更保真的配置 所以最好使用 自定义字体 当你已经有了一个文本 或者一个配置好字体的标签 那就很容易 创造一个与字体相配的配置

关于配置的最后一件事 就是它们是不变的 你不能改变它们 如果你想要改变它们 怎么办呢 那你就得把它们结合起来 有一个方法叫 应用 它可以把 指定的配置应用至 你调用的配置上 我们会采用这个 你请求的配置 然后把所有特定的数值 运用到其他配置中 然后覆盖 或者在基本配置中 设定它们 你会得到一个 可以在其他地方使用的新的配置 但是它们是不可改变的 配置本身也不变

接下来让我们谈谈布局

在我们的 App 中有一个 简单的评论部分 我们想要在下一个版本中 扩展这个部分 同时也开始用标志 我们在这里有头像的 占位符 我现在要把注意力集中在 一行上 Paolo 建议 换成一个新的标志 那么让我们试试看

这看起来好多了 一般来说 如果你想把图片 与文本对齐 你可以使用居中对齐 垂直居中对齐 在大部分情况下 它都会变成你预期的样子 这是最简单不过的了 标志其实 也是如此 你还是可以使用 垂直居中对齐 这实际上是首选的

UIKit 其实也把 排版信息运用到 标志中同时使用它让 标志和文本在 视觉上对齐 有时候两个元素的 框架可能并不会相匹配 所以这个居中是视觉上的 而不是绝对的 但是你 不需要做任何事 系统会帮助你

当然了 标签 可能有时候会不止一行 这时候垂直居中 也能起到很好的作用 标志也是一样 我们还是会使用排版信息 来适当地对齐 标签的中间 对于公开指示器 来说也很好

我们重新来看看这个画面 指示器就在 我所希望的地方 但我其实想要 头像占位符靠近我的第一行 所以我们来移动一下 在这个情况下 你可以使用 基线对齐 到现在为止 这可能有点 难以实现 你也可以选择边缘对齐 因为你知道文本和标签 会出现在那里 或者你也可以选择基线对齐 不过你必须算一算它的偏移 所以这也很奇怪 在这种情况下 针对标志 我们只需要基线对齐 就可以了

谢谢

实际上你可以检测 基线 因为我们 在 UI Image 中引用了一个 名为 baselineOffsetFromBottom 的 新性能 它会展示 正如它所说的 从图像底部到基线的 偏移量数 这是一个可选的 CG 浮动 为什么呢 因为不是所有的图像 都有基线 标志在默认情况下有基线 但是其他的图像并没有 所以你需要检查 图像是否拥有基线 来看你能不能使用它

在 Objective-C 中 针对这个有另外的方法 因为它们并不是可选的

这些基线可能 有意想不到的值 在这种情况下 我们有两个 标志图像 它们与文本相邻 它们大小相同 拥有相同的基线 但如果我们展示出 它们的范围 我们会看到这个 v 形图案 比基线要高很多 而云朵则 正坐在基线上 如果我们看一眼它们的数值 就会发现与底部的 偏移量意味着 向上是正数偏移量 向下则是 负数偏移量

这也意味着 它对于一个 基线在其范围外的图像是有效的 比如这个例子中的 v 型图像 如果你有一个 基线数值为零 这并不代表你没有基线 这代表基线 和图像的底部 是持平的 这听起来很让人吃惊 但却有效

好消息是我们也 增加了 API 可以为图像 增加基线 你可以使用 withBaselineOffsetFromBottom 然后你就可以得到一个 你请求的 有基线配置的新的图像 再次 这是屏幕中的 离图像底部的偏移量 好消息就是 图像会和标志一样表现 这不是一个标志 但却会表现得像一个标志 因为它拥有一些 排版信息 所以你可以为标志图像 使用和普通图像一样的布局 你不需要检查 这个图像是否有基线 然后我使用这个布局 或者另外一个 这一切都更简单了 看看我们的例子 现在我们可以展示真实的头像 有些行则没有头像 这看起来好多了 我只需要将 第一行基线对齐 这真的很简单

我也想简单谈谈 平行对齐问题 你可以看到 图像在相同的纵列中 是平行对齐的 你可以通过指定一个 你想对齐的偏移量 然后把图像放在偏移量中间 来实现这一点 这很简单 然后你可以从偏移量到 文本 或者从 边缘到文本 你实际上应该 居中对齐 甚至平行对齐图像 而不是应用 前置或后续的限制

现在让我们回头看看我们的规范 在这里我想说的是 在默认条件下 初始情况选择中心对齐 不论是平行还是垂直 都是个好主意 在大部分情况中 这就是你想要的 系统也会为你处理一切事情 如果可行的话 它会使用排版信息 不然它就会使用 旧式的对齐方式 在这种情况下 Paolo 指定了基线对齐 因为第二行 -- 第二个项目有两行 所以我们需要 使用基线 然后我们可以回到 基线对齐 但是 这也非常简单 这个规范也恰当地 指定了图像的 平行对齐

这使得规范 易于阅读

现在让我们来看一下按钮

按钮 --- 在 UIKit 中 有很多按钮

我们有两种类型的按钮 系统按钮和 常规按钮 让我们先从系统按钮开始

首先 UIKit 里的所有 按钮都有一个预设的 标志配置 对于系统按钮来说 它的主体是大号的 这意味着它会 根据动态类型的变化进行反应 有着正文文本风格 和大的尺寸 你们不觉得如果你不仅可以创造 在 Wi-Fi 网络列表的 信息按钮 还可以使用你自己的标志图像 创建和长相它一样的 属于你自己的系统按钮 是一件非常好的 事情吗 我们认为这是一个很好的主意 我们增加了一些 在 UIButton 的初始化程序 让你可以创建一个 拥有标志图像的系统按钮 它会表现得像一个 -- 像一个常规的标志图像 现在 让我们来看看 常规按钮 在这个例子中 我有个弹出式窗口 它们在这个视图中 作为行动使用 这些标志在这真的大放异彩 他们都在恰当的位置

一个常规的按钮 一般会有一个中等大小的预设

现在我们已经说过 -- 关于这些预设大小的事情 如果你想改变它们怎么办呢 在 UIButton 上 有和在 UIImageView 上相似的 API 它的名字是 PreferredSymbolConfiguration forState 它和 UIButton 上的其他内容访问器 工作原理一样 你可以为配置设定为 某些状态 它会给你最大化的弹性 因为你可以设置 一个图像 你可以设置 一个配置 或两者都设置 它也会运行得很好

另一个按钮的例子就是这个 它某种程度上展现了 我们所认为的 标志与文本完美融合 这并不意味着它们经常紧挨着 这两个按钮应该在一起 它们的配置 是相同的 不论是左边的按钮 还是右边的按钮 优先加载的标志配置 与右边按钮的字体 是相配的 两者唯一的区别是 左边的按钮有一个标志 右边的按钮 有一个文本 你可以看到它们的 基线是一样的 因为它们的配置是完全相同的 它们也有相同的 度量标准 这让布局更加简单

为了完成我们的 按钮工作 -- 我提到过 在 UIKit 上有很多按钮 我们可以看看状态栏按钮 我们更新了 UIKit 中的原图以使用标志 它不仅可以运用在 状态栏按钮中 还可以运用在任何地方 状态栏按钮与这些新的原图 完美契合 现在 如果你要退回到 之前的系统 你需要记住 如果你在旧系统中 创建了自定义原图 与新的更新的原图相比 你会得到之前的更细的原图 所以请记住 如果你为旧的版本 创建了素材

你可以使用带图像的 状态栏按钮的标志 针对此我们有现成的 API 你只需要放一个标志 在那就行 它将与系统按钮 完美契合 你不需要做任何事 这就是所有你需要做的事情 再一次 像常规按钮一样 状态栏按钮也有 预设好的配置 在任何不压缩的尺寸类中 比如你手机中的 人像模式 配置都会很大 如果你旋转你的手机 最后到了一个压缩尺寸类 我们会把按钮上的配置 改成中等 这会将标志调用得 更小 也可以 完美地契合更压缩的 状态栏 这也意味着 你不再需要提供一个 二级图片 因为系统会帮你完成一切工作 它会缩放来使用 内置的标志缩放比例 在 iPad 上 我们 -- 因为我之前提到过的事情 我们经常会有一个大尺寸的 现在关于标志的另一个东西 就是渲染模式 任何常规图像

都有比如颜色数据的导入 但是对于标志来说 这是不一样的 它有一个固有的模式 它没有一个固有的颜色 我们使用 tintColor 来渲染标志 如果我们没有 tintColor 那就使用黑色 但是不要依赖于黑色 因为它不想 -- 与深色模式融合得很好 它可能有改变的倾向 它如何运行呢 任何图像的渲染模式 都是自动的 到现在为止 对任何图像来说 它们都经常偏向 始终绘制原始状态 现在 对标志来说 情况不同了 非标志图像 还是倾向始终绘制原始状态 标志图像则会偏向 始终根据 tintColor 绘制图像 这意味着我们会 使用 tintColor 来为他们上色 事情就是如此 你可以通过现有的 API 来改变一个图片的 渲染模式

我们已经讲到了 基本的 UIKit 控制 但有时候你可能会想 在一个图形环境中绘制图像 00:33:55.136 --> 00:33:56.476 A:middle 这个时候你可能会用到

draw(in Rect

那么 对于标志来说 正如我之前提到的 这可能不是一个好主意 因为它们想要保留 原始的尺寸 所以这里最好使用 draw(at 让图像决定 它想要多大的尺寸

但是我们有一个问题 我们有一张这样的图片 但是它太小了

在默认状态下 图片有一个 未指定的配置 我们没有指定任何东西 如果我们只是 -- 如果你们必须 渲染 而我们没有找到 一个特定的数值 我们会回到系统初始状态 在这种情况下 它最终会是一个非常小的图片 现在我可以创建 一个配置让它变得更大 - 34 磅 粗体 然后使用新的 API withConfiguration 将 配置运用在图片上 然后我们可以获得一个 嵌入该配置的新图片 我们创造出了这个 更大更粗的茶杯 这就是我想要的

再回到我们的弹出式窗口 Paolo 也让我们 改变那里的文本 因为标志在文本中很契合 我们可以用一些词语来替换 标志吗 答案是肯定的 标志本质上是排好版的 但它们仍然是图片 所以我们需要使用 拥有 NSTextAttachment 的属性字符串

现在 这个代码看起来 有点熟悉了 但是我们 有一个新的 API 那就是 NSTextAttachment(image 它会通过附加的图片 创造一个文本附件

现在这个文本附件 比常规的要更加智能 它了解标志 也会检查标志周围的字符串 来尽力完成 标志的配置 它会查看字体大小 粗细程度 但是同时还有颜色 然后一个完整的图片就 绘制完成了

旧的 API 或者现有的 API 创建文本附件 然后指派的图片 还是可以运行 但是不会获得相匹配的行为 当然了 你也可以 使用拥有常规图形的 新的 API

Paolo 在这里还想要一些颜色

看起来更好了

是的 我们又创造了一些新的 API 去实现它

你现在可以给一张图片着色了 所以 withTintColor 给图片 应用一种颜色 它使用起来 非常高效 它只有在需要的时候 才渲染颜色 然后它 会寻找最有效的方法 来做到这点 在此之前 你可能 必须对图像进行栅格化 并且 并将它渲染到图形上下文中 然后再应用颜色 你再也不需要 这么做了 这样就搞定了

这对于标志来说 格外重要 因为它们没有 一个固定的颜色 这就给了它们一个颜色 现在 标志也有了 不同的渲染模式 所以如果你真的想要让那种颜色 弹出 你必须改变 渲染模式 你可以 使用这个可选参数 一次性完成 现在 这两个 API 还没有包含在 第一个 beta 版里 但是它们 很快就会被包含

所以我们已经看过了很多 API 我们认为我们提供了一个 很棒的工具组可以让你们的 App 在 iOS 13 中大放异彩 但是 这里有几个建议 与边缘对齐相比 应更倾向于水平和垂直居中 它是一个思路上的转变 但是一旦你弄明白了 它就会真的奏效

试着从最小元素到 最大元素 构建你的布局 从一些小东西开始 然后把它们当成一块积木 去做成更大的东西 这是非常容易 并且灵活的 图像大小可以改变 这就允许你的图像视图 和他们的图像尺寸相同 但是注意 它们是可以更改的 它可能发生在运行时 或者 App 启动时 又甚至 是系统更新时

缓存图像通常 没有什么用

它是 Bug 的一大来源 系统已经竭尽所能地 提供了最好的性能 并且缓存真的会 覆盖 所以没必要那样做

最后 栅格化 在大多数情况下 是最坏的解决方案 起码不是修复问题的 最佳解决方案 所以节省你的 CPU 资源 来做些有用的事情 让系统栅格化图像吧 尽量避免栅格化 图像 特别是 标志图像

今天上午的 可访问性和本地化会议 非常有趣 因为标志使这些领域的适配 变得简单得多 明天将会推出 深色模式 该模式下 标志会因为暗色调 而非常闪耀

这还有两个实验室你可能 会感兴趣 在周四有文本和 SF symbols 实验室 以及字体实验室 在周五下午 还有一个设计实验室 当然 任何 UIKit 实验室都 欢迎你们 非常感谢你的聆听 享受接下来的 WWDC 大会吧 [掌声]