0
352
ViewsCreación de un botón claro con borde degradado y texto degradado
Estoy tratando de agregar un degradado a mi título de UIButton y al borde del botón. He revisado la mayor parte de la solución aquí que no puedo hacer que funcione para mí, podría estar desactualizada, no estoy seguro. Así que actualmente extiendo UIView para establecer el gradiente de lo que sea. Entonces, ¿cómo agregaría otra función para esta característica?
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) } 
2 answers
Answer question0
Creé una demostración para usted, puede hacer esto con la ayuda de CAGradientLayer vea el siguiente resultado y código para esto.
Guión gráfico:
Para el color y el borde del texto del botón degradado, coloque su UIButton dentro de UIView , luego asigne CAGradientLayer a UIview .
Nota: - No olvide configurar el botón como la máscara de vistas. Consulte el siguiente código.
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 } }Extensión : también puede preferir esta extensión para lo mismo.
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 } }Cómo utilizar:
testView.gradientButton("Hello", startColor: .red, endColor: .blue)0
Solo necesita agregar la extensión UIView a continuación y llamar a la función para obtener el botón de gradiente deseado,
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 }Espero que esta solución pueda ayudarte.