So I Wanted To Draw A Gradient
Gretchen, Stop Trying To Make Gradients Happen
NOTE: Updated for iOS 12 and Swift 4.2
If there’s one API that irritated me in the beginning of my career as an iOS developer, it was CAGradientLayer. As powerful as it is, it’s also very verbose and that can be really confronting for a newbie.
Nevertheless, the time came where I had to draw a gradient in an app. No images. I turned to CAGradientLayer because I already understood it, however it confused my team, who were less familiar with it.
For example, a gradient will be drawn between 0 and 1, on both the X (horizontal) and Y (vertical) axes. This is hard to explain, so let’s look at the image below.
A CALayer gradient uses these points. I sometimes see people printing this, and drawing on it to assist with planning.
Hopefully this helps. It’s a wrapper around using CAGradientLayer which gives CAGradientLayer a simpler interface. Just initialise with what you want, set the frame, and add the sublayer!
In an ordinary UIViewController, or on a UIView or a UIView-inheriting object, use the following code:
let gradient = CAGradientLayer(start: .center, end: .bottomRight, colors: [UIColor.black.cgColor, UIColor.white.cgColor], type: .radial)
gradient.frame = view.bounds
If you liked this post, please consider clapping for it. I notice each one and appreciate them quite a lot. Thank-you!