SwiftUI SF Symbols 好处及其使用指南


SwiftUI SF Symbols 好处及其使用指南

SF Symbols在WWDC 2019期间推出，对我们开发人员来说是一个很大的礼物。 Apple基本上为我们提供了免费符号，供我们在应用程序中使用，而且使用它们甚至也非常容易！ 通过在WWDC 2020中引入SF Symbols 2.0，我们有了更多的可能性在我们的应用中显示精美的图标。

现在该深入探讨它们的详细信息以及如何使用它们来使您的应用看起来既美观又与系统应用程序保持一致.

什么是SF符号？

SF Symbols是一组1500多个符号，可在应用程序中使用。 它们可以按照各种重量和秤进行对齐和配置，以适应您的设计。 由于它们已集成到San Francisco系统字体中，因此它们会自动确保与所有重量和大小的文本垂直对齐。

什么是SF符号

哪些平台支持SF Symbols？

SF Symbols支持的平台是：

  • iOS 13及更高版本
  • watchOS 6及更高版本
  • tvOS 13及更高版本

由于符号包含在San Francisco系统字体中，因此您也可以在Mac应用程序中使用它们，但适用许可协议.

SF Symbols 2.0 –有什么新功能？

WWDC 2020引入了SF Symbols 2.0，并进行了一些非常受欢迎的更改。稍后，随着SF Symbols 2.0应用程序的面市，它们还不是全部可见。让我们回顾一下截至今天Xcode 12中可用的更改。

最新Beta版本中超过750个新符号

SF Symbols 2.0包括750多种新符号，包括设备，健康状况，运输符号等。新符号仅在iOS 14，iPadOS 14和macOS Big Sur的Beta版中可用。

改善光学对准

使用SF符号的挑战之一是光学对准。如果与San Fransisco系统字体一起使用，则可以自动确保垂直对齐，但是直到1.1版之前，都无法水平对齐符号以使其在所有情况下看起来都很好。

通过2.0更新，您现在可以为符号提供标准和自定义符号都支持的负边距。这应该给您足够的控制，以在视觉上水平对齐符号。例如，您可能有一个包含徽章的符号，在这种情况下，您需要在视觉上稍微水平地移动符号。

一个小警告是，这些符号中的两个可以彼此相邻放置，并且具有与两个符号重叠的负边距。尽管这种情况很少见，但您可能需要在两者之间添加额外的空间或其他内容，以免发生冲突。

SF Symbols 2.0添加了对多色符号的支持

乍一看，您现在似乎可以为SF符号着色。但是，通过应用简单的色泽已经可以做到这一点。与有色符号相比，新引入的多色符号具有独特性，因为它们会自动适应外观模式，辅助功能设置和鲜艳度。这是快速支持许多不同方案的好方法。

局部符号变体

另一个重要的新功能是支持从右到左书写系统的本地化符号变体以及希伯来语，阿拉伯语和梵文的特定于脚本的符号。这些变体经过优化，在那些系统中看起来很棒。

我可以到处使用符号吗？

不，绝对不是！密切注意适用的许可协议。如Apple所言：

您不得在应用程序图标，徽标或任何其他与商标相关的用途中使用SF符号（或实质上或令人困惑的字形）。 Apple保留进行审查的权利，并有权单方面决定要求对违反上述限制的任何Symbol进行修改或中止使用，并且您同意立即遵守任何此类要求。

限制符号

除了许可协议之外，还有一系列符号，只能用于引用特定的Apple技术。如果您使用符号来防止应用在商店中被拒绝，那么经常访问此列表是一件好事。

这些符号的完整列表可在“按原样使用的符号”段落下找到。

如何浏览可用的符号？

Apple提供了SF Symbols应用程序，可让您浏览，复制和导出任何可用的符号。该应用程序可在此处下载，并且可用于macOS 10.14及更高版本


如何浏览可用的符号

该应用程序允许您浏览符号并以选定的重量显示它们。 上图显示了中等重量的图标，下图显示了在UltraLight重量中相同图标的外观

移植符号

Mac应用程序允许您使用文件->导出符号...或?E将所有符号支持为SVG。 这是在您无法使用字体本身的地方包含符号的好方法。 但是，请记住许可协议。

浏览网上的符号

值得一提的是，您也可以在sfsymbols.com上浏览符号。通过在此网站上进行搜索，您可以获得的好处之一是，您可以查看每个图标（如果存在）的应用限制：
但是，由于前面所述的许可证限制，它们只能显示符号的名称，使用Mac应用程序仍然会更好。

创建自定义符号

只要没有符合您要求的符号，便可以创建自定义符号。 导出的SVG版本的符号结构良好，可以用作自定义符号的基础。

WWDC 2019的SF Symbols简介会议对如何使用自定义符号进行了深入说明.选择正确的符号作为基本参考,最好从与您想要的符号接近的符号开始。 要知道它们已经受版权保护，您不能使用Apple产品的复制品，也不能在自定义符号中复制它们。 另外，请查看前面提到的按原样使用的符号列表，因为这些符号无法自定义。
大多数形状也都可用，但其中没有图标。 例如circle或circle.fill：

圆圈符号是自定义符号的理想基础

这是自定义符号的一个很好的起点！

我需要支持所有的体重秤吗？

好吧，您实施的权重和标度越多，支持的文本设置范围就越广。 在所有比例下，最小值应为常规，中等，半粗体和粗体，以便您可以支持动态类型和粗体文本设置。

如何验证我的自定义SF符号？

该应用程序允许您通过菜单来验证自定义SF符号：文件?验证自定义符号...。浏览并选择自定义符号以开始验证。

导出和使用自定义符号

将符号导出到SVG后，您只需将符号拖到Xcode中的资产目录中即可。

在Xcode中添加到资产目录的自定义符号

它显示符号的预览，并允许您配置其名称，外观，方向和本地化。

在iOS 12及更低版本上使用自定义符号

仅iOS 13及更高版本支持符号。 在做旧的系统版本的情况下，Apple做出了出色的工作，使我们可以轻松地重新获得图像。 只需为您的图像提供与自定义符号相同的名称，如果需要，下面的代码行将退回到该图像：

1
let customSymbol = UIImage(named: "my_custom_symbol")

如何在Swift中使用SF符号

要在Swift中使用SF Symbol，可以使用新的UIImage（systemName :)初始化程序：

1
let image = UIImage(systemName: "square.and.pencil")

如您所见，Apple使SF符号的使用变得非常容易：

在SF Symbols Mac应用中浏览并找到您的图标
使用??C复制符号名称
使用UIImage（systemName :)初始化程序中的名称
在UIImageView，UIButton或任何其他UI元素中使用图像
如何在Swift中更改SF符号的比例？
要更改SF Symbol的比例，可以使用UIImage Symbol Configuration。

1
2
let smallConfiguration = UIImage.SymbolConfiguration(scale: .small)
let smallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: smallConfiguration)

如何在Swift中更改SF符号的权重？

权重也可以通过UIImage符号配置来更改。

1
2
let ultraLightConfiguration = UIImage.SymbolConfiguration(weight: .ultraLight)
let ultraLightSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: ultraLightConfiguration)

在UIImageView和UIButton中更改符号配置

UIImageView和UIButton类带有新的属性preferredSymbolConfiguration，该属性使您可以将特定配置应用于图像视图中设置的任何符号。

1
2
3
let imageView = UIImageView(image: defaultSymbolImage)
let updatedConfiguration = UIImage.SymbolConfiguration(weight: .bold)
imageView.preferredSymbolConfiguration = updatedConfiguration

只要在图片视图中进行设置，就会更改符号。 正如您在下面的Swift Playground图片中所看到的，该符号也被更改为蓝色。带SF符号的已配置UIImageView,这是从图像视图上设置的色彩继承的。 如果要确保符号始终以特定的颜色显示，可以使用withTintColor方法：

1
2
let heartImage = UIImage(systemName: "heart.fill")!
let redHeartImage = heartImage.withTintColor(.red, renderingMode: .alwaysOriginal)

组合配置

如果您要保存多个配置以在整个应用中使用，则可能是您希望对共享配置进行小的调整。

您可以使用Apply方法轻松完成此操作。

1
2
3
4
let boldLargeConfig = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .bold, scale: .large)
let smallConfig = UIImage.SymbolConfiguration(scale: .small)
let boldSmallConfig = boldLargeConfig.applying(smallConfig)
let boldSmallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: boldSmallConfig)

对齐符号

新的UIImage.withBaselineOffset（fromBottom :)方法允许您从图像的底部向图像应用新的偏移量。 此方法在图像的一般使用中也可能有用。

推荐

基础文章推荐

  • 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

  • 更新近百篇SwiftUI教程《SwiftUI2020教程》
  • 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

上新

  • 《WWDC2020专栏》
  • 《SwiftUI WWDC2020 新增组件列表》

技术源码推荐

推荐文章

CoreData篇

  • SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
  • SwiftUI进阶之存储用户状态实现登录与登出
  • SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

Combine篇

  • 一篇文章学懂弄通SwiftUI与Combine(含轮播动画App源码)

TextField篇

  • 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
  • 《SwiftUI实战之TextField风格自定义与formatters》
  • 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
  • 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
  • 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

  • SwiftUI JSON文件下载、存储、解析和展示(代码大全)

一篇文章系列

  • SwiftUI一篇文章全面掌握List(教程和源码)
  • 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
  • SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
  • SwiftUI一篇文章全面掌握Form(教程和源码)
  • SwiftUI Color 颜色一篇文章全解决

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

  • 请关注我的专栏icloudend, SwiftUI教程与源码
    https://www.jianshu.com/c/7b3e3b671970