SF Symbols 分层、调色板和多色渲染模式颜色？

Question

在 WWDC 2021 上，Apple 发布了 SF Symbols 3，它将在 iOS 15 和 macOS 12 中支持新的多色 SF Symbols。

新的颜色渲染模式通过图层注释为符号添加深度和强调
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

在 UIKit 和 Swift 中创建这样的图像的语法是什么？

let configuration = UIImage.SymbolConfiguration(pointSize: 18, weight: .regular, scale: .large)
// set colors...?

let image = UIImage(systemName: "1.circle", withConfiguration: configuration)

如何在 UIKit 中使用新的hierarchical、palette 和multicolor 渲染模式？

这些新的渲染模式和颜色在 SF Symbols 3 应用中可见：

Answer 1

SwiftUI

分层

使用.foregroundStyle 修饰符。

From Apple:

SwiftUI 用前景样式填充第一层，其他的则是前景样式的二级和三级变体。您可以使用foregroundStyle(_:_:) 和foregroundStyle(_:_:_:) 修饰符显式指定这些样式。如果您只指定一个主要的前景样式，SwiftUI 会自动从该样式派生其他样式。

图片（系统名称：“exclamationmark.triangle.fill”） .symbolRenderingMode(.hierarchical) .foregroundStyle（颜色.紫色）

调色板

使用带有 2 或 3 种颜色的 .foregroundStyle 修饰符作为参数。

From Apple:

在这种模式下，SwiftUI 将图像中每个连续定义的层映射到前景样式的主要、次要和三次变体中的下一个。您可以使用foregroundStyle(_:_:) 和foregroundStyle(_:_:_:) 修饰符明确指定这些样式。如果您只指定一个主要的前景样式，SwiftUI 会自动从该样式派生其他样式。

图片（系统名称：“exclamationmark.triangle.fill”） .symbolRenderingMode(.palette) .foregroundStyle（颜色.黄色，颜色.青色）

多色

使用带有 1 种颜色的 .foregroundColor 修饰符以及 .renderingMode(original)。

From Apple:

多色行为[是]通过使用原始模板渲染模式以及蓝色前景色实现的。此模式会导致图形覆盖图像不同部分的前景色。

图片（系统名称：“person.crop.circle.badge.plus”） .renderingMode(.original) .foregroundColor(.blue)

UIKit

分层

使用 UIImage.SymbolConfiguration(hierarchicalColor:) 初始化器。

From Apple:

让 config = UIImage.SymbolConfiguration(hierarchicalColor: [.systemTeal]) imageView.image = image.applyingSymbolConfiguration(config)

调色板

使用 UIImage.SymbolConfiguration(paletteColors:) 初始化器和两个或三个调色板颜色。

From Apple:

让 config = UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray]) imageView.image = image.applyingSymbolConfiguration(config)

多色

使用UIImage.SymbolConfiguration(hierarchicalColor:) 初始化器和preferringMulticolor()。

From Apple:

使用此方法 (preferringMulticolor()) 获取符号的多色变体（如果存在）。此方法是检索多色符号的主要方法。

要使此颜色配置生效，您的符号图像必须具有以下内容：

它的renderingMode设置为UIImage.RenderingMode.alwaysTemplate或UIImage.RenderingMode.automatic。

多色注释。如果您的符号没有多色注释，则生成的图像是单色（模板）符号图像。如果您使用 applying(_:) 将此配置与分层或调色板颜色配置组合，则生成的符号将使用多色变体（如果存在），否则默认为分层或调色板变体。

让 config = UIImage.SymbolConfiguration(hierarchicalColor: [.systemTeal]).preferringMulticolor() imageView.image = image.applyingSymbolConfiguration(config)