Topics

Topics

Today we'll be taking a look at another often overlooked, yet quite powerful tool in Core Graphics: CAEmitterLayer. It can help us create all sorts of interesting particle effects. We're going to use it to make some chocolate rain. Let's do it!

We'll start by creating a new emitter layer. (We'll need to do all of this inside some view we want to rain chocolate down upon).

varemitter=CAEmitterLayer()

Next, we'll configure its size, position, and shape so it looks essentially like a "rain bar" at the top of our view:

Topics

Topics

Core Graphics and Core Animation are incredibly powerful tools with lots of useful components. Today we'll try out one of them, CATextLayer, and learn how it can help us create some fun and interesting visuals. Let's get started.

First, we'll need a view to mask. We'll create a UIImageView and use this great looking Apple TV marketing image to test things out.

Topics

Topics

Let's draw some strings! There's plenty of text-drawing capabilities in iOS and OS X, with full frameworks like Text Kit (or the lower-level Core Text) dedicated to the task. Today, we'll start looking at these capabilities by using Core Graphics and UIKit to draw a multiline string.

Sometimes we need to draw text ourselves, “manually”. This can be helpful when optimizing for scrolling performance, or when complete customization is necessary.

First we'll need a view to draw into, we'll make a new UIView, and override drawRect.

Next, we'll start implementing our drawRectfunction with a few variables. We'll choose a font, then setup a paragraph style to make our text multiline, with some tall lines.

We'll also setup some drawing options to tell the system we want multiline text:

Topics

Topics

CGPaths are how CoreGraphics describes the bezier paths it uses for drawing to the screen. They can go a long way to unlocking some of the power of CoreGraphics, so let’s take a look:

We're going to create a custom disclosure indicator to use on our UITableView rows. We’ll create a CGPath, and add two lines to it that make up the arrow shape.

This kind of CoreGraphics code is largely imperative. You tell the system what to do in a bunch of steps.

@IBDesignableclassDisclosureIndicatorView:UIView{overridefuncdrawRect(rect:CGRect){letpath=CGPathCreateMutable()// move to top-leftCGPathMoveToPoint(path,nil,bounds.origin.x,bounds.origin.y)// add line to middle-rightCGPathAddLineToPoint(path,nil,bounds.size.width,CGRectGetMidY(bounds))// move to bottom-leftCGPathMoveToPoint(path,nil,bounds.origin.x,bounds.size.height)// add another line to middle-rightCGPathAddLineToPoint(path,nil,bounds.size.width,CGRectGetMidY(bounds))letcontext=UIGraphicsGetCurrentContext()CGContextAddPath(context,path)UIColor.lightGrayColor().setStroke()CGContextSetLineWidth(context,2.0);CGContextDrawPath(context,kCGPathStroke)}}

We tell CoreGraphics to move to the top-left point in our view, then we ask the system to add line, then move again, and so on.

Finally we add the path to our context, and draw the path to the screen using a light gray color, and a 2-pixel wide line.

Pro Tip: Add @IBDesignable to your view so you can preview it in Interface Builder! (shown below)