CALayer: What It Is, Key Concepts, and Layer Rendering

What Is CALayer?

CALayer is a class from the QuartzCore framework that manages a bitmap image of a rectangular screen area. It stores visual properties: frame, backgroundColor, opacity, shadow, border, transform. Unlike UIView, CALayer does not handle touch events, does not participate in Auto Layout, and has no view controller lifecycle.

Architecturally, CALayer implements the Model pattern in the context of Core Animation. The layer stores the state of visual properties, while Core Animation manages interpolation between states during animation. This separation allows animating any layer properties without redrawing content via drawRect.

According to Apple WWDC 2024, CALayer was rewritten to work through Metal. The modern rendering pipeline includes three stages: Commit (updating properties on CPU), Render (generating GPU commands on CPU), and Composite (executing commands on GPU). CALayer participates in all three stages, providing data for each.

Each layer can contain sublayers — child layers that render on top of the parent. The layer hierarchy mirrors the UIView hierarchy but can exist independently from it. Developers can create layers independently of UIView through CALayer() and add them to the hierarchy via addSublayer.

Difference Between CALayer and UIView

UIView is a wrapper around CALayer that adds: touch handling via UIResponder, Auto Layout participation, storyboard representation, and UIViewController integration. CALayer is a lightweight object that can be used without UIView for purely visual elements.

In practice, this means that if an element does not need touch handling or layout, it can be implemented as a CALayer. For example, background animation, loading indicators, decorative elements — all of these are more efficiently implemented via CALayer, avoiding UIView overhead.

Core CALayer Properties

Basic properties of CALayer include frame, positioning, display, and visual effects. frame defines the rectangular area of the layer in parent coordinates, bounds defines internal coordinates, and position defines the layer center. Changing position is animated by default through implicit animation.

• backgroundColor — the layer background color (CGColor). Setting an opaque color with opaque = true eliminates alpha blending.
• cornerRadius — corner rounding. Hardware-processed without additional rendering passes.
• borderWidth and borderColor — layer border. Rendered on GPU, no drawRect required.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — shadow. An explicit shadowPath significantly speeds up rendering.
• opacity — layer transparency from 0.0 to 1.0. Animated without calling drawRect.
• transform — CATransform3D for 2D and 3D transformations. Supports perspective distortions.

The contents property allows setting bitmap content directly — via CGImage or CIImage. This is an alternative to drawing through drawRect: if the image is already ready, it can be passed to contents, and Core Animation will render it without additional processing.

For animation, CABasicAnimation, CAKeyframeAnimation, and CATransition are used. All these classes work through CALayer property key paths, allowing animation of virtually any attribute — from position to transform.rotation.z.

CALayer Subclasses and Their Purpose

Apple provides several specialized CALayer subclasses, each solving a specific task. Choosing the right subclass instead of the base CALayer can provide significant performance improvements through hardware acceleration.

• CAShapeLayer — renders vector shapes (CGPath) on GPU. Does not require a separate buffer — the shape renders as part of the parent layer composition.
• CATextLayer — text rendering with subpixel antialiasing. Caches glyphs, speeding up repeated text display.
• CAGradientLayer — linear and radial gradients. Hardware rendering without generating intermediate images.
• CAEmitterLayer — particle system on GPU. Each particle renders as a separate element without CPU involvement.
• CAReplicatorLayer — automatic creation of child layer copies with configurable offsets in position, color, and time.
• CATiledLayer — large image rendering by tiles. Loads and displays only visible fragments.

CAReplicatorLayer is especially useful for creating repeating patterns without code duplication. For example, a loading indicator with 10 dots is implemented with one CAReplicatorLayer using instanceCount = 10 and animation time offset instanceDelay.

CALayer Rendering and Compositing

CALayer rendering proceeds in three phases. Commit — when a layer property changes, a change batch is formed on the CPU. Render — Core Animation generates Metal commands on the CPU based on layer properties. Composite — the GPU executes commands and outputs the frame to the screen. The entire process is synchronized with the display refresh rate.

During compositing of multiple layers, the GPU merges them into the final image taking into account transparency, masks, and blending modes. If a layer has opaque = true, Core Animation optimizes compositing: instead of alpha blending, simple pixel replacement is performed, which is significantly faster.

According to Apple Performance Guidelines, the main factors slowing down CALayer rendering are: complex sublayer hierarchy (more than 30 layers on screen), use of masks (mask property), automatic shadow calculation without shadowPath, and excessive use of shouldRasterize for dynamic layers.

The Core Animation Instrument in XCode allows monitoring each layer's rendering time, offscreen buffer count, and drawRect call frequency. Optimal rendering time for 60 FPS is no more than 8 ms on CPU and 8 ms on GPU.

Offscreen Rendering and Its Impact

Offscreen rendering — rendering a layer into an intermediate buffer before displaying on screen. Occurs when using cornerRadius + masksToBounds with content, group opacity, masks, and shouldRasterize. Each offscreen pass takes 2–5 ms, so excessive offscreen rendering is critical for performance.

To diagnose offscreen rendering, use the Color Offscreen-Rendered tool in Core Animation Instrument. Yellow layers — offscreen, blue — direct screen rendering. Minimizing offscreen passes is a key optimization technique in iOS.

Code Examples: Working with CALayer in Swift

The first example demonstrates basic CALayer setup with shadow creation, corner rounding, and border. shadowPath is specified explicitly to speed up rendering:

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

The second example shows transform animation via CABasicAnimation with perspective 3D transformation. Y-axis rotation animation creates a card flip effect:

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

The third example demonstrates using CAGradientLayer to create a background gradient. The gradient renders on GPU and requires no additional resources when resizing:

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}