如何让UIButton.Configuration下的按钮图片自适应按钮尺寸

当使用UIButton.Configuration创建按钮时，直接设置button.imageView?.contentMode不会生效——因为Configuration的布局系统会接管内部视图的渲染逻辑，导致图片无法自适应按钮尺寸。以下是针对本地图片和SF Symbol图片的两种解决方案：

1. 本地图片适配（对应button1） #

给本地图片添加UIImage.Configuration，明确指定其contentMode为.scaleAspectFit，让图片自动适配按钮的可用空间：

let filterImage = UIImage(contentsOfFile: filterImageUrl.absoluteURL.path)?
    .withConfiguration(UIImage.Configuration(contentMode: .scaleAspectFit))

2. SF Symbol图片适配（对应button2） #

结合Symbol缩放配置和图片的contentMode配置，同时调整按钮的内边距，避免小按钮内的图片被裁剪：

let symbolConfig = UIImage.SymbolConfiguration(scale: .small)
let symbolImage = UIImage(systemName: "line.3.horizontal.decrease.circle", withConfiguration: symbolConfig)?
    .withConfiguration(UIImage.Configuration(contentMode: .scaleAspectFit))
// 小按钮适当减小内边距，给图片留出更多显示空间
configuration.contentInsets = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)

修改后的完整代码 #

import UIKit

class ViewController: UIViewController {

    let button1 = {
        let filterImageUrl = Bundle.main.url(forResource: "filter@2x", withExtension: "png")!
        // 给本地图片添加自适应配置
        let filterImage = UIImage(contentsOfFile: filterImageUrl.absoluteURL.path)?
            .withConfiguration(UIImage.Configuration(contentMode: .scaleAspectFit))

        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.translatesAutoresizingMaskIntoConstraints = false

        return button
    }()

    let button2 = {
        // 组合Symbol缩放与图片自适应配置
        let symbolConfig = UIImage.SymbolConfiguration(scale: .small)
        let symbolImage = UIImage(systemName: "line.3.horizontal.decrease.circle", withConfiguration: symbolConfig)?
            .withConfiguration(UIImage.Configuration(contentMode: .scaleAspectFit))
        
        var configuration = UIButton.Configuration.filled()
        configuration.image = symbolImage
        configuration.imagePadding = 5
        configuration.cornerStyle = .medium
        configuration.baseBackgroundColor = .darkGray
        // 小按钮减小内边距，避免图片空间不足
        configuration.contentInsets = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)

        let button = UIButton(configuration: configuration)
        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.Configuration使用系统内置的UIContentView管理内部布局，直接修改imageView的contentMode会被Configuration的逻辑覆盖。通过给UIImage本身绑定contentMode配置，能让图片在渲染阶段自动遵循缩放规则，适配按钮的可用空间。同时调整contentInsets可以平衡内边距和图片显示区域的比例，避免小尺寸按钮出现图片裁剪问题。

内容的提问来源于stack exchange，提问作者psykocouac