Draw Gradients with Core Graphics in iOS8 with Swift

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 built with for iOS8.1 with Xcode 6.1.

Update: Oct 17, 2016. The rewritten version in Swift 3 for iOS 10 and Xcode 8 is available here.

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftGradientsCoreGraphicsTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Select Swift as Language and make sure 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 drawRect(rect: CGRect) {
      // 1
      var currentContext = UIGraphicsGetCurrentContext()
      // 2
      // 3
      var colorSpace = CGColorSpaceCreateDeviceRGB()
      // 4
      var startColor = UIColor.redColor();
      var startColorComponents = CGColorGetComponents(startColor.CGColor)
      var endColor = UIColor.blueColor();
      var endColorComponents = CGColorGetComponents(endColor.CGColor)
      // 5
      var colorComponents
        = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
      // 6
      var locations:[CGFloat] = [0.0, 1.0]
      // 7
      var gradient = CGGradientCreateWithColorComponents(colorSpace,&colorComponents,&locations,2)
      var startPoint = CGPointMake(0, self.bounds.height)
      var endPoint = CGPointMake(self.bounds.width, self.bounds.height)
      // 8
      CGContextDrawLinearGradient(currentContext,gradient,startPoint,endPoint, 0)
      // 9
  1. CGContextRef is a 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. CGColorSpaceRef 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 CGColorGetcomponents function 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. CGGradientCreateWithColorComponents will create a CGGradientRef object 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 IOS8SwiftGradientsCoreGraphicsTutorial at the ioscreator repository on Github.