渐变 UIButton 的边框与圆角半径答案

【问题标题】：Gradient UIButton's border with corner radius渐变 UIButton 的边框与圆角半径
【发布时间】：2019-03-03 06:03:40
【问题描述】：

我编写的代码适用于 iPhone X，但不适用于 iPhone SE。 Here's what we have on iPhone SE

有人知道为什么它可以在 iPhone X 上正常工作，而在 iPhone SE 上却不能工作

我在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)
    }
}

【问题讨论】：

什么时候调用addGradient函数？
@AndréSlotta in viewDidLayoutSubviews()
你能显示viewDidLayoutSubviews的代码吗？
所以我猜addGradient() 被调用了两次。它以正确的方法完成（在布局完成之后），但如果之前有一个图层，您应该删除该图层以避免您的双重问题（或修复另一个使其被调用两次的问题）。
@AndréSlotta serversButtonOutlet.addGradient(cornerRadius: 31.0, colors: [UIColor(red: 49/256, green: 211/256, blue: 179/256, alpha: 1.0), UIColor(red: 68/256，绿色：164/256，蓝色：214/256，alpha：1.0）]，线宽：2.0，方向：.horizontal）

标签： ios swift user-interface uibutton gradient

【解决方案1】：

由于viewDidLayoutSubviews 被多次调用，您必须确保只创建一次渐变层。添加这样的检查：

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)
    }
}

【讨论】：