CALayer: Was es ist, Schlüsselkonzepte und Layer-Rendering

Was ist CALayer?

CALayer ist eine Klasse aus dem QuartzCore-Framework, die ein Bitmap-Bild eines rechteckigen Bildschirmbereichs verwaltet. Sie speichert visuelle Eigenschaften: frame, backgroundColor, opacity, shadow, border, transform. Im Gegensatz zu UIView verarbeitet CALayer keine Touch-Ereignisse, nimmt nicht am Auto Layout teil und hat keinen Lebenszyklus eines View Controllers.

Architektonisch implementiert CALayer das Model-Muster im Kontext von Core Animation. Die Ebene speichert den Zustand visueller Eigenschaften, während Core Animation die Interpolation zwischen Zuständen während der Animation verwaltet. Diese Trennung ermöglicht das Animieren beliebiger Ebeneneigenschaften, ohne den Inhalt über drawRect neu zeichnen zu müssen.

Laut Apple WWDC 2024 wurde CALayer für die Arbeit über Metal neu geschrieben. Die moderne Rendering-Pipeline umfasst drei Phasen: Commit (Aktualisieren von Eigenschaften auf der CPU), Render (Generieren von GPU-Befehlen auf der CPU) und Composite (Ausführen von Befehlen auf der GPU). CALayer nimmt an allen drei Phasen teil und liefert Daten für jede.

Jede Ebene kann sublayers enthalten – Unterebenen, die über der Eltern-Ebene gerendert werden. Die Ebenenhierarchie spiegelt die UIView-Hierarchie wider, kann aber unabhängig von ihr existieren. Entwickler können Ebenen unabhängig von UIView über CALayer() erstellen und sie über addSublayer zur Hierarchie hinzufügen.

Unterschied zwischen CALayer und UIView

UIView ist ein Wrapper um CALayer, der Folgendes hinzufügt: Touch-Handling über UIResponder, Teilnahme am Auto Layout, Darstellung im Storyboard und Integration mit UIViewController. CALayer ist ein leichtgewichtiges Objekt, das ohne UIView für rein visuelle Elemente verwendet werden kann.

In der Praxis bedeutet dies, dass ein Element, das keine Touch-Behandlung oder kein Layout benötigt, als CALayer implementiert werden kann. Zum Beispiel Hintergrundanimationen, Ladeanzeigen, dekorative Elemente – all dies lässt sich effizienter über CALayer implementieren und vermeidet den Overhead von UIView.

Wichtige CALayer-Eigenschaften

Basiseigenschaften von CALayer umfassen Rahmen, Positionierung, Anzeige und visuelle Effekte. frame definiert den rechteckigen Bereich der Ebene in Elternkoordinaten, bounds definiert interne Koordinaten und position definiert den Mittelpunkt der Ebene. Die Änderung von position wird standardmäßig durch implizite Animation animiert.

• backgroundColor – die Hintergrundfarbe der Ebene (CGColor). Das Setzen einer undurchsichtigen Farbe mit opaque = true eliminiert Alpha-Blending.
• cornerRadius – Eckenabrundung. Hardware-verarbeitet ohne zusätzliche Rendering-Durchläufe.
• borderWidth und borderColor – Ebenenrahmen. Auf der GPU gerendert, kein drawRect erforderlich.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath – Schatten. Ein expliziter shadowPath beschleunigt das Rendering erheblich.
• opacity – Deckkraft der Ebene von 0.0 bis 1.0. Animiert ohne Aufruf von drawRect.
• transform – CATransform3D für 2D- und 3D-Transformationen. Unterstützt perspektivische Verzerrungen.

Die contents-Eigenschaft ermöglicht das direkte Festlegen von Bitmap-Inhalten – über CGImage oder CIImage. Dies ist eine Alternative zum Zeichnen über drawRect: Wenn das Bild bereits fertig ist, kann es an contents übergeben werden, und Core Animation rendert es ohne zusätzliche Verarbeitung.

Für Animationen werden CABasicAnimation, CAKeyframeAnimation und CATransition verwendet. Alle diese Klassen arbeiten über CALayer-Eigenschafts-Key-Paths und ermöglichen die Animation praktisch jedes Attributs – von position bis transform.rotation.z.

CALayer-Unterklassen und ihr Zweck

Apple bietet mehrere spezialisierte CALayer-Unterklassen, die jeweils eine bestimmte Aufgabe lösen. Die Wahl der richtigen Unterklasse anstelle der Basis-CALayer kann durch Hardwarebeschleunigung erhebliche Leistungsverbesserungen bringen.

• CAShapeLayer – rendert Vektorformen (CGPath) auf der GPU. Benötigt keinen separaten Puffer – die Form wird als Teil der Eltern-Ebenen-Komposition gerendert.
• CATextLayer – Text-Rendering mit Subpixel-Antialiasing. Zwischenspeichert Glyphen und beschleunigt die Anzeige von wiederholtem Text.
• CAGradientLayer – lineare und radiale Verläufe. Hardware-Rendering ohne Erzeugung von Zwischenbildern.
• CAEmitterLayer – Partikelsystem auf der GPU. Jedes Partikel wird ohne CPU-Beteiligung als separates Element gerendert.
• CAReplicatorLayer – automatische Erstellung von Kopien untergeordneter Ebenen mit konfigurierbaren Versätzen in Position, Farbe und Zeit.
• CATiledLayer – Rendering großer Bilder durch Kacheln. Lädt und zeigt nur sichtbare Fragmente an.

CAReplicatorLayer ist besonders nützlich zum Erstellen sich wiederholender Muster ohne Code-Duplizierung. Beispielsweise wird ein Ladeindikator mit 10 Punkten mit einem CAReplicatorLayer mit instanceCount = 10 und Animationszeit-Offset instanceDelay implementiert.

CALayer-Rendering und Komposition

Das CALayer-Rendering erfolgt in drei Phasen. Commit – wenn sich eine Ebeneneigenschaft ändert, wird auf der CPU ein Änderungspaket gebildet. Render – Core Animation generiert auf der CPU Metal-Befehle basierend auf den Ebeneneigenschaften. Composite – die GPU führt Befehle aus und gibt den Frame auf dem Bildschirm aus. Der gesamte Prozess ist mit der Bildwiederholfrequenz des Displays synchronisiert.

Bei der Komposition mehrerer Ebenen führt die GPU sie unter Berücksichtigung von Transparenz, Masken und Mischmodi zum endgültigen Bild zusammen. Wenn eine Ebene opaque = true hat, optimiert Core Animation die Komposition: Anstelle von Alpha-Blending wird ein einfacher Pixelersatz durchgeführt, der deutlich schneller ist.

Laut den Apple Performance Guidelines sind die Hauptfaktoren, die das CALayer-Rendering verlangsamen: komplexe sublayer-Hierarchie (mehr als 30 Ebenen auf dem Bildschirm), Verwendung von Masken (mask-Eigenschaft), automatische Schattenberechnung ohne shadowPath und übermäßige Verwendung von shouldRasterize für dynamische Ebenen.

Das Core Animation Instrument in XCode ermöglicht die Überwachung der Rendering-Zeit jeder Ebene, der Anzahl der Offscreen-Puffer und der Häufigkeit von drawRect-Aufrufen. Die optimale Rendering-Zeit für 60 FPS beträgt nicht mehr als 8 ms auf der CPU und 8 ms auf der GPU.

Offscreen-Rendering und seine Auswirkungen

Offscreen-Rendering – das Rendern einer Ebene in einen Zwischenpuffer vor der Anzeige auf dem Bildschirm. Tritt bei Verwendung von cornerRadius + masksToBounds mit Inhalt, Gruppen-Deckkraft, Masken und shouldRasterize auf. Jeder Offscreen-Durchlauf dauert 2–5 ms, daher ist übermäßiges Offscreen-Rendering kritisch für die Leistung.

Zur Diagnose von Offscreen-Rendering verwenden Sie das Werkzeug Color Offscreen-Rendered im Core Animation Instrument. Gelbe Ebenen – Offscreen, blaue – direkte Bildschirmdarstellung. Die Minimierung von Offscreen-Durchläufen ist eine wichtige Optimierungstechnik in iOS.

Codebeispiele: Arbeiten mit CALayer in Swift

Das erste Beispiel zeigt die grundlegende CALayer-Konfiguration mit Schattenerstellung, Eckenabrundung und Rahmen. shadowPath wird explizit angegeben, um das Rendering zu beschleunigen:

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
}

Das zweite Beispiel zeigt eine Transform-Animation über CABasicAnimation mit perspektivischer 3D-Transformation. Die Y-Achsen-Rotationsanimation erzeugt einen Kartenumklappeffekt:

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")

Das dritte Beispiel demonstriert die Verwendung von CAGradientLayer zum Erstellen eines Hintergrundverlaufs. Der Verlauf wird auf der GPU gerendert und benötigt bei Größenänderung keine zusätzlichen Ressourcen:

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)
}