UIKit 和 AppKit 中的 SF Symbols

了解如何使用 SF Symbols 3 创建彩色符号并对其进行自定义，以与您的 app 界面的视觉设计匹配。我们将向您介绍用于集成彩色符号的最新 UIKit 和 AppKit API，以及针对实现的最佳实践。为了充分了解本节内容，我们建议观看 WWDC19 的“介绍 SF Symbols”。

资源

相关视频

WWDC21

下载

各位好我是汤姆欢迎各位观赏 “UIKit与AppKit中的 SF Symbols” 今天由我带各位畅览如何在app中实现SF Symbols的新功能首先我们会先介绍不同的颜色模式以及如何使用这些模式接着我们会说明怎么结合配置获得您想要的效果最后我们会在属性字符串中使用这些彩色符号你会看到可以用于 AppKit和UIKit的范例新的API在这两个框架下都一样因此只要可适用其中一个另一个也适用除非是某些框架特定的细微差别新功能主要着重在为SF Symbols添加颜色虽然AppKit 在macOS 11加了多色符号 UIKit则是在iOS 15才加入今年发布的版本中会加入 SF Symbols的颜色渲染模式说明一下这些渲染模式在所有平台都能用为了支持新的渲染模式符号现在有不同层级每一层都有不同颜色这些层级会以分层定义意思是一层比另一层更显色这意味着我们有三个分层第一层第二层与第三层

在iOS系统符号需要有模板模式才能让新的渲染模式产生效果而在macOS上套用新的配置会自动设定正确的模板模式

如果你对SF Symbols不熟悉请参考 WWDC19的 “介绍SF Symbols” 我们要看的第一个渲染模式是单色符号这是语音信箱app 在这个界面中使用了几个符号有一个单色符号还有几个使用不同颜色模式的其他符号但是现在先看单色符号之后再回来讨论其他的

如名称所示单色符号只会有一个颜色通常是视图中的着色或强调色为了实现这个结果我们创建新的符号图像将其指派至图像视图并设定着色或强调色以配置符号颜色这里没有更改任何东西我们不需要任何额外的配置来渲染单色符号因为其为默认行为所以在iOS 15和macOS 11之前单色是唯一的渲染模式若要指定颜色只需要在图像视图设定模板或强调色就可以了我们已经说完原本就有的单色模式我们可以来谈谈新模式分层彩色符号在Mac上控制中心使用的图标正是分层符号的好示例控制中心有几个地方会使用符号但是我们先聚焦在显示栏

这里使用了几个符号中间那一排开关按钮以及设备清单的图标设备符号色调比上方的开关按钮还要淡这些是分层彩色符号

分层颜色模式会基于符号的层级为各层上色你设定的颜色会用于第一层而第二层和第三层会使用第一层的颜色变量不透明度逐渐递减

通过新型的符号配置可以指定颜色模式运行方式完全像符号配置原有的类型把图像视图的符号配置设定成这种配置之后符号会以分层彩色符号显示分层彩色符号的配色是以单色打底再降低其不透明度而衍生另一个颜色分层的层级在这里很重要如果少了一层就无法使用相关的衍生色

还有第三种颜色渲染模式调色接下来会发现此模式很像分层渲染模式但又有点不同现在回到我们的语音信箱示例右边的三个钮各有多色各按钮都有不同颜色我们要一次一个步骤地构建这些按钮

首先我们要先用希望的图像初始化我们的按钮我们会使用新的按钮配置可是这些单调的图像完全不是我们想要的风格图像应该要是圆形并且被填充

以前可以通过在符号名称附加想要的修饰词而做到但现在有更好的做法图像变量如名称所示使用图像变量时可以请求图像的不同变量而不需要手动更改名称首先先把我们的图像变成圆形

接着好好填满这些圆圈

由于我们在按钮容器视图指定了变量那些变量会套用到所有按钮的所有图像如果图像没有那个变量就会使用原本指定的图像变量规范会在视图分层传播而该分层中的图像视图接收到之后会施展魔法

有了外型之后我们要怎么为各符号指定颜色呢？我们可以创建新的符号配置指定颜色的调色这些颜色会套用到与分层颜色配置相似的分层但是我们在这里使用的是明确指定色与衍生色我们也会使用调色清单中的新颜色着色意思是视图会自动把着色套用到适当层级

下一个按钮跟之前的做法完全一样加载基底图像建构正确的颜色配置并套用到按钮配置这个例子中看起来跟之前完全一样但是这里有玄机我之后会说明

最后一个按钮也是一样的情况只是颜色不同跟之前一样你可能会想为什么我们这次要明确指定白色难道不能只使用单色符号然后正确地调成浅色吗？答案是不行不能这么做这就是我刚才提到的玄机我们的设计师明确指定这些符号内件一定都要是白色直至现在我们意外得到正确的结果即使使用单色符号为什么？因为我们是在浅色模式可是当我们切换到深色模式单色符号无法产生我们想要的结果这是因为单色版本内件会使用剔除功能所以背景会从间隙渗出现在通过使用调色渲染模式我们确保这些按钮在不同用户界面样式下能正确显现

我前面提过一个新颜色着色这是UIKit的一个新的动态颜色可以调整到其使用之图像的着色明确指定符号层色时这特别有用但是你也能在任何你可以使用其他颜色的地方使用这个颜色不过要切记动态颜色的规则依然适用

请看WWDC19 “在iOS实施深色模式”的视频了解更多动态颜色的运行原则有些符号只有两层例如有一堆符号都没有第二层遇到这种符号我们该怎么处理调色模式？

有个好示例是设备符号这种符号只有第一层和第三层

我们要怎么用两层颜色帮这个iPad符号上色？由于符号最多可以有三层你可以直接明确指定三个颜色一层一色

这个例子中没有使用第二色因为没有第二层不过面对只有两层的符号时有另一个方法可以处理面对这类符号我们可以在配置中只指定两个颜色然后这两色会依序套用到可用的分层

前面的方法可以在面对层数不一的符号时维持指定调色方式的一致性因为颜色直接对应到正确的分层

后面提到的方法则是在你肯定符号只有两层时很方便

调色配置会明确指定一组套用到该符号分层的颜色跟分层渲染模式不同调色渲染模式不会创建衍生色而与分层渲染模式类似之处在于各符号层的分层很重要针对不到三层的符号还有一个方便的解决方法这就要进入最后一个渲染模式多色我之前有提过这个颜色模式是去年就加入AppKit和SwiftUI 但是今年才引进UIKit

这类模式有些有多色的图像这些是多色符号现在来看看要怎么实现

首先我们需要加载各单位的图像目前这些是一般符号默认模式是单色模式

接着我们需要表明我们想要多色符号那就要创建一个配置请求符号的多色变量并把这个配置指派到图像视图

但是有一个图标没有改变它的符号不支持多色所以要如何得知哪个符号支持多色呢？有个简单的方法是使用SF Symbol app 搜索该符号然后使用检查器来查看该符号支持哪个颜色渲染模式例如我们的火焰符号只支持单色但是肺符号四种颜色渲染模式都支持

此外在这里也能玩一下各层的颜色图以更确实感受符号呈现的效果而不用再写一行代码现在回到我们的示例

由于不是所有符号都支持多色我们需要手动把着色设定成正确数值以让符号正确显示

有些多色符号有浅色层会受到视图的着色或强调色影响没有这一层的符号不会受影响在我们示例中的符号都不会受影响所以一切照常

你可能可以从配置的名称中猜到多色配置代表偏好符号的多色渲染模式如我之前所说并非所有符号都有多色变量你可以结合一个多色配置与另一个不同的颜色配置但是详情之后再提产生的配置便能支持两种模式有多色模式时可支持没有的话就切换成其他颜色模式注意如果结合分层模式和调色模式会产生最后指定模式因为它们会一起被排除如果反过来该颜色模式不被支持系统就会使用单色模式

所以多色符号有固定的颜色组合不能更动代码此外有些符号有一层可以用着色或强调色渲染的分层要产生作用你什么都不用改符号会在显示时从图像视图挑选正确的浅色或强调色

现在四种颜色模式以及在代码中如何使用都介绍完了但是在界面生成器也能这样处理吗？幸好答案是可以 Xcode已经加入类似的功能以直接从整合开发环境配置颜色渲染模式

这是Xcode Open 显示的是Planets app分镜脚本图像视图界面已经扩展成可以指定颜色渲染模式产生的颜色配置也能与先前原有的配置结合如果想知道更多界面生成器的新功能请参考今年的 “用风格建构界面” 我们已经介绍完这些不同的颜色模式要怎么把它们与其他配置结合产生更复杂的效果呢？幸好并不难现在再看另一个示例这次用快捷指令app 各个操作的图标都相当大但是看起来也有分层颜色渲染模式所以我们需要两个配置一个用来指定字体大小一个用来指定颜色配置

但是我们只能套用一个指令要怎么结合在一起？原来有个简单的方法有个方法可以结合两个配置产生同时拥有两种配置之元素的一个配置

在这个示例中我们创建两个配置一个用来规定字体大小另一个用来规定分层颜色

接着用套用的方法将之结合产生最终配置配置会套用到图像视图显示图像给我们想要的效果请注意此机制不只限于颜色配置也能用在其他类型的配置例如结合文字、字体和粗细

现在我们知道如何结合不同的配置还剩下一个主题在属性字符串使用彩色符号这是最后一个示例这是一个想象的app 列出不同的旅馆以及空房信息有几个地方符号结合了文字但是先把重点放在房间设施以及我们如何实现此文字相当简单但有点复杂我们必须用图像附件建造一个属性字符串

首先先加载图像用正确的颜色配置在这个例子中我们会使用分层颜色配置

我们用这个图像创建文字附件然后再用这个附件完成我们的属性字符串接着在所有空房设施中重复在显示文字的标签上我们也能指定正确的字型以及跟分层颜色配置相同的文字颜色

单色符号会自动选择文字颜色但是如果是有颜色配置的符号我们必须明确指定颜色彩色符号会选用字串指定的字体大小跟单色符号一样

完成这些步骤后我们会得到想要的结果内容、颜色和大小都正确的标签这要感谢属性字符串的符号整合

除了SF Symbol原有颜色模式之外我们还介绍了三种新颜色模式我们解释了如何在app中使用这些模式符号可以为app添加高质量图像彩色符号又更加以扩充拥有更多可能性

如果喜欢这节视频请别错过几个相关视频可观看“SF Symbols的新功能” 可以作为新功能的入门或看看 “SwiftUI中的SF Symbols 学习如何在SwiftUI 应用新符号感谢收看现在开始动手做些厉害的app吧！ [轻快的音乐]

1:52 - Monochrome symbols

// Play

let playImage = UIImage(systemName: "play")

playImageView.image = playImage 
playImageView.tintColor = .systemBlue

3:00 - Hierarchical symbols

// Device image

var image = NSImage(systemSymbolName: "ipad.landscape",
                    accessibilityDescription: "iPad")

let config = NSImage.SymbolConfiguration(hierarchicalColor: .label)

deviceView.image = image
deviceView.symbolConfiguration = config

4:13 - Setup button configurations

// Initialize button configuration

let speakerConfig = UIButtonConfiguration.plain
speakerConfig.image = UIImage(systemName: "speaker.wave.2")

let callConfig = UIButtonConfiguration.plain
callConfig.image = UIImage(systemName: "phone")

let deleteConfig = UIButtonConfiguration.plain
deleteConfig.image = UIImage(systemName: "trash")

4:40 - Image variants

// Button container view

actionsView.imageVariant = .none

4:44 - Image variants

// Button container view

actionsView.imageVariant = .circle

4:51 - Image variants

// Button container view

actionsView.imageVariant = .circle.fill

5:09 - Speaker button color configuration

// Speaker button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.tintColor, .systemGray2])

speakerConfig.preferredSymbolConfigurationForImage = config
speakerButton.configuration = speakerConfig

5:40 - Call button color configuration

// Call button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .tintColor])

callConfig.preferredSymbolConfigurationForImage = config
callButton.configuration = callConfig

5:56 - Delete button color configuration

// Delete button color configuration

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .systemRed])

deleteConfig.preferredSymbolConfigurationForImage = config
deleteButton.configuration = deleteConfig

6:10 - Colors matter

// Colors matter!

let config = UIImage.SymbolConfiguration(paletteColors: [.tintColor, .systemGray2])

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .tintColor])

let config = UIImage.SymbolConfiguration(paletteColors: [.white, .systemRed])

6:46 - Tint color

view.backgroundColor = .tintColor
label.textColor = .tintColor
searchField.tokenBackgroundColor = .tintColor
tabBarItem.badgeColor = .tintColor

9:03 - Multicolor symbols

// configure table view cell

let image = UIImage(systemName: category.iconName)

cell.imageView.image = image

9:13 - Multicolor symbols

// configure table view cell

let image = UIImage(systemName: category.iconName)

let config = UIImage.SymbolConfiguration.preferringMultiColor

let tintColor = category.colorForIcon

cell.imageView.image = image
cell.imageView.preferredSymbolConfiguration = config
cell.imageView.tintColor = tintColor

9:58 - Multicolor symbols

// configure table view cell

let image = UIImage(systemName: category.iconName)

let config = UIImage.SymbolConfiguration.preferringMultiColor

let tintColor = category.colorForIcon

cell.imageView.image = image
cell.imageView.preferredSymbolConfiguration = config
cell.imageView.tintColor = tintColor

12:25 - Combining configurations

// combined configuration

let image = UIImage(systemImage: "ipad.and.iphone")
headerView.image = image

12:40 - Combining configurations

// Combined configuration

let image = UIImage(systemImage: "ipad.and.iphone")
headerView.image = image

let fontConfig = UIImage.SymbolConfiguration(pointSize: 60, scale: .large)
let colorConfig = UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue)
let config = fontConfig.applying(colorConfig)

headerView.preferredSymbolConfiguration = config

13:20 - Symbols in attributed strings

// Hotel amenities

let amenitiesString = NSMutableAttributedString(...)

if (room.amenities.contains(.tv)) {
    let config = UIImage.SymbolConfiguration(
                         hierarchicalColor: .systemGreen)
    let tvImage = UIImage(systemImage: "tv", 
                          withConfiguration: config)

    let attachment = NSTextAttachment(image: tvImage)
    let attachmentString = NSAttributedString(attachment: 
                                               attachment)
    let tvString = attachmentString.mutableCopy()
    tvString.append(NSAttributedString(" TV, ")

    amenitiesString.append(tvString)
}

13:51 - Symbols in attributed strings

// hotel amenities

let amenitiesLabel = UILabel()

amenitiesLabel.textColor = .systemGreen
amenitiesLabel.font = UIFont.systemFont(ofSize: 25)

amenitiesLabel.attributedString = amenitiesString

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。