How to best utilize CALayers

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

So what we've said to folks is that below UIKit, every view has this CALayer, and they do text, shapes, gradients, transform and a few other things. ?

Janina Kutyn: For UIView with the CALayer, even a lot of the properties on the view actually are just wrappers around properties on CALayer, and they just forward directly to the CALayer without even adding any action. Like for example, clips to bounds versus masks to bounds and a lot of functions like that. So UIView is basically, in a lot of ways, it's just some overhead on top of CALayer.

But while every view is bound by CALayer, every CALayer doesn't have to be attached to UIView. So you can have a lot of standalone layers and just draw them directly, which also can help with performance. Because if you were, for example, drawing a layer, drawing a shape layer in the shape of a circle, then you've just drawn a circle. It doesn't have the transparency where, like if you clip the corners to bounds, it's like you've clipped off the edges of the view, but they're still there. But if you've just drawn a circle using a layer, using a shape layer, then there's nothing beyond that circle.

"For UIView with the CALayer, even a lot of the properties on the view actually are just wrappers around properties on CALayer, and they just forward directly to the CALayer without even adding any action."

You know what I mean? Or did I say that in a very confusing way?

Paul Hudson: It makes sense. I'm just trying to understand at what point folks might think should I start using CALayer, because I want things that UIView provides. I want like the layout I've mentioned earlier. I loved or at least still love sometimes the layout. And I know that if I go to CALayer, yes, I can bypass clips, the bound to do master bounds, dead or bypass other properties and go straight to CALayer. And if I place CALayers directly in my layout, but then they can't participate in or layout. Right.

Janina Kutyn: That's true. That's and to be honest, actually, now that I think about it, I don't know how the layer will perform if it's within a view and the view is being scaled. I haven't thought about that before, but yeah.

"I think really you would go to CALayer, not for the performance, but more for, for the coolest effects that you can't get through the views otherwise."

What you also wouldn't get is you wouldn't get any like interactivity, so you're not going to get like touches on a CALayer or like there is a hit test method on CALayer or, but you will have to explicitly test, like, is this within the layers? So there are things you would miss out on and it doesn't mean that you have to go to a CALayer, so like CALayer can be a little bit performant, but in a lot of cases the performance gain from going down a level is like, it's pretty negligible. I think really you would go to CALayer, not for the performance, but more for, for the coolest effects that you can't get through the views otherwise.

Paul Hudson: What does it look like to put a CALayer directly onto the screen – can you draw a CALayer to the screen without a UIView?

Janina Kutyn: You can't fully do away with views. I mean you need to have a view, that's your whole screen, for instance. So you're going to have a view and then you can just draw a layer and add it to the sublayer for your layers.

Paul Hudson: So you can just place it directly. You can say my view.layer.addSublayer(someLayer) directly, right?

Janina Kutyn: Yeah, exactly.

Paul Hudson: It used to be the case a long time ago back when actually I think it might've been Josh Shaffer who now runs the UIKit team. He used to do some brilliant talks on things like scroll views and similar. I think it was him who gave the sort of definitive talk on CATiledLayer doing tiled rendering of stuff, which is what Apple Maps does for rendering infinitely size data in very small pieces of rendered chunks at a time, scrolling that around inside a scroll view. I think an example of it was a pinch zoom on a scroll view to zoom in, and this frog would get bigger and bigger and bigger. It load a high-res frog picture, but only render parts of the picture at a time to avoid memory waste and so forth. And CATiledLayer do so much of the work for you there – they're slicing this bit up into the different segments and rendering them efficiently and caching them for you. But you got to know it's there otherwise you'll just reinvent it – and trust me, you will reinvent it badly. It's so good, you know?

“There're some optimizations they're available in the layers and in the CALayer subclasses that are really awesome.”

Janina Kutyn: Yeah, exactly. I believe what CATiledLayer does, it has the drawsAsynchronously flag that's set to true. And so which means that layers can be drawn in a background thread and which is also a, which is a flag also available on CALayer, but it, so basically you would use that to draw things asynchronously. So for example, like for CATiledLayer, or if you're drawing particle emitter, you don't need all the particles on the screens on the screen at once. You can have a little bit of a delay. So, there're some optimizations they're available in the layers and in the CALayer subclasses that are really awesome. Yeah.

"There're so many of them there really are so many. And they're all wonderful things pre-optimized for high performance."

Paul Hudson: You just mentioned emitter layers. They're amazing. I mean, they're literally particle emitters built into our standard drawing toolkit. You can have a place, a CAEmitterLayer in there and it'll launch fireballs or smoke or rain wherever you are putting your particle system right there inside your UIKit, so that when you see like, you know, Duolingo, you level up and little confetti flies out, whatever, that's how they do it. It's trivial to do thanks to CAEmitterLayer. There're so many of them there really are so many. And they're all wonderful things pre-optimized for high performance.

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