CALayer: co to je, klíčové pojmy a vykreslování vrstvy

Co je CALayer?

CALayer — je třída z frameworku QuartzCore, která spravuje rastrový obrázek obdélníkové oblasti obrazovky. Ukládá vizuální vlastnosti: frame, backgroundColor, opacity, shadow, border, transform. Na rozdíl od UIView, CALayer nezpracovává dotykové události, neúčastní se Auto Layout a nemá životní cyklus view controlleru.

Architektonicky CALayer implementuje vzor Model v kontextu Core Animation. Vrstva ukládá stav vizuálních vlastností a Core Animation řídí interpolaci mezi stavy během animace. Toto oddělení umožňuje animovat libovolné vlastnosti vrstvy bez nutnosti překreslovat obsah prostřednictvím drawRect.

Podle Apple WWDC 2024 byl CALayer přepsán pro práci prostřednictvím Metal. Moderní pipeline vykreslování zahrnuje tři fáze: Commit (aktualizace vlastností na CPU), Render (generování příkazů pro GPU na CPU) a Composite (provedení příkazů na GPU). CALayer se účastní všech tří fází a poskytuje data pro každou z nich.

Každá vrstva může obsahovat sublayers — dceřiné vrstvy, které se vykreslují nad rodičovskou vrstvou. Hierarchie vrstev opakuje hierarchii UIView, ale může existovat samostatně. Vývojář může vytvářet vrstvy nezávisle na UIView prostřednictvím CALayer() a přidávat je do hierarchie přes addSublayer.

Rozdíl mezi CALayer a UIView

UIView — je nástavba nad CALayer, která přidává: zpracování dotyků přes UIResponder, účast v Auto Layout, prezentaci v storyboard, integraci s UIViewController. CALayer — je lehký objekt, který lze použít bez UIView pro čistě vizuální prvky.

V praxi to znamená, že pokud prvek nepotřebuje dotyky a layout, lze jej implementovat jako CALayer. Například animace na pozadí, indikátory načítání, dekorativní prvky — vše je efektivnější implementovat přes CALayer, čímž se vyhnete režii UIView.

Základní vlastnosti CALayer

Základní vlastnosti CALayer zahrnují rámeček, umístění, zobrazení a vizuální efekty. frame definuje obdélníkovou oblast vrstvy v souřadnicích rodiče, bounds — vnitřní souřadnice, position — střed vrstvy. Změna position je ve výchozím nastavení animována prostřednictvím implicit animation.

• backgroundColor — barva pozadí vrstvy (CGColor). Nastavení neprůhledné barvy a opaque = true eliminuje míchání alfa.
• cornerRadius — zaoblení rohů. Hardwarové zpracování bez dalších průchodů vykreslování.
• borderWidth a borderColor — okraj vrstvy. Vykresluje se na GPU, nevyžaduje drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — stín. Explicitní shadowPath výrazně urychluje vykreslování.
• opacity — průhlednost vrstvy od 0.0 do 1.0. Animuje se bez volání drawRect.
• transform — CATransform3D pro 2D a 3D transformace. Podporuje perspektivní deformace.

Vlastnost contents umožňuje přímé nastavení rastrového obsahu vrstvy — prostřednictvím CGImage nebo CIImage. To je alternativa ke kreslení přes drawRect: pokud je obrázek již hotov, lze jej předat do contents a Core Animation jej vykreslí bez dalšího zpracování.

Pro animace se používají CABasicAnimation, CAKeyframeAnimation a CATransition. Všechny tyto třídy pracují prostřednictvím klíčových cest vlastností CALayer, což umožňuje animovat téměř jakýkoli atribut — od position po transform.rotation.z.

Podtřídy CALayer a jejich účel

Apple poskytuje několik specializovaných podtříd CALayer, z nichž každá řeší konkrétní úkol. Výběr vhodné podtřídy místo základního CALayer může poskytnout významné zvýšení výkonu díky hardwarovému zrychlení.

• CAShapeLayer — kreslení vektorových tvarů (CGPath) na GPU. Nevyžaduje samostatný buffer — tvar se vykresluje jako součást kompozice rodičovské vrstvy.
• CATextLayer — vykreslování textu s vyhlazováním subpixelů. Ukládá glyphy do mezipaměti, co urychluje zobrazení opakujícího se textu.
• CAGradientLayer — lineární a radiální gradienty. Hardwarové vykreslování bez generování mezilehlých obrázků.
• CAEmitterLayer — systém částic na GPU. Každá částice se vykresluje jako samostatný prvek bez účasti CPU.
• CAReplicatorLayer — automatické vytváření kopií dceřiných vrstev s konfigurovatelnými posuny polohy, barvy a času.
• CATiledLayer — vykreslování velkých obrázků v dlaždicích. Načítá a zobrazuje pouze viditelné fragmenty.

CAReplicatorLayer je obzvláště užitečný pro vytváření opakujících se vzorů bez duplikace kódu. Například indikátor načítání z 10 bodů je implementován jedním CAReplicatorLayer s instanceCount = 10 a časovým posunem animace instanceDelay.

Vykreslování a kompozice CALayer

Vykreslování CALayer probíhá ve třech fázích. Commit — při změně vlastnosti vrstvy se na CPU vytvoří balíček změn. Render — Core Animation generuje Metal příkazy na CPU na základě vlastností vrstvy. Composite — GPU provede příkazy a zobrazí snímek na obrazovce. Celý proces je synchronizován s obnovovací frekvencí displeje.

Při kompozici více vrstev je GPU spojí do výsledného obrázku s přihlédnutím k průhlednosti, maskám a režimům míchání. Pokud má vrstva opaque = true, Core Animation optimalizuje kompozici: místo míchání alfa se provádí jednoduchá výměna pixelů, což je výrazně rychlejší.

Podle Apple Performance Guidelines jsou hlavními faktory zpomalujícími vykreslování CALayer: složitá hierarchie sublayers (více než 30 vrstev na obrazovce), použití masek (vlastnost mask), automatický výpočet stínu bez shadowPath, nadměrné používání shouldRasterize pro dynamické vrstvy.

Nástroj Core Animation Instrument v XCode umožňuje sledovat čas vykreslování každé vrstvy, počet offscreen bufferů a frekvenci volání drawRect. Optimální čas vykreslování pro 60 FPS — ne více než 8 ms na CPU a 8 ms na GPU.

Offscreen vykreslování a jeho vliv

Offscreen vykreslování — vykreslování vrstvy do mezipaměti před zobrazením na obrazovce. Vyskytuje se při použití cornerRadius + masksToBounds s obsahem, skupinové opacity, maskách a shouldRasterize. Každý offscreen průchod trvá 2–5 ms, proto je nadměrné offscreen vykreslování kritické pro výkon.

Pro diagnostiku offscreen vykreslování použijte nástroj Color Offscreen-Rendered v Core Animation Instrument. Žluťé vrstvy — offscreen, modré — přímé vykreslování na obrazovku. Minimalizace offscreen průchodů je klíčovou technikou optimalizace v iOS.

Příklady kódu: práce s CALayer v Swift

První příklad ukazuje základní konfiguraci CALayer s vytvořením stínu, zaoblením rohů a okrajem. shadowPath je explicitně nastaven pro urychlení vykreslování:

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
}

Druhý příklad — animace transform prostřednictvím CABasicAnimation s perspektivní 3D transformací. Animace rotace kolem osy Y vytváří efekt otáčení karty:

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

Třetí příklad — použití CAGradientLayer pro vytvoření gradientu pozadí. Gradient se vykresluje na GPU a nevyžaduje další prostředky při změně velikosti:

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