What is CALayer and why is it so important?

Recorded April 24th 2020 – watch the full episode on YouTube.

CALayer is really one of those unsung heroes. It's everywhere in iOS, – CALayer just pervades our system. But what is it?

Janina Kutyn: So CALayer is the fundamental object of the Core Animation framework. Basically, the important thing about it is that every UIView is backed by a CALayer. So CALayer is sort of the simpler, lower-level version of UIView that is not a part of the responder chain, because it's not a subclass of UIResponder. So it doesn't handle the user interactions. But other than that, that's what handles UIView’s appearance.

Paul Hudson: I seem to remember, but I think he might have deleted it, Jeff Nadeau from the Cocoa team at Apple tweeting he thought the single greatest mistake of UIKit was having every view backed by a CALayer. Because of course in Mac land this was never the case. Not until very recently was CALayer encouraged or enabled for these views. You'd choose it by hand, and it would usually screw up your layouts completely because things are being rendered where they shouldn't be because Core Animation is kicking in and doing things that were unexpected. So CALayer has been there in iOS since day one, right? Core Animation was built for iOS, I think, originally.

“There's shape layer, the gradient layer, the text layer, the scroll layer, transform layer, tiled layer, player layer. There is so many layers. And I think CALayer and its subclasses are really an under-appreciated object.”

Janina Kutyn: Was it? So I don't know. I don't know who built it.

Paul Hudson: I think it was. I think it was released to macOS first, but it was designed for iOS and then shipped on macOS. And it was public at the time. I think it was like macOS Tiger or something had it in. And it was in iOS, but of course iOS hadn't shipped by that point. So it was a surprise at that point.

So CALayer is everywhere in UIKit, and it's extremely, extremely fast. But I think what folks don't understand is what it's actually doing. Because your raw CALayer is just more or less some pixels, right? Here's the memory of your rendered label. Your rendered image is literally the picture inside it with some properties and methods around it. But there's not a lot in there, the raw CALayer. There's actually a wider family of CALayer subclasses, isn't there?

Janina Kutyn: You know Apple's motto, “there's an app for that.” It's like, “there's a layer for that.” There's layers for shapes. There's shape layer, gradient layer, text layer, scroll layer, transform layer, tiled layer, player layer. There is so many layers. And I think CALayer and its subclasses are really an under-appreciated object. Because it does come with a lot of cool out-of-the-box effects like gradient layer. You can use that to make really beautiful gradients.

“You can achieve such stunning visual effects with something as simple as a gradient layer. And it really just gives you everything to get it done.”

And shape layer allows you to specify a shape of something and just draw it in that shape. So beyond what you can do with just rounding off a couple of corners. But you want to draw a heart? You can use a shape layer. You want to draw a flower? You can use a shape layer. You can just draw all these things by hand, and then you're not really relying on assets or scaling things or anything. You can just draw it directly to the screen, which I think is pretty cool. But I'm perhaps a bit of a nerd when it comes to layers.

Paul Hudson: It is cool. And I think it's so cool that we can almost rewind and go into more detail about some of the things you've mentioned. Because you've skipped over them like they're small, but they're not. They're really, really awesome. CAGradientLayer lets you draw any color to any color gradients, any direction you'd like, different kinds of gradients, different stops of gradients like multiple positions, and so forth, transparence and similar.

I remember years ago one of my very first iOS apps... iOS I think it was 3.2 or 4.0, maybe. This is for iPad, I mean. I was doing shadows using pictures. I'd draw a picture in Photoshop, a black to transparent gradient, and put that into my thing, and then draw that image view at various sizes to have shadows inside my layouts. But gradient layers do shadows brilliantly. It's a black to transparent gradient. It's just right there, and it's baked into CALayer. It's lightning fast, and it requires no assets. It's just there.

“It's like, ‘This should be much, much harder,’ and it really isn't hard. But the only hard thing I think is the fact that it doesn't work with UIView's animation framework. It's all below UIView.”

Janina Kutyn: And there're so many use cases for, even for gradient layer, like you said, shadow or to make text stand out by introducing gradient over an image. That's a pretty common use case that I think really creates a beautiful and more refined effect. Or if you look at Instagram for their stories. For typing text, they have created all these really beautiful gradients from pink to yellow to purple and green. Like I would imagine that those are gradient layers.

I mean, I don't know how they implemented it, but you can achieve such stunning visual effects with something as simple as a gradient layer. And it really just gives you everything to get it done.

Paul Hudson: Yeah. We also mentioned shape layer. I wish I could get more folks to use shape layer, because it's beautiful. In fact, I have this free Swift learning app called Unwrap. You get this first run-screen thing, "Welcome to Unwrap, do you want a tour or not?" The logo just draws itself on the screen. And that's done using a simple UIBezierPath. I have a Bezier path for my logo, which I used PaintCode for. And then I say, “hey, shape layer, draw this please.” And it goes, “yeah, fine. Let's draw that shape at speed you specify.” It just draws the outline for me. And you could do that. You could do it with dots and dashes. You could do it in various line thicknesses. You could do fills or not. Shape layer, again, it's like, “wow, this is a really, really powerful tool just sitting there waiting to be used.”

Janina Kutyn: And especially when you mentioned the dots and dashes. I think that's really a feature you don't really see people using much, but you can use a shape layer to draw a border in basically in whatever pattern you want. And you specify how wide the segments are to relation to each other, and even how they end. Are they capped like rounded or are they square? The level of detail in some of these layers, it's so high.

Paul Hudson: It really is. I think my favorite property on that type is line dash phase because you can control, like, "I want like a long line, then a long gap, a long line, long gap. And the line phase lets you move it along, creating that sort of marching ant effect you get when you select stuff in Photoshop, whatever. The dots and dashes move around the shape you specified, and it takes no code. It's like, “this should be much, much harder,” and it really isn't hard. But the only hard thing I think is the fact that it doesn't work with UIView’s animation framework. It's all below UIView. It's all Core Animation stuff, so you can't say, “start animation block and do this.” You got to go much more painfully, which is a frustration, but there you go.

Sponsor Hacking with Swift and reach the world's largest Swift community!