创建带有渐变边框和渐变文本的清除按钮答案

【问题标题】：Creating a clear button with gradient border and gradient text创建带有渐变边框和渐变文本的清除按钮
【发布时间】：2019-08-19 09:29:03
【问题描述】：

我正在尝试将渐变添加到我的 UIButton 标题和按钮的边框。我已经在这里完成了大部分解决方案，我无法为我的生活工作，可能已经过时了，我不确定。所以目前我扩展 UIView 以设置任何渐变。那么我该如何为这个功能添加另一个功能呢？

func setGradientBackground(colorOne: UIColor, colorTwo: UIColor)  {
    let gradientlayer = CAGradientLayer()
    gradientlayer.frame = bounds
    gradientlayer.colors = [colorOne.cgColor, colorTwo.cgColor]
    gradientlayer.locations = [0, 1]
    gradientlayer.startPoint = CGPoint(x: 1.0, y: 0.0)
    gradientlayer.endPoint = CGPoint(x: 0.0, y: 0.0)

    layer.insertSublayer(gradientlayer, at: 0)

}

【问题讨论】：

@MFDOOM 你设置赏金的问题是什么？原来的问题完全不清楚。 “我如何为这个功能添加另一个功能？”制作看起来像图像的视图很容易；这就是你想要的吗？

标签： ios swift uibutton uikit

【解决方案1】：

我为您创建了一个演示，您可以在CAGradientLayer 的帮助下完成此操作，请参阅以下输出和代码。

故事板：

对于渐变按钮文本颜色和边框，将您的UIButton 放入UIView，然后将CAGradientLayer 分配给UIview。

注意：-不要忘记将按钮设置为视图掩码，请参见以下代码。

import UIKit

class ViewController: UIViewController {

    @IBOutlet var viewForButton: UIView!
    @IBOutlet var myButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // Create a gradient layer
        let gradient = CAGradientLayer()

        // gradient colors in order which they will visually appear
        gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]

        // Gradient from left to right
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

        // set the gradient layer to the same size as the view
        gradient.frame = viewForButton.bounds

        // add the gradient layer to the views layer for rendering
        viewForButton.layer.insertSublayer(gradient, at: 0)

        // Tha magic! Set the button as the views mask
        viewForButton.mask = myButton

        //Set corner Radius and border Width of button
        myButton.layer.cornerRadius =  myButton.frame.size.height / 2
        myButton.layer.borderWidth = 5.0
    }

}

扩展程序：您也可以更喜欢这个扩展程序。

extension UIView{

    func gradientButton(_ buttonText:String, startColor:UIColor, endColor:UIColor) {

        let button:UIButton = UIButton(frame: self.bounds)
        button.setTitle(buttonText, for: .normal)

        let gradient = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = self.bounds
        self.layer.insertSublayer(gradient, at: 0)
        self.mask = button

        button.layer.cornerRadius =  button.frame.size.height / 2
        button.layer.borderWidth = 5.0
    }
}

使用方法：

testView.gradientButton("Hello", startColor: .red, endColor: .blue)

【讨论】：

我如何在上面使用的函数中做到这一点？ @AtulParmar
我按照你的方式实现了，但是按钮就消失了？ @AtulParmar
@OCTAVIAN 只需创建一个函数并根据需要传递参数，您就可以创建一个带有参数的函数，例如传递开始和结束颜色。如果你想为所有/许多控制器创建一个函数，那么将按钮和容器视图作为参数传递。
@MFDOOM 看起来你从上面的代码中遗漏了一些东西。能否请您分享代码，以便我对其进行审核并提供解决方案？
这将不起作用如果您以编程方式添加 UIButton，因为它的边界尚未在 ViewDidLoad 中设置。你能把它做成 UIView 的扩展吗？

【解决方案2】：

你只需要在UIView下面添加扩展并调用函数来获取渐变按钮，

func covertToGradientButtonWith(title: String, radius: CGFloat, borderWidth: CGFloat, gradientStartColor: UIColor, gradientEndColor: UIColor) {

    let button:UIButton = UIButton(frame: self.bounds)
    button.setTitle(title, for: .normal)

    let gradient = CAGradientLayer()
    gradient.colors = [gradientStartColor.cgColor, gradientEndColor.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    gradient.frame = self.bounds
    self.layer.insertSublayer(gradient, at: 0)
    self.mask = button

    button.layer.cornerRadius =  radius
    button.layer.borderWidth = borderWidth
}

希望，这个解决方案可以帮助你。

【讨论】：