3

在 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 应用程序中可见：

SF 符号分层渲染颜色

SF 符号调色板渲染颜色

4

1 回答 1

7

SwiftUI

分层的

使用.foregroundStyle修饰符。

来自苹果：

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

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

调色板

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

来自苹果：

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

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

多色的

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

来自苹果：

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

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

UIKit

分层的

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

来自苹果：

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

调色板

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

来自苹果：

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

多色的

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

来自苹果：

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

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

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

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

让 config = UIImage.SymbolConfiguration(hierarchicalColor: [.systemTeal]).preferringMulticolor()
imageView.image = image.applyingSymbolConfiguration(config)
于 2021-09-23T17:50:03.840 回答