Core Graphics Tutorial: Curves and Layers

Finishing the App

Congratulations! You made it this far! It’s now time to add the finishing touches to this future best seller.

For each change in emotion, the sky should reflect that state. Each swipe on the scroll view resets the rage level in SkyView. Make the following changes to reflect such inner turmoil. :]

Replace drawSky(in:context:colorSpace:) with the following:

private func drawSky(in rect: CGRect, rageLevel: RageLevel, context: CGContext, 
                     colorSpace: CGColorSpace) {
  let baseColor: UIColor
  let middleStop: UIColor
  let farStop: UIColor

  switch rageLevel {
  case .happy:
    baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0, 
                        blue: 183.0 / 255.0, alpha: 1.0)
    middleStop = UIColor(red: 0.0 / 255.0, green: 255.0 / 255.0, 
                         blue: 252.0 / 255.0, alpha: 1.0)
    farStop = UIColor(red: 255.0 / 255.0, green: 255.0 / 255.0, 
                      blue: 255.0 / 255.0, alpha: 1.0)
  case .somewhatHappy:
    baseColor = UIColor(red: 0 / 255.0, green: 158.0 / 255.0, 
                        blue: 183.0 / 255.0, alpha: 1.0)
    middleStop = UIColor(red: 144.0 / 255.0, green: 152.0 / 255.0, 
                         blue: 253.0 / 255.0, alpha: 1.0)
    farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0, 
                      blue: 144.0 / 255.0, alpha: 1.0)
  case .neutral:
    baseColor = UIColor(red: 148.0 / 255.0, green: 158.0 / 255.0, 
                        blue: 183.0 / 255.0, alpha: 1.0)
    middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0, 
                         blue: 166.0 / 255.0, alpha: 1.0)
    farStop = UIColor(red: 96.0 / 255.0, green: 111.0 / 255.0, 
                      blue: 144.0 / 255.0, alpha: 1.0)
  case .somewhatAngry:
    baseColor = UIColor(red: 255.0 / 255.0, green: 147.0 / 255.0, 
                        blue: 167.0 / 255.0, alpha: 1.0)
    middleStop = UIColor(red: 127.0 / 255.0, green: 138.0 / 255.0, 
                         blue: 166.0 / 255.0, alpha: 1.0)
    farStop = UIColor(red: 107.0 / 255.0, green: 107.0 / 255.0, 
                      blue: 107.0 / 255.0, alpha: 1.0)
  case .angry:
    baseColor = UIColor(red: 255.0 / 255.0, green: 0 / 255.0, 
                        blue: 0 / 255.0, alpha: 1.0)
    middleStop = UIColor(red: 140.0 / 255.0, green: 33.0 / 255.0, 
                         blue: 33.0 / 255.0, alpha: 1.0)
    farStop = UIColor(red: 0 / 255.0, green: 0 / 255.0, 
                      blue: 0 / 255.0, alpha: 1.0)
  }

  context.saveGState()
  defer { context.restoreGState() }

  let gradientColors = [baseColor.cgColor, middleStop.cgColor, farStop.cgColor]
  let locations: [CGFloat] = [0.0, 0.1, 0.25]

  let startPoint = CGPoint(x: rect.size.height/2, y: 0)
  let endPoint = CGPoint(x: rect.size.height/2, y: rect.size.width)

  if let gradient = CGGradient.init(colorsSpace: colorSpace, 
                                    colors: gradientColors as CFArray, 
                                    locations: locations) {
    context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
  }
}

This simply adds in a rageLevel: parameter to the function and then changes the colors of the gradient depending on that parameter value.

Next, replace the call to drawSky(in:context:colorSpace:) in draw(_:) with the following:

drawSky(in: rect, rageLevel: rageLevel, context: context, colorSpace: colorSpace)

You’re now passing in the rageLevel to drawSky(in:rageLevel:context:colorSpace:).

Build and run, then swipe through the different faces. Challenge dominated! Hello five star rating! :]

Where to Go From Here

By this point, you should have a firm grasp of the fundamentals of Core Graphics and should be well on your way to using it in your own projects.

If you’re interested in learning more about the UIKit Drawing System, go through Apple’s excellent UIKIT Drawing System resource.

Also check out our Arcs and Paths tutorial, which builds on the knowledge you’ve acquired in this tutorial and focuses on drawing arcs and other geometric shapes.

You may also want to check our Lines, Rectangles, and Gradients tutorial, which covers gradients and drawing lines and rectangles using Core Graphics.

I hope you found this tutorial useful. Please share any comments or questions in the forum discussion below!