在iOS开发中使用SF Symbols

1,753 阅读2分钟

1.简介

SF Symbols 在 WWDC 2019 期间推出符号,并且Apple还在不断的丰富中,它能使我们在APP中使用精美的图标更加容易。

前端开发应该很熟悉,类似前端的 Font Awesome

sf-symbols-intro.png

由于 SF Symbols 是和 San Francisco 系统字体无缝集成的,所以符号会自动与所有粗细和大小的文本对齐。需要注意的是,SF Symbols 有使用的最低系统版本限制,而且由于 SF Symbols 在发展中,不同的符号图标,对版本要求也不一样,使用时需要查图标的系统版本。

  • iOS 13 and later
  • watchOS 6 and later
  • tvOS 13 and later

相关的网站(英文):

2.许可协议

SF Symbols 的使用是免费的,但是需要注意的是,在苹果官方许可协议中,还是有一些限制的:

所有 SF 符号都应被视为 Xcode 和 Apple SDK许可协议中定义的系统提供的图像,并受其中规定的条款和条件的约束。您不得在您的应用程序图标、徽标或任何其他与商标相关的用途中使用 SF 符号(或实质上相似或令人困惑地相似的字形)。Apple 保留审查并自行决定要求修改或停止使用违反上述限制的任何符号的权利,并且您同意立即遵守任何此类请求。

3.使用一

对于 SF Symbols 的查看和使用,方案一:

Apple 提供了一个查看 SF Symbols 的客户端软件。该软件可以查看、编辑、复制、导出可使用的 Symbols。其中编辑是指可以使用图层导入、组织和注释自定义符号,以支持分层、调色板和多色渲染。

打开下面的 Apple SF Symbols 官网,可以很容易看到APP的下载链接。

developer.apple.com/sf-symbols/

4.使用二

对于 SF Symbols 的查看和使用,推荐方案二:

在Mac的App Store中,搜索SymbolsSF,即可看到这个免费App,下载即可:

appStore.png

打开App如下图,我们可以方便的看到,每个 Symbols 的使用版本,以及最重要的对应的SwiftUIUIKit代码:

s1.png

我们也可以点击Appearance进行主题风格的设置,并且当你改变 Symbols 样式之后,下面的代码是自动跟着改变的。

s2.png

比如代码效果如下: SwiftUI

Image(systemName: "trash.circle.fill")
  .renderingMode(.original)
  .font(.system(size: 16, weight: .regular))
  .foregroundColor(.orange)

UIKit

// 1.可以配置 weight、scale、textStyle等
let config = UIImage.SymbolConfiguration(weight: .regular)
// 2.初始化`UIImage`,当然也可以不传 Configuration
let img =  UIImage(systemName: "trash.slash.fill", withConfiguration: config)
// 3.修改颜色 和 mode
let img2 = img?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)

END。
我是小侯爷。
在帝都艰苦奋斗,白天是上班族,晚上是知识服务工作者。
如果读完觉得有收获的话,记得关注和点赞哦。
非要打赏的话,我也是不会拒绝的。