如何使用 UIButton.Configuration 使 UIButton 图像动态适应按钮大小并调整大小

Question

我想使用 UIButton.Configuration 在应用程序中创建和配置 UIKit 按钮。

我无法根据按钮本身的大小调整按钮中的图像大小，从而导致图像扩展到按钮边界之外。

在配置之前，我在按钮

.scaleAspectFit

imageView

属性上使用

contentMode

。

import UIKit

class ViewController: UIViewController {

    let button1 = {
        let filterImageUrl = Bundle.main.url(forResource: "filter@2x", withExtension: "png")!
        let filterImage = UIImage(contentsOfFile: filterImageUrl.absoluteURL.path)

        var configuration = UIButton.Configuration.filled()
        configuration.image = filterImage
        configuration.imagePadding = 5
        configuration.cornerStyle = .medium
        configuration.baseBackgroundColor = .darkGray
        configuration.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)


        let button = UIButton(configuration: configuration)
        button.imageView?.contentMode = .scaleAspectFit
        button.translatesAutoresizingMaskIntoConstraints = false

        return button
    }()

    let button2 = {
        var configuration = UIButton.Configuration.filled()
        configuration.image = UIImage(systemName: "line.3.horizontal.decrease.circle")
        configuration.imagePadding = 5
        configuration.cornerStyle = .medium
        configuration.baseBackgroundColor = .darkGray

        let button = UIButton(configuration: configuration)
        button.setPreferredSymbolConfiguration(UIImage.SymbolConfiguration(scale: UIImage.SymbolScale.small), forImageIn: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false

        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(button1)
        self.view.addSubview(button2)

        let constraint = [
            button1.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            button1.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            button1.widthAnchor.constraint(equalToConstant: 30),
            button1.heightAnchor.constraint(equalToConstant: 30),
            button2.topAnchor.constraint(equalTo: button1.bottomAnchor, constant: 10),
            button2.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            button2.widthAnchor.constraint(equalToConstant: 20),
            button2.heightAnchor.constraint(equalToConstant: 20)
        ]
        NSLayoutConstraint.activate(constraint)
    }
}

结果是

---

我尝试使用约束，包括针对封闭 UIButton 的

imageView

约束。

还探索了 UIImage.Configuration

我还期望

contentInsets

配置强制图像在按钮内调整大小

Answer 1

您说得对，图像没有调整大小以适应按钮；恰恰相反。让图像加上配置的

contentInsets

，为您调整按钮的大小。这是一个大致基于您的代码的示例（来自

viewDidLoad

）：

let button = {
    var configuration = UIButton.Configuration.filled()
    configuration.image = UIImage(systemName: "line.3.horizontal.decrease.circle")!
        .applyingSymbolConfiguration(.init(pointSize: 100))
    configuration.cornerStyle = .medium
    configuration.baseBackgroundColor = .darkGray
    configuration.contentInsets = .zero
    let button = UIButton(configuration: configuration)
    button.translatesAutoresizingMaskIntoConstraints = false
    return button
}()

self.view.addSubview(button)

let constraints = [
    button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
    button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
]

NSLayoutConstraint.activate(constraints)

要改变“边框”的量（填充？边距？），请更改

contentInsets

值。