iOS开发：动态宽度Button/View水平渐变仅显示一半问题求助

我之前也踩过这个坑，核心问题其实很明确：你当前的代码只在调用applyGradient时给渐变层设置了一次frame，但当视图通过AutoLayout动态调整宽度（比如自适应内容、屏幕旋转、布局更新）时，CAGradientLayer不会自动同步视图的新bounds，导致渐变层停留在初始的大小，自然就只显示一半了。而固定宽度150时正常，是因为此时视图的bounds在调用方法时已经是最终状态，后续没有布局变化。

修复方案一：布局更新时同步渐变层frame #

这个方案适合不想自定义视图的场景，核心是保存渐变层引用，在布局变化时更新它的frame：

首先给你的Button/View添加一个存储渐变层的属性：

private var gradientLayer: CAGradientLayer?

然后修改applyGradient方法，复用已有的渐变层（避免重复添加）：

func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
    if let gradient = gradientLayer {
        // 已有渐变层，直接更新属性
        gradient.colors = colours.map { $0.cgColor }
        gradient.startPoint = orientation.startPoint
        gradient.endPoint = orientation.endPoint
    } else {
        // 首次创建渐变层并添加
        let gradient = CAGradientLayer()
        gradient.colors = colours.map { $0.cgColor }
        gradient.startPoint = orientation.startPoint
        gradient.endPoint = orientation.endPoint
        self.layer.insertSublayer(gradient, at: 0)
        gradientLayer = gradient
    }
    // 立即同步一次当前bounds
    gradientLayer?.frame = self.bounds
}

最后重写layoutSubviews方法，确保每次布局完成后更新渐变层的frame：

override func layoutSubviews() {
    super.layoutSubviews()
    gradientLayer?.frame = self.bounds
}

修复方案二：自定义视图，让底层Layer直接是CAGradientLayer #

这是更优雅的方式，让视图的底层Layer继承自CAGradientLayer，这样它会自动跟随视图的bounds变化，不需要手动维护frame：

比如自定义渐变Button：

class GradientButton: UIButton {
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
        guard let gradientLayer = self.layer as? CAGradientLayer else { return }
        gradientLayer.colors = colours.map { $0.cgColor }
        gradientLayer.startPoint = orientation.startPoint
        gradientLayer.endPoint = orientation.endPoint
    }
}

或者自定义渐变View：

class GradientView: UIView {
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
        guard let gradientLayer = self.layer as? CAGradientLayer else { return }
        gradientLayer.colors = colours.map { $0.cgColor }
        gradientLayer.startPoint = orientation.startPoint
        gradientLayer.endPoint = orientation.endPoint
    }
}

之后直接实例化GradientButton/GradientView调用applyGradient即可，无论视图宽度怎么动态变化，渐变都会完整显示。

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