The Only CAGradientLayer Guide You Will Ever Need

An App to help you? Why not?

Image for post
Image for post
Photo by JD Chow on Unsplash

Difficulty: Beginner | Easy | Normal | Challenging

This article has been developed using Xcode 11.4.1, and Swift 5.2.2

Wouldn’t it be great if someone gave you an article that explained much about CAGradientLayer, and even created an App that enables you to experiment with the same? This article is just that. You’re welcome.

Prerequisites:

Terminology:

CAGradientLayer: A layer that draws a colour gradient over any background colour

The App

The images used in this article are form a little App that has been knocked up. You can download it from the repo, and essentially I’d recommend you do.

Essentially the App shows what can be changed in respect of a CAGradientLayer — the locations, StartPoint, EndPoint and colours.

Image for post
Image for post

so let us look at this App in stages.

*Notes*

Core Graphics speaks in Core Graphics- that means that colours are the CG variants rather than the UIColor variants. This means that in this App we have an array of UIColor, and then map this to the requisite array of cgColor. You know, something like:

gradient.colors = colours.map{ $0.cgColor }

Animations have been used for the gradient, let me give you an example of this:

let animation = CABasicAnimation(keyPath: "endPoint")animation.fromValue = gradient.endPointanimation.toValue = endPoint.pointanimation.duration = 5.0self.gradient.endPoint = endPoint.pointself.gradient.add(animation, forKey:"animateendpoint")

using CABasicAnimation (here for endPoint) makes it very obvious the value we are moving *from* and the value we are moving *to* — but here is the secret sauce — you need to make sure that after the fromValue and toValue that the actual (in this case) endPoint is set (if not the gradient will just flash back and go back to the previous state!).

Let us look through these properties

Location is a value between 0 and 1, and provide a separation between colour spaces (so the number of locations are tightly coupled to the colours).

So if we don’t have a location, we are left with a solid colour.

Image for post
Image for post

If we set a single location at 0.25, two colours will blend 25% of the way through the colour

Image for post
Image for post

If we have two locations, one at 0.25 and one at 0.5 one colour will begin to change at 0.25, one at 0.5

Image for post
Image for post

Likewise three locations, 0.25, 0.5 and 0.75 will change the colours at those, well, locations

Image for post
Image for post

The start point is where the gradient starts, within the bounds of the `layer` coordinate space.

The best explaination? A showing the different values and animate it.

Image for post
Image for post

Clear? If not download the App from the repo.

Not captured in this App (apart from the default axial type), you can choose conic and radial are fairly self-explanatory.

Conclusion

Gradients are extremely important in iOS, and you might just have a live designer who goes all in on the style.

What are you to do? Well, we can resolve this by creating a great App, and using the knowledge that we have gained from this article.

Which I hope has been helpful for you.

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store