CALayer: wat is het, kernconcepten en weergave van de laag

Wat is CALayer?

CALayer — is een klasse uit het QuartzCore-framework die de rasterafbeelding van een rechthoekig gebied op het scherm beheert. Het slaat visuele eigenschappen op: frame, backgroundColor, opacity, shadow, border, transform. In tegenstelling tot UIView verwerkt CALayer geen aanraakgebeurtenissen, neemt het niet deel aan Auto Layout en heeft het geen levenscyclus van een view controller.

Architecturaal implementeert CALayer het Model-patroon in de context van Core Animation. De laag slaat de status van visuele eigenschappen op en Core Animation beheert de interpolatie tussen statussen tijdens de animatie. Deze scheiding maakt het mogelijk om willekeurige eigenschappen van de laag te animeren zonder dat de content opnieuw getekend hoeft te worden via drawRect.

Volgens Apple WWDC 2024 is CALayer herschreven om via Metal te werken. De moderne weergavepijplijn omvat drie fasen: Commit (bijwerken van eigenschappen op de CPU), Render (genereren van commando's voor de GPU op de CPU) en Composite (uitvoeren van commando's op de GPU). CALayer neemt aan alle drie de fasen deel en levert gegevens voor elk.

Elke laag kan sublayers bevatten — onderliggende lagen die boven de bovenliggende laag worden weergegeven. De hiërarchie van lagen herhaalt de UIView-hiërarchie, maar kan afzonderlijk bestaan. Ontwikkelaars kunnen lagen onafhankelijk van UIView maken via CALayer() en ze toevoegen aan de hiërarchie via addSublayer.

Verschil tussen CALayer en UIView

UIView — is een laag bovenop CALayer die het volgende toevoegt: verwerking van aanraking via UIResponder, deelname aan Auto Layout, weergave in storyboard, integratie met UIViewController. CALayer — is een lichtgewicht object dat zonder UIView kan worden gebruikt voor puur visuele elementen.

In de praktijk betekent dit dat als een element geen aanraking en layout nodig heeft, het als CALayer kan worden geïmplementeerd. Bijvoorbeeld achtergrondanimaties, laadindicatoren, decoratieve elementen — dit alles is efficiënter te implementeren via CALayer, waarbij de overhead van UIView wordt vermeden.

Basiseigenschappen van CALayer

Basiseigenschappen van CALayer omvatten frame, positionering, weergave en visuele effecten. frame bepaalt het rechthoekige gebied van de laag in de coördinaten van de ouder, bounds — interne coördinaten, position — het midden van de laag. Verandering van position wordt standaard geanimeerd via implicit animation.

• backgroundColor — achtergrondkleur van de laag (CGColor). Het instellen van een ondoorzichtige kleur en opaque = true elimineert alfa-menging.
• cornerRadius — afronding van hoeken. Hardwarematige verwerking zonder extra weergavepassen.
• borderWidth en borderColor — rand van de laag. Wordt op de GPU weergegeven, vereist geen drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — schaduw. Expliciete shadowPath versnelt de weergave aanzienlijk.
• opacity — transparantie van de laag van 0.0 tot 1.0. Wordt geanimeerd zonder drawRect aan te roepen.
• transform — CATransform3D voor 2D- en 3D-transformaties. Ondersteunt perspectivische vervormingen.

De eigenschap contents maakt het mogelijk om de rasterinhoud van de laag direct in te stellen — via CGImage of CIImage. Dit is een alternatief voor tekenen via drawRect: als de afbeelding al klaar is, kan deze in contents worden doorgegeven en Core Animation zal deze zonder verdere verwerking weergeven.

Voor animaties worden CABasicAnimation, CAKeyframeAnimation en CATransition gebruikt. Al deze klassen werken via sleutelpaden van CALayer-eigenschappen, waardoor vrijwel elk attribuut — van position tot transform.rotation.z — geanimeerd kan worden.

Subklassen van CALayer en hun doel

Apple biedt verschillende gespecialiseerde subklassen van CALayer, die elk een specifieke taak oplossen. Het kiezen van de juiste subklasse in plaats van de basis CALayer kan een aanzienlijke prestatieverbetering opleveren dankzij hardwareversnelling.

• CAShapeLayer — tekenen van vectorvormen (CGPath) op de GPU. Vereist geen aparte buffer — de vorm wordt weergegeven als onderdeel van de compositie van de bovenliggende laag.
• CATextLayer — weergave van tekst met subpixel-anti-aliasing. Cacht glyphs, wat de weergave van herhalende tekst versnelt.
• CAGradientLayer — lineaire en radiale gradiënten. Hardwarematige weergave zonder het genereren van tussenliggende afbeeldingen.
• CAEmitterLayer — deeltjessysteem op de GPU. Elk deeltje wordt weergegeven als afzonderlijk element zonder tussenkomst van de CPU.
• CAReplicatorLayer — automatisch kopieën maken van onderliggende lagen met configureerbare verschuivingen in positie, kleur en tijd.
• CATiledLayer — weergave van grote afbeeldingen in tegels. Laadt en toont alleen zichtbare fragmenten.

CAReplicatorLayer is bijzonder nuttig voor het maken van repetitieve patronen zonder codeduplicatie. Bijvoorbeeld een laadindicator van 10 punten wordt geïmplementeerd met één CAReplicatorLayer met instanceCount = 10 en een tijdsverschuiving instanceDelay voor de animatie.

Weergave en compositie van CALayer

Weergave van CALayer verloopt in drie fasen. Commit — bij het wijzigen van een eigenschap van de laag wordt op de CPU een pakket wijzigingen gevormd. Render — Core Animation genereert Metal-commando's op de CPU op basis van de eigenschappen van de laag. Composite — de GPU voert de commando's uit en toont het frame op het scherm. Het hele proces is gesynchroniseerd met de verversingssnelheid van het scherm.

Bij compositie van meerdere lagen voegt de GPU ze samen tot een uiteindelijk beeld, rekening houdend met transparantie, maskers en mengmodi. Als de laag opaque = true heeft, optimaliseert Core Animation de compositie: in plaats van alfa-menging wordt een eenvoudige pixelvervanging uitgevoerd, wat aanzienlijk sneller is.

Volgens Apple Performance Guidelines zijn de belangrijkste factoren die de weergave van CALayer vertragen: complexe hiërarchie van sublayers (meer dan 30 lagen op het scherm), gebruik van maskers (mask-eigenschap), automatische berekening van schaduw zonder shadowPath, overmatig gebruik van shouldRasterize voor dynamische lagen.

Het hulpmiddel Core Animation Instrument in XCode maakt het mogelijk om de weergavetijd van elke laag, het aantal offscreen-buffers en de frequentie van drawRect-aanroepen te controleren. Optimale weergavetijd voor 60 FPS — niet meer dan 8 ms op de CPU en 8 ms op de GPU.

Offscreen-weergave en de impact ervan

Offscreen-weergave — weergave van de laag in een tussenliggende buffer voordat deze op het scherm wordt getoond. Treedt op bij gebruik van cornerRadius + masksToBounds met content, groepsopacity, maskers en shouldRasterize. Elke offscreen-pass duurt 2–5 ms, daarom is overmatige offscreen-weergave kritisch voor de prestaties.

Voor diagnostiek van offscreen-weergave gebruikt u het hulpmiddel Color Offscreen-Rendered in Core Animation Instrument. Gele lagen — offscreen, blauwe — directe weergave op het scherm. Minimalisatie van offscreen-passes is de belangrijkste optimalisatietechniek in iOS.

Codevoorbeelden: werken met CALayer in Swift

Het eerste voorbeeld toont de basisconfiguratie van CALayer met het maken van een schaduw, afronding van hoeken en rand. shadowPath is expliciet ingesteld om de weergave te versnellen:

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
}

Het tweede voorbeeld — animatie van transform via CABasicAnimation met een perspectivische 3D-transformatie. De rotatie-animatie rond de Y-as creëert een omkeereffect van de kaart:

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

Het derde voorbeeld — gebruik van CAGradientLayer voor het maken van een achtergrondgradiënt. De gradiënt wordt op de GPU weergegeven en vereist geen extra bronnen bij het wijzigen van afmetingen:

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