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

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

斯威夫特用户界面

\n

分层的

\n

使用.foregroundStyle修饰符。

\n

来自苹果：

\n

\n

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

\n

\nImage(systemName: "exclamationmark.triangle.fill")\n .symbolRenderingMode(.hierarchical)\n .foregroundStyle(Color.purple)\n

\n

\n

调色板

\n

使用.foregroundStyle具有 2 或 3 种颜色作为参数的修改器。

\n

来自苹果：

\n

\n

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

\n

\nImage(systemName: "exclamationmark.triangle.fill")\n .symbolRenderingMode(.palette)\n .foregroundStyle(Color.yellow, Color.cyan) \n

\n

\n

多色的

\n

使用.foregroundColor具有 1 种颜色的修改器以及.renderingMode(original).

\n

来自苹果：

\n

\n

多色行为是通过使用原始模板渲染模式以及蓝色前景色来实现的。此模式使图形覆盖图像的独特部分的前景色。

\n

\nImage(systemName: "person.crop.circle.badge.plus")\n .renderingMode(.original)\n .foregroundColor(.blue)\n

\n

\n

用户界面工具包

\n

分层的

\n

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

\n

来自苹果：

\n

\n

\nlet config = UIImage.SymbolConfiguration(hierarchicalColor: [.systemTeal])\nimageView.image = image.applyingSymbolConfiguration(config)\n

\n

\n

调色板

\n

使用UIImage.SymbolConfiguration(paletteColors:)初始值设定项和两种或三种调色板颜色。

\n

来自苹果：

\n

\n

\nlet config = UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray])\nimageView.image = image.applyingSymbolConfiguration(config)\n

\n

\n

多色的

\n

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

\n

来自苹果：

\n

\n

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

\n

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

\n

\n

• 其渲染模式设置为UIImage.RenderingMode.alwaysTemplate或UIImage.RenderingMode.automatic。

  \n
\n

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

  \n
\n

\n

\nlet config = UIImage.SymbolConfiguration(hierarchicalColor: [.systemTeal]).preferringMulticolor()\nimageView.image = image.applyingSymbolConfiguration(config)\n

\n

\n