Swift 以编程方式将渐变边框颜色应用于UIButton

我试图创建一个渐变颜色的按钮，但我似乎无法使它工作。“我的按钮”的borderColor属性未应用任何颜色。我尝试实现由建议的代码，但它不起作用。不知道为什么。有人能帮我理解为什么吗

我用来更改按钮布局的代码是：

// Constraints
myButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0).isActive = true
myButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50).isActive = true
myButton.heightAnchor.constraint(equalToConstant: myButton.height).isActive = true
myButton.widthAnchor.constraint(equalToConstant: myButton.width).isActive = true

// Layout
myButton.backgroundColor = UIColor.black
myButton.tintColor = UIColor.white
myButton.layer.cornerRadius = callButtonHeightAndWidth.height / 2
myButton.layer.borderWidth = 10
myButton.setTitle("Test", for: .normal)
myButton.titleLabel?.font = UIFont(name: "HelveticaNeue-Regular", size: 27)

我尝试用一个我调用的函数来扩展UIView

setGradientBorderWidthColor

，代码如下所示：

func setGradientBorderWidthColor(button: UIButton)
    {
        let gradientColor = CAGradientLayer()
        gradientColor.frame =  CGRect(origin: CGPoint.zero, size: button.frame.size)
        gradientColor.colors = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.green.cgColor]

        let shape = CAShapeLayer()
        shape.lineWidth = 3
        shape.path = UIBezierPath(rect: button.bounds).cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradientColor.mask = shape

        button.layer.addSublayer(gradientColor)
    }

我还尝试在我的ViewController中的

viewDidLoad

函数中放置上面相同的代码，但这也不起作用。有什么建议吗

编辑1：

---

玩代码和提供的建议，我最终得到了这个。问题是，每当我向按钮添加一个圆角半径时，边都会被切断

只要从代码中删除两行代码，您的代码就可以正常工作。

myButton.layer.borderWidth = 10
myButton.layer.cornerRadius = 10

代码将如下所示：

 myButton.backgroundColor = UIColor.clear
            myButton.frame = CGRect(x: 100, y: 100, width: 150, height: 40)
            myButton.tintColor = UIColor.black
            myButton.setTitle("Test", for: .normal)
            myButton.titleLabel?.font = UIFont(name: "HelveticaNeue- 
        Regular", size: 27)
            setGradientBorderWidthColor(button: myButton)
            self.view.addSubview(myButton)

用此函数替换setGradientBorderWidthColor函数

func setGradientBorderWidthColor(button: UIButton)
    {
        let gradientColor = CAGradientLayer()
        gradientColor.frame =  CGRect(origin: CGPoint.zero, size: button.frame.size)
        gradientColor.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]

        let pathWithRadius = UIBezierPath(roundedRect:button.bounds, byRoundingCorners:[.topRight, .topLeft, .bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20.0, height: 20.0))
        let shape = CAShapeLayer()
        shape.lineWidth = 3
        shape.path = pathWithRadius.cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradientColor.mask = shape
        button.layer.mask = shape
        button.layer.addSublayer(gradientColor)
    }

输出：

---

您可以按照以下代码创建渐变边框：

func makeButton(){

    let buttonView = UIButton()
    self.view.addSubview(buttonView)
    buttonView.translatesAutoresizingMaskIntoConstraints = false
    buttonView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: self.view.safeAreaInsets.top + 30).isActive = true
    buttonView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 40).isActive = true
    buttonView.widthAnchor.constraint(equalToConstant: 120
        ).isActive = true
    buttonView.heightAnchor.constraint(equalToConstant: 50).isActive = true
    self.view.layoutIfNeeded()


    let outerPath = UIBezierPath()
    outerPath.move(to: CGPoint.init(x: buttonView.bounds.minX - 5, y: buttonView.bounds.minY - 5))
    outerPath.addLine(to: CGPoint.init(x: buttonView.bounds.maxX + 5, y: buttonView.bounds.minY - 5))
    outerPath.addLine(to: CGPoint.init(x: buttonView.bounds.maxX + 5, y: buttonView.bounds.maxY + 5))
    outerPath.addLine(to: CGPoint.init(x: buttonView.bounds.minX - 5, y: buttonView.bounds.maxY + 5))
    outerPath.close()

    let path = UIBezierPath()
    path.move(to: CGPoint.init(x: buttonView.bounds.minX + 5, y: buttonView.bounds.minY + 5))
    path.addLine(to: CGPoint.init(x: buttonView.bounds.maxX, y: buttonView.bounds.minY + 5))
    path.addLine(to: CGPoint.init(x: buttonView.bounds.maxX, y: buttonView.bounds.maxY))
    path.addLine(to: CGPoint.init(x: buttonView.bounds.minX + 5, y: buttonView.bounds.maxY))
    path.close()

    outerPath.append(path)

    let maskLayer = CAShapeLayer()
    maskLayer.fillRule = kCAFillRuleEvenOdd
    maskLayer.path = outerPath.cgPath
    maskLayer.fillColor = UIColor.red.cgColor
    buttonView.layer.addSublayer(maskLayer)

    self.view.layoutIfNeeded()

    let gradient = CAGradientLayer()
    gradient.frame = self.view.frame
    gradient.colors = [UIColor.blue.cgColor,
                       UIColor.red.cgColor]
    gradient.startPoint = CGPoint(x: 0, y: 1)
    gradient.endPoint = CGPoint(x: 1, y: 0)
    gradient.mask = maskLayer
    buttonView.layer.addSublayer(gradient)
    buttonView.setTitle("Hello World", for: .normal)
}

基本上，您必须创建一个shapeLayer，创建两条路径，并将fillRule设置为kcaFillModeEvenOdd，将渐变应用于此遮罩。就在这里：

---

您可以删除myButton的高度和宽度锚。这有什么帮助？不工作意味着您得到了错误的输出或什么？请解释一下。@ViniApp根本没有输出。运行代码时不会发生任何事情。我的意思是高度和宽度锚没有附加值，您可以从代码中删除它。这确实是一个离题的评论：）好吧，这部分是有效的。如果我添加一个角半径，EGE将被切断。我已经编辑了我的帖子以包含这张图片。@Araine，现在检查编辑答案，希望这张图片对你有用@Araine，如果有帮助，你批准了答案。你好@nishee，谢谢你的帮助！我对角的渲染方式有意见。如果要制作圆形按钮，将切断圆的0度、90度、180度和270度。我不知道为什么。@Araine，你想做一个圆形按钮。？如果是的话，你能告诉我你钮扣的x y和高宽吗？@SWAT！谢谢你的回复。您将如何使用您的示例制作圆角，甚至圆形按钮？