How to Apply Gradient to the background view of the iOS Swift App?

In iOS, there is a class CAGradientLayer to apply gradient colors to views. In this article, we will look at how you can use the CAGradientLayer class to apply gradients to the background of a view in iOS. The CAGradientLayer class provides different properties like colors, locations, points, frame, etc. We will use them to apply the gradient to a view. In last, we will use the insertSublayer method to add the gradient layer to the super view.

To apply a gradient to the background view of an iOS Swift app, you can follow these steps −

Step 1 - Create a new gradient layer

let gradientLayer = CAGradientLayer()

Using CAGradientLayer, you can easily create an object to apply a gradient to the background

Step 2 - Set the colors and locations for the gradient layer −

gradientLayer.colors = [UIColor.blue.cgColor, UIColor.red.cgColor]
gradientLayer.locations = [0.0, 1.0]

CAGradientLayer provides some properties for controlling the drawing using constraints. An array of UIColor types can be passed to the "colors" property. You can specify more than one color according to your requirements

Another property named "location" provides the positions to draw the gradient colors. Gradient positions can also be defined using an array of numbers. There will be a range of 0 to 1 for gradient locations. Depending on your requirements, you can divide the position into N-numbers.

Step 3 - Set the start and end points for the gradient layer

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

The start and end points define the direction of the gradient. In this example, we're setting the start point to the top-left corner of the view (0.0, 0.0) and the end point to the bottom-right corner of the view (1.0, 1.0), so the gradient will go from the top-left corner to the bottom-right corner.

Step 4 - Set the frame to the layer

gradientLayer.frame = view.frame

In order to make the gradient visible, you have to provide its frame.

Step 5 - Add the gradient layer as a sublayer to the background view

view.layer.insertSublayer(gradientLayer, at: 0)

The insertSublayer(_:at:) method is a method of the CALayer class in iOS. It is used to add a sublayer to a parent layer at a specified index.

When you execute this method on a parent layer, the supplied sublayer is inserted as a child at the specified index. The new sublayer is appended to the end of the sublayer array if the index is higher than or equal to the number of existing sublayers.

Here is the Complete Code Snippet to Apply the Gradient to the View

Example

import UIKit
class TestController: UIViewController {
    
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
       
   private func initialSetup() {

      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "Gradient View"

      // Create a new gradient layer
      let gradientLayer = CAGradientLayer()
      // Set the colors and locations for the gradient layer
      gradientLayer.colors = [UIColor.blue.cgColor, UIColor.red.cgColor]
      gradientLayer.locations = [0.0, 1.0]

      // Set the start and end points for the gradient layer
      gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
      gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

      // Set the frame to the layer
      gradientLayer.frame = view.frame

      // Add the gradient layer as a sublayer to the background view
      view.layer.insertSublayer(gradientLayer, at: 0)
   }
}

Output

As you can see, the gradient layer has been applied to the controller's view in this example. It is positioned diagonally from the top-left corner to the bottom-right corner of the view. We used the colors property to apply the gradient colors.

Here is Another Example of How to Apply More than Two Colors

Example

import UIKit
class TestController: UIViewController {
    
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
       
   private func initialSetup() {

      // basic setup
      view.backgroundColor = .white
      navigationItem.title = "Gradient View"

      // Create a new gradient layer
      let gradientLayer = CAGradientLayer()
      // Set the colors and locations for the gradient layer
      gradientLayer.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
      gradientLayer.locations = [0.0, 0.5, 1.0]

      // Set the start and end points for the gradient layer
      gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
      gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)

      // Set the frame to the layer
      gradientLayer.frame = view.frame

      // Add the gradient layer as a sublayer to the background view
      view.layer.insertSublayer(gradientLayer, at: 0)
   }
}

Output

In the above example, you can see we have applied three different colors with custom positions. In this example, we are applying a linear gradient from top to bottom.

Recommended Approach

For example, you have to apply gradients to multiple views in your iOS app. To minimize code duplication, it is always recommended to make an extension of UIView. Here is an example of how you can create an extension −

extension UIView {
   func addGradient(_ colors: [UIColor], locations: [NSNumber], frame: CGRect = .zero) {

      // Create a new gradient layer
      let gradientLayer = CAGradientLayer()
      
      // Set the colors and locations for the gradient layer
      gradientLayer.colors = colors.map{ $0.cgColor }
      gradientLayer.locations = locations

      // Set the start and end points for the gradient layer
      gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
      gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)

      // Set the frame to the layer
      gradientLayer.frame = frame

      // Add the gradient layer as a sublayer to the background view
      layer.insertSublayer(gradientLayer, at: 0)
   }
}

Here is the Code of How to use the Above Extension

view.addGradient([UIColor.green, UIColor.yellow, UIColor.red], locations: [0.0, 0.5, 1.0],frame: view.frame)

Conclusion

To add a gradient to the background view of an iOS Swift project, use Core Animation's CAGradientLayer class. Here are the fundamental actions you can take −

• CAGradientLayer is used to create a new gradient layer ().

• Using the colors and locations attributes, customize the gradient layer's colors and positions.

• The startPoint and endPoint attributes are used to provide the start and end locations for the gradient layer.

• The startPoint and endPoint attributes are used to provide the start and end locations for the gradient layer..