Create a gradient color view in iOS using Swift 3 and XCode 8

What is Gradient

Gradients and Colors. Anyone who has remotely worked on or had heard about computer graphics would know what a gradient is. For the unaware masses, a gradient or a ramp is a set of colors used to fill a particular region with minimal boundaries visible. We know it is quite difficult to define gradient in words and even more difficult to understand what is it just by reading. Let us shoot you an image of what a gradient is and that’s what we will focus on doing today

Environment set-up

Create a new XCode project. We have used XCode 8 for the demonstration but you are free to use a version of your preference. We will code using Swift 3 and we believe that Swift 2 and Objective-C might have minor syntactical changes. In case you face an issue, please do leave a comment below.

The Task

We are going to change the background of the primary view controller to a gradient color. We are going to use the same colors that the image above sports. For reference, these colors are:

• The blue tone: #00C9FF i.e. (0,201,255)
• The green tone: #92FE9D i.e. (146,254,157)

Code Recipe

1. Start by creating a new XCode project
   
2. For this project, we are not going to do anything in the interface builder and you just need to open the
   ViewController.swift
   straight away.
3. In the Swift file, create a let constant with name gradientLayer. Initialize the gradientLayer constant with CAGradientLayer. One would do that using the following code.
   let gradientLayer = CAGradientLayer
4. Initialize an array with the colors that you want your gradient to contain. You can use n number of colors depending on your need and preferences. We are going to use two colors here. The color codes are mentioned in task section. We encourage you to use different colors or different number of colors. You can create the colors array by
   colors = UIColor(red: 0/255.0, green: 201/255.0, blue: 255/255.0, alpha: 1.0).cgColor, UIColor(red: 146/255.0, green: 254/255.0, blue: 157/255.0, alpha: 1.0).cgColor] as [Any]
   Did you notice that we used .cgColor at the end of each UIColor? It is also worth noticing that the colors property of the CAGradientLayer takes [Any] as a valid parameter.
5. In viewDidLoad() method, let us now work on the gradient layer. We would do a couple of things in our viewDidLoad method which are
   • Decide a frame for gradient layer.
   • Assign the colors to the gradient layer.
   • Tell the gradient layer where to put which color.
   • Add the gradient layer to the host view’s layer.

   Frame:

   A frame is property on any view that infers where the view should be placed and what dimensions should it have. A frame is a rectangle or CGRect and takes 4 parameters (x,y,width,height). x is the horizontal start point, y is the vertical start point and the other two are self explanatory.
6. We make the frame of gradientLayer equal to the view’s frame as we want to use the gradient view our background view to our project.
   gradientLayer.frame = self.view.frame
7. Assign the colors array to the gradientLayer.
   gradientLayer.colors = colors
8. Assign locations. For every color in the color array, determine a position where it should start from. This number would range from 0 to 1. We used a locations array as [0.0,0.7] which typically means we would like the first color to start from 0% and the second color to start from 70%. It is advised to have the number of positions and colors equal. However, you are free to play with them. The gradient goes spreading vertical by default.
   gradientLayer.locations = [0.0,0.7]
9. Now attach the gradientLayer to the view’s layer and that is done by
   self.view.layer.addSublayer(gradientLayer)
10. Fire up the application witness for yourself and experience what the magic of colors can do.

Um..Wait..horizontal gradient?

To make the gradient horizontal, you would just need to give in a startPoint and endPoint. The startPoint and endPoint would give you power to make a gradient horizontal or diagonal. May the force of colors be with you!

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x:0.5, y:0.0)

The following snippet is how the code should pretty much look like without horizontal gradient.

let gradientLayer = CAGradientLayer()
let colors = [UIColor(red: 0/255.0, green: 201/255.0, blue: 255/255.0, alpha: 1.0).cgColor, UIColor(red: 146/255.0, green: 254/255.0, blue: 157/255.0, alpha: 1.0).cgColor] as [Any]

override func viewDidLoad() {
super.viewDidLoad()
gradientLayer.frame = self.view.frame
gradientLayer.colors = colors
gradientLayer.locations = [0.0,0.7]
self.view.layer.addSublayer(gradientLayer)
}

Feel free to find the entire code here. Show us how you use gradients in your project by leaving a comment 🙂