doyeona
Published in

doyeona

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!)

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:

--

--

--

Daily study logs about iOS development will be updated. Any recommendations or discussions are always welcome

Recommended from Medium

Gestures and Animations in SwiftUI

How to generate iOS Application for In-House Distribution

How to add Lottie Animations in iOS apps?

Introduction to iOS Coordinator pattern

All You Need To Know About Drag and Drop — iOS 11 — Part 2

How to Implement Custom Font with UIFontPickerController in iOS 13

Helpful iOS and Xcode Code Snippets

Five Steps to Create a Chess App 3/5

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
Doyeon

Doyeon

Hey! I am currently studying iOS by myself, and wanna be a cool app developer 🕶 please correct me if i’m wrong or if there’s any thing that you wanna share😊✌️

More from Medium

Dynamic lookup In Swift

Swift: Closure based actions

Swift questions and answers part -III

Swift Closures