CAGradientLayer Swift

I know sometimes we might need to use color gradient to make our UI beautiful or to give somewhat different vibe and that’s the reason why i tried to look for one and that was using CAGradient 🎨

I know sometimes we might need to use color gradients to make our UI beautiful or to give a somewhat different vibe and that’s the reason why I tried to look for one and that was using CAGradient.

What is color gradient? A color gradient specifies a range of position-dependent colors, usually used to fill a region. yes well mixed color?

There’s two ways of making a color gradient effect as I know.

• Core Graphics: The Core Graphics framework is based on the Quartz advanced drawing engine. It provides low-level, lightweight 2D rendering with unmatched output fidelity.
• Core Animation: Core Animation provides high frame rates and smooth animations without burdening the CPU and slowing down your app.

In this article, i will be using Core Animation to make color gradients because CAGradientLayer is part of it!!

For the basic info about Core Animation refer to the link below (haven’t written the details about it yet sorry!)

Animations in Swift

CAGradientLayer

A layer that draws a color gradient over it background color, filling the shape of the layer

class CAGradientLayer : CALayer

Properties

• colors: An array of CGColorRef objects defining the color of each gradient stop.
• locations: An optional array of NSNumber objects defining the location of each gradient stop
• endPoint: The end point of the gradient when drawn in the layer’s coordinate space
• startPoint: The start point of the gradient when drawn in the layer’s coordinate space
• type: Style of gradient drawn by the layer

Let’s try to make a simple gradient background using Colors property!

1️⃣ create CAGradientLayer() instance for the background color

let gradient = CAGradientLayer()

2️⃣ Let’s put some colors that we want. Since i like purple and pink, let them mix together

gradient.colors = [UIColor.systemPurple.cgColor, UIColor.systemPink.cgColor]

3️⃣ Let’s add(subclass) it to our view so that we can see it

view.layer.addSublayer(gradient)

4️⃣ Let’s set the size of the gradient! Since i want it as the background, let’s make it same as the view’s frame

gradient.frame = view.frame

Okay run the code and see the result

wait.. what if i want to make purple part super small and rest of my background color to be pink! How do you do that?

Change the location of the gradient using locations property

💡 The gradient stops are specified as values between 0 and 1

6️⃣ Simply you can add single code as below

gradient.locations = [0,0.4]

What about if i want to make the position some what diagonal?

Change the start and end point of the gradient

The start/end point corresponds to the first/last stop of the gradient. Default values are:

• start point: (0.5,0.0)
• end point: (0.5, 1.0)

7️⃣ What happens if you give start and endpoint to the CAGradientLayer() ?

gradient.startPoint = CGPoint(x: 1, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)

right image is with added more colors such as systemRed, systemOrange, systemYellow

How to change the style of the gradient?

Okay, Let’s look into our last cute property called type. type is a style of gradient drawn by the layer.

var type: CAGradientLayerType { get set }

Then we first have to know the structure CAGradientLayerType. It’s a structure without overview provided apple 🤦🏻‍♀️ but there’s 3 type properties as below

• axial: a linear gradient or axial gradient which is the default type of CAGradientLayerType.
• conic: a gradient with color transitions rotated around a center point
• radial: is defined by a center point, an ending shape, and two or more color-stop points.

axial, conic, radial

8️⃣ Let’s make the conic gradient(I’ll skip for the axial, that’s default)

💡 note! You have to set the start point and the end point to make the gradient look nice.

gradient.type = .conic
gradient.startPoint = CGPoint(x: 0.5, y: 0.5)
gradient.endPoint = CGPoint(x: 0.5, y: 0)

9️⃣ What about the radial gradient?

gradient.type = .radial
gradient.startPoint = CGPoint(x: 0.5, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)

When you run the code, you will see somewhat like this!

This is the end of the post. Thank you for reading, and please let me know if there’s any updates to my post! 🧚🏻

references: