带有角半径的渐变UIButton边框

Question

I wrote the code, which works on iPhone X, but doesn't work on iPhone SE. Here's what we have on iPhone SE

Have someone any ideas why it works on iPhone X correctly and doesn't on iPhone SE

I call this function in viewDidLayoutSubviews()

extension UIView {
    enum Direction {
        case horizontal
        case vertical
    }

    func addGradient(cornerRadius: CGFloat, colors: [UIColor], lineWidth: CGFloat, direction: Direction) {
       self.layer.cornerRadius = cornerRadius
        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = colors.map({ (color) -> CGColor in
            color.cgColor
        })

        switch direction {
        case .horizontal:
            gradient.startPoint = CGPoint(x: 0, y: 1)
            gradient.endPoint = CGPoint(x: 1, y: 1)
        case .vertical:
            gradient.startPoint = CGPoint(x: 0, y: 0)
            gradient.endPoint = CGPoint(x: 0, y: 1)
        }

        var shadowLayer: CAShapeLayer!
        shadowLayer = CAShapeLayer()
        shadowLayer.lineWidth = lineWidth
        shadowLayer.path = UIBezierPath(roundedRect: self.bounds.insetBy(dx: lineWidth, dy: lineWidth), cornerRadius: cornerRadius).cgPath
        shadowLayer.fillColor = nil
        shadowLayer.strokeColor = UIColor.black.cgColor
        gradient.mask = shadowLayer
        self.layer.addSublayer(gradient)
    }
}

Answer 1

Since viewDidLayoutSubviews gets called multiple times you have to make sure that you create the gradient layer only once. Add a check like this:

func addGradient(cornerRadius: CGFloat, colors: [UIColor], lineWidth: CGFloat, direction: Direction) {
    self.layer.cornerRadius = cornerRadius

    if let gradient = self.layer.sublayers?.last as? CAGradientLayer {
        // gradient layer already exists - update its frame
        gradient.frame = bounds
    } else {
        // gradient layer does not exist yet - create it
        let gradient = CAGradientLayer()
        gradient.frame = bounds
        gradient.colors = colors.map({ (color) -> CGColor in
            color.cgColor
        })

        switch direction {
        case .horizontal:
            gradient.startPoint = CGPoint(x: 0, y: 1)
            gradient.endPoint = CGPoint(x: 1, y: 1)
        case .vertical:
            gradient.startPoint = CGPoint(x: 0, y: 0)
            gradient.endPoint = CGPoint(x: 0, y: 1)
        }

        var shadowLayer: CAShapeLayer!
        shadowLayer = CAShapeLayer()
        let rectPath = UIBezierPath(roundedRect: self.bounds.insetBy(dx: lineWidth, dy: lineWidth), cornerRadius: cornerRadius).cgPath
        shadowLayer.path = rectPath
        shadowLayer.lineWidth = lineWidth
        shadowLayer.fillColor = nil
        shadowLayer.strokeColor = UIColor.black.cgColor
        gradient.mask = shadowLayer
        self.layer.addSublayer(gradient)
    }
}