有没有办法实际更改系统图像的 UIImage.SymbolConfiguration 中的背景颜色？还是总是很清楚？

Question

您可以轻松更改系统图像的颜色，例如，在菜单中的操作中使用时：

let conf = UIImage.SymbolConfiguration(paletteColors: [blah])
    .applying(UIImage.SymbolConfiguration(pointSize: 50, weight: .medium))

let acn = UIAction(
    title: "Blah",
    image: UIImage(systemName: "whatever", withConfiguration: conf)
) { [weak self] _ in
    guard let self else { return }
    yourButtonProcess("bleh")
}

但是实际上可以改变（图像本身的）背景颜色吗？

我知道伪造它的唯一方法是构建一个非系统映像，例如https://stackoverflow.com/a/53500161/294884

可以吗？

简而言之，如何真正更改系统图像的背景颜色（适用于无法更改持有该图像的物体的背景颜色的情况。）

不希望堆积相关问题，但我也想知道您是否可以更改 UIAction 的背景颜色（即例如制作“彩虹”颜色编码菜单）。

Answer 1

我发现线程“设置

[UIImage systemImageNamed: ]

的背景颜色”很有启发性：

paletteColors

的

UIImage.SymbolConfiguration

属性允许您定义系统将应用于分层符号的层的颜色调色板。

含义：对于使用

paletteColors

支持多种颜色的符号，它必须具有分层图层注释（如

configurationWithHierarchicalColor:

中所述）。数组中的每种颜色对应于符号中的一个层。如果符号只有一层或没有设计分层注释，则除了第一个颜色之外的所有颜色都将被忽略，最终会得到单色图像。

在您的问题中，如果您想为系统符号设置背景颜色，并且没有合适的分层符号用作背景，则需要将符号覆盖到

UIView

上，并使用背景颜色设置。

// Create a colored background view
let backgroundView = UIView()
backgroundView.backgroundColor = .yourDesiredBackgroundColor // Set your desired color

// Create the symbol configuration
let symbolConfiguration = UIImage.SymbolConfiguration(paletteColors: [.yourForegroundColor])
    .applying(UIImage.SymbolConfiguration(pointSize: 50, weight: .medium))

// Create the image with the symbol configuration
if let symbolImage = UIImage(systemName: "yourSystemSymbolName", withConfiguration: symbolConfiguration) {
    // Create an image view with the symbol image
    let imageView = UIImageView(image: symbolImage)

    // Add the image view as a subview to the background view
    backgroundView.addSubview(imageView)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        imageView.centerXAnchor.constraint(equalTo: backgroundView.centerXAnchor),
        imageView.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor)
    ])
}

// Use `backgroundView` wherever you need the image with a colored background

另一种方法：如果您想要的背景形状可用作系统符号（例如实心圆），您可以将此符号放在主符号后面。这会产生主符号似乎有背景的效果。

// Configuration for the background symbol (e.g., a filled circle)
let backgroundSymbolConfig = UIImage.SymbolConfiguration(paletteColors: [.yourBackgroundColor])
let backgroundSymbol = UIImage(systemName: "circle.fill", withConfiguration: backgroundSymbolConfig)

// Configuration for the foreground symbol
let foregroundSymbolConfig = UIImage.SymbolConfiguration(paletteColors: [.yourForegroundColor])
    .applying(UIImage.SymbolConfiguration(pointSize: 50, weight: .medium))
let foregroundSymbol = UIImage(systemName: "yourPrimarySymbolName", withConfiguration: foregroundSymbolConfig)

// Combine symbols to create an image with a "background"
// Assuming you have a method to overlay these images appropriately

---

但是，如果有合适的分层符号可用于表示背景，您可以通过

paletteColors

属性设置其颜色。
例如：

// Create symbol configuration with palette colors for hierarchical symbol
let config = UIImage.SymbolConfiguration(paletteColors: [.backgroundColor, .foregroundColor])
let image = UIImage(systemName: "yourHierarchicalSymbolName", withConfiguration: config)
imageView.image = image?.withRenderingMode(.alwaysOriginal)

在这种情况下，

.backgroundColor

将应用于分层符号的背景图层，

.foregroundColor

应用于前景图层。

---

UIAction

不直接支持背景颜色自定义。

UIAction

的样式遵循其呈现的上下文的外观，例如菜单。对于特定的背景颜色，您需要自定义包含操作的 UI 元素（例如菜单）。
例如，请参阅“如何更改文本和背景颜色

UIMenu

|

UIAction

(Swift 5)”

Answer 2

简单的答案是“不，你不能使用

UIImage.SymbolConfiguration

更改背景颜色”。 SF 符号没有一般意义上的“背景”。

有多种解决方法，例如从原始图像创建新的

UIImage

，填充新图像的背景颜色。您已经发布了此类解决方案的链接。

有一种方法可以有效地将答案更改为“是”，但需要预先进行大量工作。如果您希望应用背景颜色的 SF 符号数量有限，您可以使用 SF 符号应用程序创建一组自定义符号，每个符号都是原始符号与组件组合的副本，其中所选符号组件是您想要的背景。背景的一个可能组件是“square.fill”。

创建自定义符号集后，您可以将每个符号导出为 SVG。在您的项目中创建一个新资产。对于每个 SVG，使用“符号图像集”添加符号，并将 SVG 拖动到“符号 SVG”方块中。确保每个符号的“渲染为”选项设置为“多色”。确保每个符号都有一个有用的名称（例如“map.square.fill”而不是“Symbol”）。

一旦您的自定义符号作为资产到位，您的代码现在将变成如下所示：

let conf = UIImage.SymbolConfiguration(paletteColors: [.systemBackground, .black, .systemRed])
    .applying(UIImage.SymbolConfiguration(pointSize: 50, weight: .medium))

let acn = UIAction(
    title: "Blah",
    image: UIImage(named: "map.square.fill", in: nil, with: conf)
) { [weak self] _ in
    guard let self else { return }
    yourButtonProcess("bleh")
}

第一个调色板颜色是主要符号颜色。第三个调色板颜色是背景颜色。没有使用第二种颜色。