Layer a mobilalkalmazásokban — mi ez, milyen típusai vannak és hogyan működik

Mi az a Layer a mobil grafikában?

Layer — a grafikus rendszer alacsony szintű objektuma, amely tárolja a képernyőtöredék raszterképét és kezeli annak vizuális attribútumait: pozíció, méret, forgatás, átlátszóság, árnyék és szín. iOS-ben minden UIView rendelkezik beépített CALayer-rel, amely a layer tulajdonságon keresztül érhető el. A fejlesztő közvetlenül a layer-rel dolgozhat, megkerülve a UIView-t, a renderelés finomhangolásához.

A rétegek architektúrája a Model-View-Controller mintát követi, ahol a CALayer Model szerepet játszik — tárolja a vizuális tulajdonságok állapotát. A Core Animation a Controller, amely az állapotok közötti átmenet animációját kezeli. A View (UIView) — opcionális burkoló, amely érintésfeldolgozást és Auto Layout-ban való részvételt ad hozzá.

A Apple WWDC 2024 szerint a modern iOS renderelési pipeline Metal-t használ a rétegek kompozíciójához. Minden CALayer külön pufferbe rajzolódik, majd a Core Animation az összes puffert egyesíti a végső képpé, figyelembe véve az átlátszóságot és a keverési módokat.

Android rendszeren a rétegek megfelelői a View és a háttér Drawable-ok, de a grafikus rétegekkel való közvetlen munka a Canvas és RenderNode segítségével érhető el Android 10+-ban. A layer koncepciójának megértése fontos a renderelés optimalizálásához mindkét platformon.

Különbség a Layer és a View között

A fő különbség a felelősségi körben van. View felelős a felhasználói bevitelért (érintés, gesztusok), pozicionálásért (Auto Layout, frame) és életciklusért. Layer kizárólag a vizuális megjelenítésért felelős: tartalom renderelése, tulajdonságok animációja és kompozíció más rétegekkel.

Ez a szétválasztás lehetővé teszi a réteg raszteres megjelenítésének független gyorsítótárazását a View-tól. Ha a réteg nem változik, a Core Animation a gyorsítótárazott kockát használja a drawRect meghívása nélkül. Statikus elemek esetén ez jelentős teljesítménynövekedést biztosít kódváltoztatás nélkül.

Fő rétegtípusok iOS és Android rendszeren

iOS gazdag osztályhierarchiát kínál, amely a CALayer-ből származik. Minden alosztály egy adott forgatókönyvhöz van optimalizálva: szöveg, vektorgrafika, gradiensek vagy 3D transzformációk megjelenítése. A megfelelő rétegtípus kiválasztása közvetlenül befolyásolja a renderelési teljesítményt.

• CALayer — alapszintű réteg téglalap alakú területekhez háttérszínnel, szegéllyel és árnyékkal.
• CAShapeLayer — réteg vektoros alakzatok rajzolásához CGPath segítségével. A renderelés a GPU-n történik külön puffer létrehozása nélkül.
• CATextLayer — réteg szöveg megjelenítéséhez szubpixel renderelés és glif gyorsítótárazás támogatásával.
• CAGradientLayer — réteg lineáris és radiális gradiensekhez hardveres gyorsítással.
• CAReplicatorLayer — réteg, amely automatikusan létrehozza a gyermekrétegek másolatait megadott eltolásokkal.

Android rendszeren a rétegek koncepciója a RenderNode, ViewLayer és HardwareRenderer segítségével van megvalósítva. Android 5.0-tól (API 21) kezdve minden View a saját hardveres gyorsítású rétegében renderelődik, lehetővé téve az animációk végrehajtását az onDraw meghívása nélkül.

További rugalmasságot iOS-ben a CAReplicatorLayer és CAEmitterLayer nyújt. Az első ismétlődő minták létrehozására szolgál, a második — részecskerendszerekhez. Mindkettő kizárólag a GPU-n működik, lehetővé téve összetett vizuális effektusok létrehozását teljesítményvesztés nélkül.

Réteghierarchia és jelenetkompozíció

Réteghierarchia iOS-ben fa elv szerint épül fel: minden CALayer több gyermek sublayer-t tartalmazhat. A szülőrétegre alkalmazott összes transzformáció — méretezés, forgatás, eltolás — automatikusan alkalmazódik a gyermekelemekre. Ez biztosítja a vizuális megjelenítés konzisztenciáját az animációk során.

A jelenetkompozíciót a Core Animation a következő sorrendben végzi: először a háttér renderelődik, majd minden gyermekréteg a hozzáadás sorrendjében alulról felfelé. Minden rétegnél a Core Animation ellenőrzi az átlátszóság, maszkok és keverési módok tulajdonságait, majd elvégzi az egyesítést (compositing) a végső kockába.

A Apple Documentation szerint az opaque = true és alfa csatorna nélküli réteg kompozíciója további menetek nélkül történik — a GPU egyszerűen átmásolja a pixeleket az előző rétegre. Ha a réteg átlátszóságot tartalmaz, a GPU alfa-keverést végez, ami további számítási erőforrásokat igényel.

Android rendszeren a rétegkompozíció a SurfaceFlingeren keresztül történik — a rendszerszolgáltatáson, amely puffereket kap minden alkalmazástól és egyesíti azokat a z-sorrend figyelembevételével. Minden Window Android-ben egy külön Surface, amely több grafikus réteget tartalmazhat.

Maszkok és rétegek vágása

CALayer.mask — tulajdonság, amely lehetővé teszi tetszőleges alakú maszk alkalmazását egy rétegre. A maszk bármilyen más CALayer lehet — például CAShapeLayer kör alakú útvonallal vagy CAGradientLayer az átlátszóság sima átmenetének létrehozásához. A maszkok használata növeli a GPU terhelését, mert további renderelési menetet igényel az egyes pixelek alfaértékeinek kiszámításához.

Egyszerű téglalap alakú vágáshoz a cornerRadius és masksToBounds használata ajánlott. A mask tulajdonságon keresztüli maszkokkal ellentétben a cornerRadius hardveresen feldolgozásra kerül a raszterizációs szakaszban, és nem igényel további menetet.

Rétegek teljesítménye: renderelés és gyorsítótárazás

shouldRasterize — a CALayer kulcsfontosságú tulajdonsága a teljesítmény optimalizálásához. Amikor a shouldRasterize true értékre van állítva, a Core Animation a réteget és annak összes sublayer-ét egy külön raszter pufferbe (offscreen buffer) rendereli. A következő kockáknál az újrarenderelés helyett a gyorsítótárazott raszterkép kerül felhasználásra.

A gyorsítótárazás hatékony a statikus vagy ritkán változó rétegeknél: árnyékok, gradiensek, lekerekített sarkú szöveg. Azonban a gyakran frissülő rétegeknél (animáció, videó, görgetés) a raszterizáció ronthatja a teljesítményt, mert minden kocka a gyorsítótár újragenerálását igényli.

A Objc.io kutatása szerint a shouldRasterize helyes használata iPad Pro-n 25 ms-ról 8 ms-ra csökkenti egy összetett képernyő renderelési idejét — több mint háromszorosára. Kulcsfontosságú feltétel: a réteg nem változhat gyakrabban, mint 3-5 kockánként egyszer.

• Opaque = true — tájékoztatja a Core Animation-t, hogy a réteg átlátszatlan, kizárva az alfa-keverést.
• drawsAsynchronously — aszinkron renderelést kapcsol be összetett rétegekhez a fő szál blokkolása nélkül.
• allowsEdgeAntialiasing — bekapcsolja az élsimítást transzformált rétegekhez, de növeli a GPU terhelését.
• allowsGroupOpacity — szabályozza a gyermekrétegek csoportos átlátszóságát.

Példák rétegekkel való munkára Swift és Kotlin nyelven

Az első példa a CALayer alapvető vizuális tulajdonságainak konfigurációját mutatja be Swift nyelven — sarkok lekerekítése, árnyék és szegély:

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

A második példa — réteg animáció létrehozása Swift nyelven a CABasicAnimation használatával. A position tulajdonság animálódik a UIView részvétele nélkül:

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

A harmadik példa — munka a RenderNode-val Kotlin nyelven Androidon. A RenderNode — a CALayer közvetlen megfelelője, amely lehetővé teszi a grafikus rétegekkel való műveleteket Canvas szinten:

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
}