CALayers Tutorial for iOS: Introduction to CALayers

Easily create rounded corners, shadows, and more by using CALayers!

Easily create rounded corners, shadows, and more by using CALayers!

If you’ve been programming for the iPhone, you’re probably really familiar with UIViews – buttons, text areas, sliders, web views, and more are all subclasses of UIView.

But you might not know much about the technology that UIView is built upon: CALayers! At least I didn’t, for quite a while.

It’s good to know a bit about CALayers, because you can use them to create some neat visual effects really easily. They’re also important to understand to work with Core Animation, which we’ll be discussing in a future tutorial.

In this CALayers tutorial, you’re going to learn the basics of using CALayers by making a simple app to create a layer and experiment with how it looks. In the process, you’ll learn what layers are, some neat properties you can set, and how to put images and custom-drawn content inside.

This CALayers tutorial assumes a basic familiarity with iPhone programming. If you are completely new, you might want to begin with the How To Create A Simple iPhone App Tutorial Series first.

So let’s get layering!

What Are CALayers?

CALayers are simply classes representing a rectangle on the screen with visual content.

“But wait a darn minute,” you may say, “that’s what UIViews are for!” That’s true, but there’s a trick to that: every UIView contains a root layer that it draws to! You can access this layer (created for you by default) with following bit of code:

CALayer *myLayer = myView.layer;

The neat thing about the CALayer class is that it contains a lot of properties that you can set on it to affect the visual appearance, such as:

• The size and position of the layer
• The layer’s background color
• The contents of the layer (an image, or something drawn with Core Graphics)
• Whether the corners of the layers should be rounded
• Settings for applying a drop shadow to the layer
• Applying a stroke around the edges of the layer
• And much more!

You can use these properties to create some neat effects. For example, maybe you want to take an image, and put it in a white frame, and apply a shadow to it to make it look neat. Rather than whipping out Photoshop or creating a bunch of Core Graphics code, you can do this in a couple lines of code using CALayers!

The other neat thing about the properties on CALayer is that most of them are animatable. For example, you could start your image out with rounded corners, tap a button, and have it animate the corners back out to straight. This can make for some really neat effects!

You can use a CALayer on its own, or you can use one of the handy subclasses that are available, such as CAGradientLayer, CATextLayer, CAShapeLayer, and others. The default layer class for a UIView is the plain-old CALayer class, and that’s what you’ll be focusing on in this CALayers tutorial.

Getting Started

There’s no better way to understand using CALayers than to try them out yourself! So load up XCode, go to File\New Project, choose iOS\Application\View-based Application, and click “Choose…”. Name the project LayerFun, and click Save.

The View-based Application template starts with a single view controller, and as you know, each view controller has a root view. And as you learned above, every view has a root layer.

So now you’ll try this out for yourself by changing some properties on the view’s layer.

But first things first. To use CALayers and Core Animation, you need to use a framework that isn’t included by default in the View-based template: QuartzCore. So add it to your project by control-clicking the Frameworks group, selecting Add\Existing Framework…, and choosing QuartzCore.framework from the dropdown list.

Now that you’ve included QuartzCore, make the following changes to LayerFunViewController.m:

// Import QuartzCore.h at the top of the file
#import <QuartzCore/QuartzCore.h>

// Uncomment viewDidLoad and add the following lines
self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
self.view.layer.cornerRadius = 20.0;
self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

Let’s go over this bit by bit since this is new stuff:

• To get a pointer to the layer for the view, you just use self.view.layer. Remember, you can the root view for a View Controller by calling self.view. Once you have the view, you can get its default layer (created automatically) by using view.layer. By default, the layer is a CALayer (not a subclass).
• Next you set the layer’s background color to orange. Note that the backgroundColor property actually takes a CGColor, but it’s easy to convert a UIColor to a CGColor by using the CGColor property.
• Next you round the corners a bit by setting the corner radius. The value you pass in is the radius of the circle which makes up the corner, and it chooses 20 here for a nice rounded edge.
• Finally, you shrink the frame a bit so it’s easier to see, by using the handy CGRectInset function. The CGRectInset function takes a frame and an amount to shrink it by (for both the X and Y), and returns a new frame.

Compile and run your code, and you should see a rounded orange rectangle in the middle of your screen:

CALayers and Sublayers

Just like UIViews can have subviews, CALayers can have sublayers as well. You can create a new CALayer very easily with the following line of code:

CALayer *sublayer = [CALayer layer];

Once you have a CALayer, you can set any properties on it you’d like. But remember there’s one property you definitely have to set: it’s frame (or bounds/position). After all, the layer needs to know how big it is (and where it’s located) in order to draw itself! When you’re done, you can add your new layer as a sublayer of another layer by the following line of code:

[myLayer addSublayer:sublayer];

Ok, now try this out for yourself by adding a simple sublayer to the view’s layer. Add the following lines of code inside viewDidLoad, right after where you left off last time:

CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(30, 30, 128, 192);
[self.view.layer addSublayer:sublayer];

This creates a new layer, and sets a few properties on it – including a few you haven’t seen before to set shadows. You can see here how easy it is to set shadows on a layer – which can give some amazing effects with very little effort!

After setting the properties, it sets the frame of the layer and adds it as a sublayer to the view’s layer. Remember that these coordinates are relative to the parent layer’s frame, and since the parent layer begins at (20,20), the sublayer will be offset an additional (30,30) from that, so on the screen it will be at (50,50).

Compile and run your code, and you should now see a blue sublayer on the screen!