Set Background Gradient on Button in Swift

Question

I have no idea how to set the background gradient on a button (without making the background gradient an image). This is so different from Android.

Here's a class I have to define a returnable gradient scheme:

import UIKit  extension CAGradientLayer {      func backgroundGradientColor() -> CAGradientLayer {         let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1)         let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1)          let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor]         let gradientLocations: [Float] = [0.0, 1.0]          let gradientLayer: CAGradientLayer = CAGradientLayer()         gradientLayer.colors = gradientColors         gradientLayer.locations = gradientLocations          return gradientLayer      } } 

I can use this to set the background of my entire view with the following:

class ViewController: UIViewController {      override func viewDidLoad() {         super.viewDidLoad()          let background = CAGradientLayer().backgroundGradientColor()         background.frame = self.view.bounds         self.view.layer.insertSublayer(background, atIndex: 0)     }     //... } 

But how can I access the view of the button and insert the sublayer or something like that?

Answer 1

Your code works fine. You just have to remember to set the gradient's frame every time. It is better to just make the gradient category also set the frame of the view for you.

That way you don't forget and it applies fine.

import UIKit  extension UIView {      func applyGradient(colours: [UIColor]) -> CAGradientLayer {         return self.applyGradient(colours: colours, locations: nil)     }       func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> CAGradientLayer {         let gradient: CAGradientLayer = CAGradientLayer()         gradient.frame = self.bounds         gradient.colors = colours.map { $0.cgColor }         gradient.locations = locations         self.layer.insertSublayer(gradient, at: 0)         return gradient     } }  class ViewController: UIViewController {      @IBOutlet weak var btn: UIButton!          override func viewDidLoad() {         super.viewDidLoad()                  self.btn.applyGradient(colours: [.yellow, .blue])         self.view.applyGradient(colours: [.yellow, .blue, .red], locations: [0.0, 0.5, 1.0])     }   } 

Buttons are views. You apply gradients to it the same way you would apply it to any other view.

Picture Proof:

Video Proof: https://i.imgur.com/ssDTqPu.mp4