CALayer: mi ez, kulcsfontosságú fogalmak és a réteg megjelenítése

Mi az a CALayer?

CALayer — egy osztály a QuartzCore keretrendszerből, amely a képernyő egy téglalap alakú területének raszterképét kezeli. Vizuális tulajdonságokat tárol: frame, backgroundColor, opacity, shadow, border, transform. Az UIView-től eltérően a CALayer nem dolgozza fel az érintési eseményeket, nem vesz részt az Auto Layout-ban, és nem rendelkezik view controller életciklussal.

Architekturálisan a CALayer a Model mintát valósítja meg a Core Animation kontextusában. A réteg tárolja a vizuális tulajdonságok állapotát, a Core Animation pedig az állapotok közötti interpolációt kezeli az animáció során. Ez a szétválasztás lehetővé teszi a réteg bármely tulajdonságának animálását anélkül, hogy a tartalmat újra kellene rajzolni a drawRect-en keresztül.

A Apple WWDC 2024 szerint a CALayer-t átírták a Metal-on keresztüli működéshez. A modern megjelenítési csœvezeték három fázist tartalmaz: Commit (tulajdonságok frissítése a CPU-n), Render (GPU parancsok generálása a CPU-n) és Composite (parancsok végrehajtása a GPU-n). A CALayer mindhárom fázisban részt vesz, adatokat szolgáltatva mindegyikhez.

Minden réteg tartalmazhat sublayers — gyermek rétegeket, amelyek a szülő réteg felett jelennek meg. A rétegek hierarchiája megismétli az UIView hierarchiáját, de külön is létezhet. A fejlesztő létrehozhat rétegeket az UIView-től függetlenül a CALayer() segítségével, és hozzáadhatja azokat a hierarchiához az addSublayer-en keresztül.

Különbség a CALayer és az UIView között

UIView — egy réteg a CALayer felett, amely hozzáadja: az érintés feldolgozását a UIResponderen keresztül, részvételt az Auto Layout-ban, megjelenítést a storyboard-ban, integrációt az UIViewController-rel. CALayer — egy könnyű objektum, amely UIView nélkül használható tiszta vizuális elemekhez.

A gyakorlatban ez azt jelenti, hogy ha egy elemnek nincs szüksége érintésre és layout-ra, CALayer-ként implementálható. Például háttéranimációk, töltőjelzők, dekoratív elemek — mindezek hatékonyabban implementálhatók a CALayer-en keresztül, elkerülve az UIView túlterhelését.

A CALayer alapvető tulajdonságai

Alapvető tulajdonságok magukban foglalják a keretet, pozicionálást, megjelenítést és vizuális effekteket. A frame meghatározza a réteg téglalap alakú területét a szülő koordinátáiban, a bounds — a belső koordinátákat, a position — a réteg középpontját. A position változtatása alapértelmezetten animált az implicit animation-en keresztül.

• backgroundColor — a réteg háttérszíne (CGColor). Átlátszatlan szín és opaque = true beállítása megszünteti az alfa keverést.
• cornerRadius — a sarkok lekerekítése. Hardveres feldolgozás további megjelenítési menetek nélkül.
• borderWidth és borderColor — a réteg szegélye. GPU-n jelenik meg, nem igényel drawRect-et.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — árnyék. Az explicit shadowPath jelentősen felgyorsítja a megjelenítést.
• opacity — a réteg átlátszósága 0.0 és 1.0 között. Animálható a drawRect meghívása nélkül.
• transform — CATransform3D 2D és 3D transzformációkhoz. Támogatja a perspektívatorzításokat.

A contents tulajdonság lehetővé teszi a réteg rasztertartalmának közvetlen beállítását — CGImage vagy CIImage segítségével. Ez alternatíva a drawRect-en keresztüli rajzoláshoz: ha a kép már kész, átadható a contents-nek, és a Core Animation további feldolgozás nélkül jeleníti meg.

Az animációkhoz CABasicAnimation, CAKeyframeAnimation és CATransition használható. Mindezek az osztályok a CALayer tulajdonságok kulcsútjain keresztül működnek, ami lehetővé teszi szinte bármely attribútum animálását — a position-től a transform.rotation.z-ig.

CALayer alosztályok és céljaik

Apple több speciális CALayer alosztályt kínál, amelyek mindegyike egy adott feladatot old meg. A megfelelő alosztály választása az alap CALayer helyett jelentős teljesítménynövekedést eredményezhet a hardveres gyorsításnak köszönhetően.

• CAShapeLayer — vektoros alakzatok (CGPath) rajzolása a GPU-n. Nem igényel külön puffert — az alakzat a szülő réteg kompozíciójának részeként jelenik meg.
• CATextLayer — szöveg megjelenítése szubpixel simítással. Gyorsítótárba helyezi a glifeket, ami felgyorsítja az ismétlődő szöveg megjelenítését.
• CAGradientLayer — lineáris és radiális gradiensek. Hardveres megjelenítés köztes képek generálása nélkül.
• CAEmitterLayer — részecskerendszer a GPU-n. Minden részecske külön elemeként jelenik meg a CPU részvétele nélkül.
• CAReplicatorLayer — gyermek rétegek másolatainak automatikus létrehozása konfigurálható pozíció-, szín- és időeltolásokkal.
• CATiledLayer — nagy képek megjelenítése csempékben. Csak a látható töredékeket tölti be és jeleníti meg.

CAReplicatorLayer különösen hasznos ismétlődő minták létrehozásához kódduplikáció nélkül. Például egy 10 pontból álló töltőjelző egyetlen CAReplicatorLayer-rel implementálható instanceCount = 10 és animációs időeltolás instanceDelay paraméterekkel.

CALayer megjelenítése és kompozíciója

CALayer megjelenítése három fázison megy keresztül. Commit — a réteg tulajdonságának változásakor a CPU-n változáscsomag képződik. Render — a Core Animation Metal parancsokat generál a CPU-n a réteg tulajdonságai alapján. Composite — a GPU végrehajtja a parancsokat és megjeleníti a képkockát a képernyőn. Az egész folyamat szinkronizálva van a kijelző frissítési gyakoriságával.

Több réteg kompozíciója során a GPU egyesíti őket egy végső képpé, figyelembe véve az átlátszóságot, maszkokat és keverési módokat. Ha a réteg opaque = true értékkel rendelkezik, a Core Animation optimalizálja a kompozíciót: az alfa keverés helyett egyszerű pixelcsere történik, ami lényegesen gyorsabb.

Az Apple Performance Guidelines szerint a CALayer megjelenítését lassító fő tényezők: összetett sublayers hierarchia (több mint 30 réteg a képernyőn), maszkok használata (mask tulajdonság), automatikus árnyékszámítás shadowPath nélkül, a shouldRasterize túlzott használata dinamikus rétegekhez.

A Core Animation Instrument eszköz az XCode-ban lehetővé teszi az egyes rétegek megjelenítési idejének, az offscreen pufferek számának és a drawRect hívások gyakoriságának figyelését. Optimális megjelenítési idő 60 FPS-hez — legfeljebb 8 ms a CPU-n és 8 ms a GPU-n.

Offscreen megjelenítés és hatása

Offscreen megjelenítés — a réteg megjelenítése egy köztes pufferben, mielőtt a képernyőre kerülne. Akkor fordul elő, amikor cornerRadius + masksToBounds-t használunk tartalommal, csoportos opacity-t, maszkokat és shouldRasterize-t. Minden offscreen menet 2–5 ms-ig tart, ezért a túlzott offscreen megjelenítés kritikus a teljesítmény szempontjából.

Az offscreen megjelenítés diagnosztizálásához használja a Color Offscreen-Rendered eszközt a Core Animation Instrument-ben. A sárga rétegek — offscreen, a kék rétegek — közvetlen megjelenítés a képernyőre. Az offscreen menetek minimalizálása a kulcsfontosságú optimalizálási technika iOS-ben.

Kódpéldák: munka a CALayer-rel Swift-ben

Az első példa a CALayer alapkonfigurációját mutatja árnyék létrehozásával, sarkok lekerekítésével és szegéllyel. A shadowPath explicit módon van beállítva a megjelenítés gyorsítása érdekében:

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
}

A második példa — a transform animálása CABasicAnimation segítségével perspektivikus 3D transzformációval. Az Y tengely körüli forgás animációja a kártya megfordításának hatását kelti:

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

A harmadik példa — a CAGradientLayer használata háttérgradiens létrehozásához. A gradiens a GPU-n jelenik meg, és nem igényel többleterőforrásokat a méret változtatásakor:

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