Layer in mobilen Apps — Was es ist, Arten und wie es funktioniert

Was ist Layer in der mobilen Grafik?

Layer ist ein niedrigschwelliges Grafiksystemobjekt, das ein Bitmap-Bild eines Bildschirmfragments speichert und seine visuellen Attribute verwaltet: Position, Größe, Drehung, Deckkraft, Schatten und Farbe. In iOS hat jedes UIView ein integriertes CALayer, das über die Eigenschaft layer zugänglich ist. Ein Entwickler kann direkt mit der Schicht arbeiten, ohne UIView, für eine fein abgestimmte Rendering-Steuerung.

Die Schichtarchitektur folgt dem Model-View-Controller-Muster, wobei CALayer als Modell fungiert — es speichert den Zustand der visuellen Eigenschaften. Core Animation ist der Controller, der Animationsübergänge zwischen Zuständen verwaltet. View (UIView) ist ein optionaler Wrapper, der Touch-Handling und Auto-Layout-Teilnahme hinzufügt.

Laut Apple WWDC 2024 verwendet die moderne iOS-Rendering-Pipeline Metal für die Schichtkomposition. Jedes CALayer wird in einen separaten Puffer gerendert, danach komponiert Core Animation alle Puffer unter Berücksichtigung von Deckkraft und Mischmodi zum endgültigen Bild.

In Android ist das Analogon von Schichten View und Hintergrund-Drawable, aber die direkte Arbeit mit Grafikebenen ist über Canvas und RenderNode in Android 10+ verfügbar. Das Verständnis des Schichtkonzepts ist wichtig für die Optimierung des Renderings auf beiden Plattformen.

Unterschied zwischen Layer und View

Der Hauptunterschied liegt im Verantwortungsbereich. View behandelt Benutzereingaben (Berührungen, Gesten), Positionierung (Auto Layout, Frame) und Lebenszyklus. Layer ist ausschließlich für die visuelle Darstellung verantwortlich: Inhalts-Rendering, Eigenschaftsanimation und Komposition mit anderen Schichten.

Diese Trennung ermöglicht das Zwischenspeichern der Bitmap-Darstellung der Schicht unabhängig von der View. Wenn sich die Schicht nicht ändert, verwendet Core Animation den zwischengespeicherten Frame, ohne drawRect aufzurufen. Für statische Elemente bietet dies eine erhebliche Leistungssteigerung ohne Codeänderungen.

Hauptarten von Schichten in iOS und Android

iOS bietet eine reichhaltige Hierarchie von Klassen, die von CALayer erben. Jede Unterklasse ist für ein bestimmtes Szenario optimiert: Textanzeige, Vektorgrafiken, Farbverläufe oder 3D-Transformationen. Die Wahl des richtigen Schichttyps wirkt sich direkt auf die Rendering-Leistung aus.

• CALayer — die Basisschicht für rechteckige Bereiche mit Hintergrundfarbe, Rahmen und Schatten.
• CAShapeLayer — eine Schicht zum Rendern von Vektorformen über CGPath. Das Rendering erfolgt auf der GPU ohne Erstellung eines separaten Puffers.
• CATextLayer — eine Schicht zur Textanzeige mit Subpixel-Rendering und Glyphen-Zwischenspeicherung.
• CAGradientLayer — eine Schicht für lineare und radiale Farbverläufe mit Hardwarebeschleunigung.
• CAReplicatorLayer — eine Schicht, die automatisch Kopien untergeordneter Schichten mit bestimmten Versätzen erstellt.

In Android wird das Schichtkonzept durch RenderNode, ViewLayer und HardwareRenderer implementiert. Ab Android 5.0 (API 21) wird jede View in eine eigene Hardwarebeschleunigungsschicht gerendert, was Animationen ohne Aufruf von onDraw ermöglicht.

Zusätzliche Flexibilität in iOS bieten CAReplicatorLayer und CAEmitterLayer. Ersteres wird zur Erstellung sich wiederholender Muster verwendet, letzteres für Partikelsysteme. Beide laufen ausschließlich auf der GPU und ermöglichen komplexe visuelle Effekte ohne Leistungseinbußen.

Schichthierarchie und Szenenkomposition

Die Schichthierarchie in iOS folgt einer Baumstruktur: Jedes CALayer kann mehrere untergeordnete Sublayer enthalten. Alle auf die übergeordnete Schicht angewendeten Transformationen — Skalierung, Drehung, Verschiebung — werden automatisch auf die untergeordneten Elemente angewendet. Dies gewährleistet visuelle Konsistenz während Animationen.

Die Szenenkomposition wird von Core Animation in der folgenden Reihenfolge durchgeführt: Zuerst wird der Hintergrund gerendert, dann jede untergeordnete Schicht von unten nach oben. Für jede Schicht überprüft Core Animation die Eigenschaften Deckkraft, Masken und Mischmodi und komponiert sie dann zum endgültigen Frame.

Laut Apple Documentation erfolgt die Komposition einer Schicht mit opaque = true und ohne Alphakanal ohne zusätzliche Durchgänge — die GPU kopiert einfach Pixel über die vorherige Schicht. Wenn die Schicht Transparenz enthält, führt die GPU Alpha-Blending durch, was zusätzliche Rechenressourcen erfordert.

In Android erfolgt die Schichtkomposition über SurfaceFlinger — einen Systemdienst, der Puffer von jeder Anwendung empfängt und sie entsprechend der z-Reihenfolge komponiert. Jedes Fenster in Android ist eine separate Surface, die mehrere Grafikebenen enthalten kann.

Masken und Schichtzuschnitt

CALayer.mask — eine Eigenschaft, die das Anwenden einer Maske beliebiger Form auf eine Schicht ermöglicht. Die Maske kann jedes andere CALayer sein — beispielsweise CAShapeLayer mit einem kreisförmigen Pfad oder CAGradientLayer zur Erstellung eines sanften Deckkraftübergangs. Die Verwendung von Masken erhöht die GPU-Last, da ein zusätzlicher Rendering-Durchgang zur Berechnung der Alphawerte jedes Pixels erforderlich ist.

Für einfaches rechteckiges Zuschneiden wird die Verwendung von cornerRadius und masksToBounds empfohlen. Im Gegensatz zu Masken über die mask-Eigenschaft wird cornerRadius in der Rasterisierungsphase hardwaremäßig verarbeitet und erfordert keinen zusätzlichen Durchgang.

Schichtleistung: Rendering und Caching

shouldRasterize ist eine wichtige CALayer-Eigenschaft zur Leistungsoptimierung. Wenn shouldRasterize auf true gesetzt ist, rendert Core Animation die Schicht und alle ihre Sublayer in einen separaten Offscreen-Puffer. Bei nachfolgenden Frames wird das zwischengespeicherte Bitmap-Bild anstelle eines erneuten Renderings verwendet.

Caching ist effektiv für statische oder sich selten ändernde Schichten: Schatten, Farbverläufe, Text mit abgerundeten Ecken. Bei häufig aktualisierten Schichten (Animation, Video, Scrollen) kann die Rasterisierung die Leistung jedoch beeinträchtigen, da jeder Frame eine Neugenerierung des Caches erfordert.

Laut einer Studie von Objc.io reduziert die richtige Verwendung von shouldRasterize auf dem iPad Pro die Renderzeit eines komplexen Bildschirms von 25 ms auf 8 ms — mehr als das Dreifache. Die wichtigste Bedingung ist, dass sich die Schicht nicht häufiger als alle 3–5 Frames ändern sollte.

• Opaque = true — teilt Core Animation mit, dass die Schicht undurchsichtig ist, und eliminiert Alpha-Blending.
• drawsAsynchronously — aktiviert asynchrones Rendering für komplexe Schichten, ohne den Hauptthread zu blockieren.
• allowsEdgeAntialiasing — aktiviert Kantenglättung für transformierte Schichten, erhöht jedoch die GPU-Last.
• allowsGroupOpacity — steuert die Gruppendeckkraft untergeordneter Schichten.

Beispiele für die Arbeit mit Schichten in Swift und Kotlin

Das erste Beispiel zeigt die Einstellung grundlegender visueller Eigenschaften von CALayer in Swift — abgerundete Ecken, Schatten und Rahmen:

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

Das zweite Beispiel — Erstellen einer Schichtanimation in Swift mit CABasicAnimation. Die Eigenschaft position wird ohne Beteiligung von UIView animiert:

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

Das dritte Beispiel — Arbeiten mit RenderNode in Kotlin auf Android. RenderNode ist ein direktes Analogon von CALayer, das die Arbeit mit Grafikebenen auf Canvas-Ebene ermöglicht:

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}