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

Question

我正在尝试创建一个带有渐变颜色的按钮，但我似乎无法让它工作。我的按钮的borderColor 属性没有应用颜色。我尝试实现another SO post 建议的代码，但它不起作用。不知道为什么。有人可以帮我理解为什么吗？

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

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

我尝试使用我称为setGradientBorderWidthColor 的函数扩展 UIView，代码如下所示：

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 中的 viewDidLoadfunction 中，但这也不起作用。有什么建议吗？

编辑 1：

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

Answer 1

您可以按照以下代码制作渐变边框：

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，然后对这个蒙版应用渐变。你有它：

Answer 2

只需从您的代码中删除两行代码即可正常运行。

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

输出：

GradientBorderWidthColor