iOS开发：Swift中如何为按钮Tint设置渐变色？

针对纯白色图标按钮的渐变色tint需求，以下是两种实用的Swift实现方案：

方案一：通过UIButton扩展快速实现 #

直接给UIButton添加扩展方法，无需自定义子类，适合快速集成：

extension UIButton {
    func applyGradientTint(colors: [UIColor], startPoint: CGPoint = .init(x: 0, y: 0), endPoint: CGPoint = .init(x: 1, y: 1)) {
        guard let originalImage = imageView?.image else { return }
        
        // 创建渐变图层
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.frame = bounds
        
        // 创建遮罩层，用原图标作为遮罩内容
        let maskLayer = CALayer()
        maskLayer.contents = originalImage.cgImage
        maskLayer.frame = bounds
        
        // 将遮罩应用到渐变层
        gradientLayer.mask = maskLayer
        
        // 将渐变层插入到imageView下方
        layer.insertSublayer(gradientLayer, below: imageView?.layer)
        
        // 隐藏原图标tint，只显示渐变效果
        imageView?.image = originalImage.withRenderingMode(.alwaysTemplate)
        tintColor = .clear
    }
}

使用示例 #

在viewDidLoad或按钮初始化后调用方法：

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 设置渐变颜色数组，这里用蓝紫渐变举例
    let gradientColors = [UIColor.systemBlue, UIColor.systemPurple]
    // 给目标按钮应用渐变tint
    myIconButton.applyGradientTint(colors: gradientColors)
}

方案二：自定义GradientTintButton子类 #

适合需要频繁调整渐变属性（颜色、方向）的场景，支持动态更新：

class GradientTintButton: UIButton {
    // 渐变颜色数组，修改后自动更新效果
    var gradientColors: [UIColor] = [.systemBlue, .systemPurple] {
        didSet { updateGradient() }
    }
    // 渐变起始点
    var gradientStartPoint: CGPoint = .init(x: 0, y: 0) {
        didSet { updateGradient() }
    }
    // 渐变结束点
    var gradientEndPoint: CGPoint = .init(x: 1, y: 1) {
        didSet { updateGradient() }
    }
    
    private var gradientLayer: CAGradientLayer?
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局变化时更新渐变层尺寸
        updateGradient()
    }
    
    private func updateGradient() {
        guard let originalImage = imageView?.image else { return }
        
        // 移除旧的渐变层
        gradientLayer?.removeFromSuperlayer()
        
        let newGradientLayer = CAGradientLayer()
        newGradientLayer.colors = gradientColors.map { $0.cgColor }
        newGradientLayer.startPoint = gradientStartPoint
        newGradientLayer.endPoint = gradientEndPoint
        newGradientLayer.frame = bounds
        
        let maskLayer = CALayer()
        maskLayer.contents = originalImage.cgImage
        maskLayer.frame = bounds
        
        newGradientLayer.mask = maskLayer
        layer.insertSublayer(newGradientLayer, below: imageView?.layer)
        gradientLayer = newGradientLayer
        
        imageView?.image = originalImage.withRenderingMode(.alwaysTemplate)
        tintColor = .clear
    }
}

使用示例 #

代码创建方式：

let heartButton = GradientTintButton(type: .system)
heartButton.setImage(UIImage(systemName: "heart.fill"), for: .normal)
heartButton.gradientColors = [UIColor.systemPink, UIColor.systemRed]
heartButton.frame = CGRect(x: 50, y: 100, width: 50, height: 50)
view.addSubview(heartButton)

Storyboard/XIB方式：

1. 拖入UIButton到画布
2. 在Identity Inspector中将按钮类改为GradientTintButton
3. 在Attributes Inspector或代码中设置gradientColors等属性

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