Создание кнопки очистки с градиентной рамкой и градиентным текстом

Question

Я пытаюсь добавить градиент к своему заголовку 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)

}

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

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

Надеюсь, это решение может вам помочь.