Draw Gradients with Core Graphics Tutorial

Core Graphics is a very powerful low-level API. In this tutorial we will create gradients with the help of Core Graphics. For simplicity sake, we'll use linear gradients. Linear gradients start from one point and color to another point and color. The gradient will move from left to right on the view. This tutorial is made with Xcode 8 and built for iOS 10.

Open Xcode and create a new Single View Application

Choose Next. For product name, use IOS10DrawGradientsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Add a new file to the Project. Choose iOS->Source->Cocoa Touch Class. Name the class GradientView and make it a subview of UIView.

Go to the Storyboard, Select the View from the Document Outline and go to the Identity Inspector, in the Custom Class section change the Class to GradientView

Go to the gradientView.swift file and change the drawRect method to 

override func draw(_ rect: CGRect) {
    // 1
    guard let currentContext = UIGraphicsGetCurrentContext() else { return }
    // 2
    // 3
    let colorSpace = CGColorSpaceCreateDeviceRGB()
    // 4
    let startColor = UIColor.red
    guard let startColorComponents = startColor.cgColor.components else { return }
    let endColor = UIColor.blue
    guard let endColorComponents = endColor.cgColor.components else { return }
    // 5
    let colorComponents: [CGFloat]
            = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
    // 6
    let locations:[CGFloat] = [0.0, 1.0]
    // 7
    guard let gradient = CGGradient(colorSpace: colorSpace,colorComponents: colorComponents,locations: locations,count: 2) else { return }
    let startPoint = CGPoint(x: 0, y: self.bounds.height)
    let endPoint = CGPoint(x: self.bounds.width,y: self.bounds.height)
    // 8
    currentContext.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: UInt32(0)))
    // 9
  1. UIGraphicsGetCurrentContext gets the graphical context, this can be thought of as a canvas where there can be painted on.
  2. The graphical context is saved, so it can later be restored.
  3. CGColorSpace is a container for a range of colors. Almost always you will use the RGB color space.
  4. Here we define a start and an end color of the gradient. The cgColor object is a low-level definition of the color components. The components method extracts the color components from the cgColor object.
  5. In this array The RGB and Alpha color-components are written to an array.
  6. The location for each color provided in components.
  7. A CGGradient object is created containing the gradient info.
  8. Here the Gradient will be drawn following the vertical axis.
  9. The Graphical Context is restored.

Build and Run the project

You can download the source code of the IOS10DrawGradientsTutorial at the ioscreator repository on Github.