解读 WWDC19 - SF Symbols 内置图标库

swift 发布于 2019年09月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,会有更多我的原创内容分享给你~

本站文章均为原创内容,如需转载请注明出处,谢谢。
关注微信公众号
发现更多精彩
swift-cafe