解读 WWDC19 - SF Symbols 内置图标库 - SwiftCafe 享受代码的乐趣

SwiftCafe 享受代码的乐趣

解读 WWDC19 - SF Symbols 内置图标库

swift 发布于 2020年12月16日

这个文章系列旨在给大家介绍 WWDC 2019 苹果发布的最新技术细节. 在这个时间资源稀缺的时代, 对很多开发者来说, 花费整块时间, 把所有的视频都看一遍, 是一件很耗时间的事情. 所以这个系列,我帮大家把这些新内容中最重要的部分整理出来,你可以在任何碎片时间翻出来看一看, 拿出手机, 即可了解苹果最新的技术内容.

---

图标几乎是每个 app 都不可缺少的 UI 元素. 在以往的 iOS 系统中,苹果为一些特定的控件提供了少量的内置图标. 现在在新的 iOS 13 系统中, 苹果为我们提供了一套完善的内置图标库, 大概有 1500 个内置图标, 并且提供了相关的 API 让我们更方便的使用.

这篇文章是对 WWDC 2019 演讲 - Introducing SF Symbols 的解读, 演讲视频地址 https://developer.apple.com/videos/play/wwdc2019/206/.

SF Symbols

在本次 WWDC 的开场介绍中, 就提到了 SF Symbols. 简单来说, 你可以理解为是苹果为我们提供的一套内置的图标库, 下面是一个预览图:

是不是很多, 这其实也只是完整图标库的很小一部分. 并且这些内置图标不仅仅是简单的图片而已, 他们可以像文字一样, 支持加粗操作:

如何找到需要的图标

既然这次苹果提供了这么多的图标, 相信大家可能会想到了, 如何找到自己需要的图标呢. 总不能挨个去翻 API 文档吧. 苹果也为我们想到了这个问题, 并且给出了解决方案 - SF Symbols App.

它是运行在 macOS 系统上的独立 app, 列举出了所有可用的图标外观和名称:

我们看到每个图标都有一个名字了吧, 现在我们可以通过新的 API 来获取这些图标:

UIImage(systemName: "circle")

很熟悉吧, 我们之前通过 UIImage(named:) 来引用我们自定义的图片. 现在新的 API UIImage(systemName:) 可以用来引用这些系统内置图标.

当我们需要用到这些图标的时候, 我们要做的就是通过 SF Symbols App 找到它的名字, 然后用这个名字初始化 UIImage 就可以了:

比如像上面这样, 搜索你想要的图标名称. 你还可以点击图标上面的工具条, 预览当前图标在不同加粗状态下的效果图:

一个独立的 App, 专门为我们处理如何找到需要的图标, 苹果为开发者想的还是很周到的. SF Symbols App 的 beta 版本可以在这里下载:

http://developer.apple.com/design/

设计自定义的 SF Symbols

除了使用系统内置的图标之外, 我们还可以设置自定义的 SF Symbols.

通过点击 File -> Export Custom Symbol Template... 将当前选中图标导出成一个 svg 模板, 然后你团队的设计人员可以通过设计工具打开然后修改这个图标:

设计师修改完之后, 将导出的模板直接拖放到 XCode 的图片资源中:

这样你就可以在项目中直接使用自定义的图标了, 并且它同样支持缩放, 加粗等操作.

如何区分自定义 SF Symbols 图片和普通图片

前面介绍了如何自定义 SF Symbol 图标, 并且把他们添加到项目的图片资源中. 下面来看看另外一种情况, 如下图所示, 项目的图片资源中同时出现了两个 teacup 资源:

很容易看出, 第一个 teacup 是一张普通图片资源, 第二个 teacup 是自定义的 SF Symbol 资源. XCode 允许这两种资源共存, 但规定了一个加载优先级:

上图左边是采用 UIImage(systemName:) 方式加载系统内置的资源, 这个 API 不存在任何冲突, 它只会加载系统内置的资源. 右边的两个情况就存在优先级问题了: UIImage(named:) API, 同时可以加载自定义 SF Symbol 图片,和普通图片. 并且会优先加载 SF Symbol 图片.

当然, 这个规则只在 iOS 13 以上的系统适用, 老版本的系统不会识别 SF Symbol 图片, 所以依然会加载普通图片:

UIImage(named: "teacup")

iOS 12 显示普通图片:

iOS 13 显示 SF Symbol 图片:

所以,如果你要使用自定义的 SF Symbol 图片, 一定要注意命名问题.

配置 SF Symbols 图片的风格

iOS 13 为 SF Symbols 提供了很多外观设置接口。 你可以设置 pointSize 和 weight， 为 Symbols 图片指定尺寸和加粗方式：

imageView?.preferredSymbolConfiguration = UIImage.SymbolConfiguration(pointSize: 30, weight: weight)

从上面可以看到， 新引入的 API UIImage.SymbolConfiguration, 用于创建 Symbol 图标的配置， 将它的实例传递给 UIImageView 的 preferredSymbolConfiguration 属性， 即可完成设置。 weight 参数很多取值：

UIImage.SymbolWeight.ultraLight,
UIImage.SymbolWeight.thin,
UIImage.SymbolWeight.light,
UIImage.SymbolWeight.regular,
UIImage.SymbolWeight.medium,
UIImage.SymbolWeight.semibold,
UIImage.SymbolWeight.bold,
UIImage.SymbolWeight.heavy,
UIImage.SymbolWeight.black

上述参数，对应了如下的预览图：

将 SF Symbols 插入到文字中

SF Symbols 支持缩放，加粗这些操作，还可以直接插入到文字中。 不过这个 API 在当前的 beta 版本中还没引入， 会在后续的更新中放出。

let attach = NSTextAttachment(image: symbolImage)
let attachString = NSAttributedString(attachment: attach)
...
string.insert(attachString, at: 2)总结

苹果在 iOS 13 发布的 SF Symbols 为开发者进一步减少了开发成本，无论你是个人开发者，还是团队，都可以利用 SF Symbols 提供的上千个图标来实现你的 UI 界面。如果 SF Symbols 自带的图标无法满足你产品的需要， 你还可以通过 SF Symbols 模板设计自定义的图标。 所有这些图标，都拥有 SF Symbols 提供的样式 API。

如果你觉得这篇文章有帮助，还可以关注微信公众号 swift-cafe，会有更多我的原创内容分享给你~

本站文章均为原创内容，如需转载请注明出处，谢谢。

---

---