Kodeco Forums

Video Tutorial: CALayers Part 2: CAGradientLayer

🎓 Courses & Articles
1

Learn about CAGradientLayer, a subclass of CALayer that provides an easy way to add gradients to improve the look of your apps.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/3246-calayers/lessons/3
2

Thanks for the tutorial . I do have one question . I can’t understand if the fill is perpendicular to the line specified in gradient points. In your diagram it never looked perpendicular.

3

Copy this code into a playground:

import UIKit

func drawGradient(startColor:UIColor, endColor: UIColor, startPoint:CGPoint, endPoint:CGPoint) {
  
  let colors = [startColor.CGColor, endColor.CGColor]
  let colorSpace = CGColorSpaceCreateDeviceRGB()
  let colorLocations:[CGFloat] = [0.0, 1.0]
  let gradient = CGGradientCreateWithColors(colorSpace, colors, colorLocations)
  let context = UIGraphicsGetCurrentContext()
  
  CGContextDrawLinearGradient(context,
    gradient,
    startPoint,
    endPoint,
    [])
  
}

let rect = CGRect(x: 0, y: 0, width: 600, height: 600)
UIGraphicsBeginImageContextWithOptions(rect.size, true, 0.0)

let endPoint = CGPoint(x: 400, y: 200)
drawGradient(UIColor.redColor(), endColor: UIColor.whiteColor(), startPoint: .zero, endPoint: endPoint)

let path = UIBezierPath()
path.moveToPoint(.zero)
path.addLineToPoint(endPoint)
path.lineWidth = 5.0
path.stroke()

let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
image

You’ll end up with this image:

4

Thanks Caroline,
Your black line being the direction looks good and at each sample along it and it’s perpendicular line is filled with the changing gradient color as I’d expect. I had trouble seeing that on your earlier slide however.

I’ll have to try tomorrow evening. I am a newbie when it comes to playgrounds so I made have to do it the old fashion way.

5

The slide is rather misleading, as it shows a square, but it is stretched into a rectangle. The above definitely is correct.

I encourage you to try a playground - it’s easy and playgrounds are the bees knees for trying stuff out.

In Xcode:

  1. File Menu > New > Playground
  2. Name the Playground, make it iOS and save
  3. Replace the code in the playground with the above code.
  4. To get the image to show, click the + on the far right of the last line’s image .
6

Hi Caroline,

Thanks for clarifying my perception of the perpendicular. Your play ground snippet worked as advertised.

When is your next tutorial series ?

7

I’m glad the playground worked. They are great for testing out code.

New video series arrive all the time, but I’m not sure when my next one will arrive.

8

Cool, easy and very useful tutorial, May I ask one question may not closely related to this?

Only the coordinate system of CAGradientLayer is different or all layers are this kind of left corner and right corner? because the AVFoundation and its preview layer sometimes make me feel strange.

9

I don’t know much about AVFoundation. But UIKit and Quartz (CALayers) have different coordinate systems.

See this article by Erica Sadun: Context Coordinate System | iOS Drawing: Learning Contexts and Basic UIKit Fundamentals | InformIT

10

Thanks for your reply, I noticed there’s a AVFoundation Serials, I can check out there. :slight_smile:

11

Hi Caroline,

Can you explain what’s the difference in imageView.frame.midY and imageView.frame.height/2 ?

They return different values.

Thanks.

12

@caroline Can you please help with this when you get a chance? Thank you - much appreciated! :]

13

@ddeger - try this in a playground:

var rect = CGRect(x: 0, y: 0, width: 200, height: 400)
print("midY: ", rect.midY)
print("height/2: ", rect.height/2,"\n")
rect = CGRect(x: 100, y: 200, width: 200, height: 400)
print("midY: ", rect.midY)
print("height/2: ", rect.height/2)

You’ll get this result:

result

height/2 gives you the middle of the CGRect. So a height of 400 gives the result of 200.

midY gives you the middle of the CGRect in coordinates. In the second one, the CGRect starts down by 200, so the middle of the CGRect in coordinates is height/2 + origin.y. ie 200 (half height) + 200 (origin.y) = 400.