Create Gradient layer by the use of CAGradientLayer

Create Gradient layer by the use of CAGradientLayer

Mostly developers are use the gradient (Combination of colors) colors images for make app more effective. Basically developers are use the images for gradient effect but its not an effective technique, but we can create gradient layer by the use of core graphic. In this tutorial we are study about how to create gradient view by the use of CAGradientLayer. Its simple and effective for best user experience.

CAGradientLayer?

CAGradientLayer is the part of the Core animation in ios and its a subclass of CALayer. Its a layer that draws a color gradient over its layer background, filling the shape of layers and it also for rounded corners. We can add this layer as a subView on any view for gradient effect. CAGradientLayer is simple and effective for Users Interface.

How to use color gradient layer (CAGradientLayer)

Its fast and sample task, actually there are few line of code for creating the color gradient layer by the use of CAGradientLayer.
In CAGradientLayer have diffrent variables and function for set the gradient color according to you :-

  1. .colors [Any]? -> Pass Array of colors ( Needs to be in CGColor since CAGradientLayer uses Core Graphics)
  2. .Frame -> Set the gradient layer frame accroding to you (Pass frame accroding to superView, where you want to add)

And last add the layer by “addSublayer” on any view where you want to show.
Add this Sample methos where you want:-


1
2
3
4
5
6
7
8
9
10
11
12
    <span class="hljs-keyword">var</span> gradientLayer = <span class="hljs-type">CAGradientLayer</span>()
    <span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
        <span class="hljs-keyword">super</span>.viewDidLoad()
        createCAGradientLayer()
    }
    <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">createCAGradientLayer</span><span class="hljs-params">()</span></span> {
        gradientLayer.frame = <span class="hljs-keyword">self</span>.view.bounds
        <span class="hljs-keyword">let</span> blue = <span class="hljs-type">UIColor</span>.red.cgColor
        <span class="hljs-keyword">let</span> organge = <span class="hljs-type">UIColor</span>.purple.cgColor
        <span class="hljs-keyword">let</span> pink = <span class="hljs-type">UIColor</span>.yellow.cgColor
        <span class="hljs-keyword">self</span>.view.layer.addSublayer(gradientLayer)
    }

 

You can set the color direction according to you. for set the direction CAGradientLayer provide the properties 

1
startPoint

 and 

1
endPoint

.
1. .startPoint (CGPoint) Pass the CGPoint, x and y startPoint -> Its use for where the gradient starts
2. .endPoint (CGPoint) Pass the CGPoint, x and y endPoint -> Its use for where the gradient Ends

Add these line of code in you createCAGradientLayer function:-


1
2
gradientLayer.startPoint = <span class="hljs-type">CGPoint</span>(x: <span class="hljs-number">0.0</span>, y: <span class="hljs-number">0.0</span>)
gradientLayer.endPoint = <span class="hljs-type">CGPoint</span>(x: <span class="hljs-number">1.0</span>, y: <span class="hljs-number">0.0</span>)

How to we set percentage of color effect in gradient layer

By default in gradient layer all the colors are equaly divided, but we can change them by the use of 

1
location

propertie. We can modify the gradient layer by this propertie (Tried to pass CGFloat because it’s easier to estimate the location of the gradient)

.Location [NSNumber]? -> we can pass the array of NSNumber Into them for set the location of colors

add this line of code in createCAGradientLayer function:-


1
    gradientLayer.locations = [<span class="hljs-number">0.0</span>, <span class="hljs-number">0.50</span>, <span class="hljs-number">1.0</span>]

Final function :-


1
2
3
4
5
6
7
8
9
10
11
<span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">createCAGradientLayer</span><span class="hljs-params">()</span></span> {
        gradientLayer.frame = <span class="hljs-keyword">self</span>.view.bounds
        <span class="hljs-keyword">let</span> blue = <span class="hljs-type">UIColor</span>.red.cgColor
        <span class="hljs-keyword">let</span> organge = <span class="hljs-type">UIColor</span>.purple.cgColor
        <span class="hljs-keyword">let</span> pink = <span class="hljs-type">UIColor</span>.yellow.cgColor
        gradientLayer.locations = [<span class="hljs-number">0.0</span>, <span class="hljs-number">0.50</span>, <span class="hljs-number">1.0</span>]
        gradientLayer.colors = [blue, organge, pink]
        gradientLayer.startPoint = <span class="hljs-type">CGPoint</span>(x: <span class="hljs-number">0.0</span>, y: <span class="hljs-number">0.0</span>)
        gradientLayer.endPoint = <span class="hljs-type">CGPoint</span>(x: <span class="hljs-number">1.0</span>, y: <span class="hljs-number">0.0</span>)
        <span class="hljs-keyword">self</span>.view.layer.addSublayer(gradientLayer)
    }

We are know how much gradient view easy, important, and effective. We can also add the animation with this gradient Layer.

How to add Animation with gradient layer

We can also animation on gradient layer. Now below are core animation example which are added by the gradient layer propertie.


1
2
3
4
5
6
7
8
9
  func animatedView() {
        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = [0.0, 0.0, 0.25]
        animation.toValue = [0.75, 1.0, 1.0]
        animation.duration = 3.0
        animation.autoreverses =  true
        animation.repeatCount =  Float.infinity
        self.gradientLayer.add(animation, forKey: nil)
    }

Add this function after the createCAGradientLayer() function.
You can download the complete Sample project here…

Related Post

Loop Control Statement Loop control statements are used when a section of code may either be executed a fixed number of times. C gives you a choice of three types of loop st...
Data Types in Java Data Types in Java Data types represent the different values to be stored in the variable, for example if a variable has int data type, it ...
New Tools for 64-bit Support in Xcode 9.3   New Tools for 64-bit Support in Xcode 9.3 The last macOS release to support 32-bit apps without compromise is macOS High Sierra. Make sure fu...
Navigation Tab Bar in IOS | Swift tutorial Navigation Tab Bar in IOS | Swift tutorial Different Customizing techniques for Navigation bar with storyboard and code 1) Custom NavigationTabBar b...
Setting Class Path for Java Setting Class Path for Java In this tutorial we are study how we can set the java JDK class path. Java is an open source software, it is is freely...
Switch Case Statement Switch Case Statement The switch statement is a multi-way branch statement. It provides an easy way to dispatch execution to different parts of c...

Leave a Reply

Your email address will not be published. Required fields are marked *

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.