自定义UIButton类的渐变背景超出按钮边框该如何处理？

• 你当前仅在初始化和setup()方法中为gradientLayer设置了一次frame，当按钮后续因自动布局、尺寸适配发生bounds变化时，渐变层的frame不会同步更新，就会出现尺寸和按钮不匹配、超出边框的问题。
• 写死的圆角数值如果后续调整按钮圆角，需要同时修改两处代码，容易出现不一致的情况。

原问题异常效果 #

重写layoutSubviews()方法，在按钮bounds变化时同步更新渐变层的frame，同时让渐变层的圆角自动和按钮layer的圆角保持一致即可。同时注意不要开启按钮layer的masksToBounds，否则你加的阴影会被裁剪掉。

class CustomButton: UIButton{
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    // 核心新增：重写layoutSubviews同步渐变层frame
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = layer.bounds
    }
    
    func setup(){
        layer.cornerRadius = 25.0
        layer.borderWidth = 1
        addShadow()
    }
    
    private lazy var gradientLayer: CAGradientLayer = {
        let color1 = UIColor(red: 254.0/255.0, green: 79.0/255.0, blue: 50.0/255.0, alpha: 1.0).cgColor
        let color2 = UIColor(red: 255.0/255.0, green: 26.0/255.0, blue: 107.0/255.0, alpha: 1.0).cgColor
        let gradient = CAGradientLayer()
        gradient.colors = [color1, color2]
        gradient.startPoint = CGPoint(x: 0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1, y: 0.5)
        gradient.locations = [0,1]
        // 圆角同步按钮的圆角，无需写死
        gradient.cornerRadius = layer.cornerRadius
        layer.insertSublayer(gradient, at: 0)
        return gradient
    }()
    
    func addShadow(){
        layer.shadowOpacity = 1
        layer.shadowRadius = 1.0
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 3)
    }
}

修改后渐变层会始终和按钮尺寸保持一致，不会出现超出边框的问题，同时阴影效果也能正常保留。

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