使用 UIButton.Configuration 和 .png 图像创建的 UIButton 中的图标大小错误

Question

我创建了两组 UIButtons，其中包含常规构造函数（附图中的顶部 StackVew）和 UIButton.Configuration（底部 StackView）。 两者都有从 .png 文件创建的图标。

底部按钮的图标不适合按钮尺寸，并且似乎以原生 .png 尺寸呈现。甚至将 contentMode 设置为 .scaleAspectFill

button.imageView?.contentMode = .scaleAspectFill

如何使图标适合使用 UIButton.Configuration 创建的按钮大小？

环境：XCode 15.4，模拟器 iOS 17.5

import UIKit
class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
     
    let stackView1 = UIStackView()
    stackView1.translatesAutoresizingMaskIntoConstraints = false
    stackView1.distribution = .fill
    stackView1.alignment = .fill
    stackView1.heightAnchor.constraint(equalToConstant: 30).isActive = true
     
    let stackView2 = UIStackView()
    stackView2.translatesAutoresizingMaskIntoConstraints = false
    stackView2.distribution = .fill
    stackView2.alignment = .fill
    stackView2.heightAnchor.constraint(equalToConstant: 30).isActive = true
    
    view.addSubview(stackView1)
    view.centerXAnchor.constraint(equalTo: stackView1.centerXAnchor).isActive = true
    view.centerYAnchor.constraint(equalTo: stackView1.centerYAnchor).isActive = true
     
    view.addSubview(stackView2)
    view.centerXAnchor.constraint(equalTo: stackView2.centerXAnchor).isActive = true
    stackView2.topAnchor.constraint(equalTo: stackView1.centerYAnchor, constant: 80).isActive = true
     
    stackView1.addArrangedSubview(makeButton(backgroundColor: .red))
    stackView1.addArrangedSubview(makeButton(backgroundColor: .blue))
    stackView1.addArrangedSubview(makeButton(backgroundColor: .yellow))
    stackView1.addArrangedSubview(makeButton(backgroundColor: .cyan))
     
    stackView2.addArrangedSubview(makeButtonWithConfiguration(backgroundColor: .red))
    stackView2.addArrangedSubview(makeButtonWithConfiguration(backgroundColor: .blue))
    stackView2.addArrangedSubview(makeButtonWithConfiguration(backgroundColor: .yellow))
    stackView2.addArrangedSubview(makeButtonWithConfiguration(backgroundColor: .cyan))
  }
  func makeButton(backgroundColor: UIColor) -> UIButton {
    let button = UIButton()
    button.setImage(UIImage(named: "apple.png"), for: .normal)
    button.backgroundColor = backgroundColor
    button.imageView?.contentMode = .scaleAspectFit
    return button
  }
   
  func makeButtonWithConfiguration(backgroundColor: UIColor) -> UIButton {
    var configuration = UIButton.Configuration.plain()
    configuration.image = UIImage(named: "apple.png")
    configuration.contentInsets = .zero
      
    let button = UIButton(configuration: configuration)
    button.backgroundColor = backgroundColor
    button.translatesAutoresizingMaskIntoConstraints = false
    button.imageView?.contentMode = .scaleAspectFill
     
    return button
  }
}

Answer 1

奇怪的是，如果我们阅读 Apple 的文档...

UIButton.配置

概述

您可以使用 UIButton.Configuration 配置和更新按钮。按钮配置包含其他方法可用的所有自定义选项，例如 setTitle(_:for:)，并且可以用作这些方法的替代。 或者，您可以将配置与这些其他方法结合使用，并采用新的按钮行为和外观，而无需重写自定义的 UIButton 代码。

UI按钮

指定边缘插入

使用插图添加或删除自定义或系统按钮中内容周围的空间。您可以为按钮的标题 (titleEdgeInsets)、图像 (imageEdgeInsets) 以及标题和图像一起指定单独的插图 (contentEdgeInsets)。应用时，插图会影响按钮相应的内容矩形，自动布局引擎使用该矩形来确定按钮的位置。

当然，如果我们点击这些 Edge Insets 链接中的任何一个，我们会得到指出它们已已弃用的页面，并且没有

.configuration

的等效属性或方法！

请注意弃用注释状态：使用 UIButtonConfiguration 时将忽略此属性。

我不在 Apple 工作，所以这是猜测，但正如我在评论中所说的“我的印象是 Apple 假设 SF 符号将用作使用 UIButton.Configuration 的按钮图像。”而且，我们可以创建自己的自定义符号。

所以，如果我们想要/需要使用位图图像作为按钮......

• 提前或即时调整

  UIImage

  的大小，或者
• 暂时使用

  Edge Insets

  ，并在它们停止工作时更新代码，或者
• 使用

  UIImageView

  进行触摸/点击操作