Layer i mobilapplikationer — vad det är, vilka typer som finns och hur det fungerar

Vad är Layer inom mobil grafik?

Layer — är ett lågnivåobjekt i grafiksystemet som lagrar rasterbilden av en skärmfragment och hanterar dess visuella attribut: position, storlek, rotation, transparens, skugga och färg. I iOS har varje UIView en inbyggd CALayer, tillgänglig via egenskapen layer. Utvecklaren kan arbeta direkt med layer, förbi UIView, för finjustering av renderingen.

Lagerarkitekturen följer mönstret Model-View-Controller, där CALayer fungerar som Model — den lagrar tillståndet för visuella egenskaper. Core Animation är Controller som hanterar animationen av övergångar mellan tillstånd. View (UIView) — ett valfritt omslag som lägger till tryckhantering och deltagande i Auto Layout.

Enligt Apple WWDC 2024 använder den moderna renderingspipelinjen i iOS Metal för lagerkomposition. Varje CALayer ritas i en separat buffer, varefter Core Animation slår samman alla buffertar till den slutgiltiga bilden med hänsyn till transparens och blandningslägen.

I Android är motsvarigheten till lager View och bakgrunds-Drawable, men direkt arbete med grafiska lager är tillgängligt via Canvas och RenderNode i Android 10+. Att förstå begreppet layer är viktigt för att optimera rendering på båda plattformarna.

Skillnad mellan Layer och View

Huvudskillnaden ligger i ansvarsområdet. View ansvarar för användarinmatning (tryckning, gester), positionering (Auto Layout, frame) och livscykel. Layer ansvarar uteslutande för visuell presentation: rendering av innehåll, animering av egenskaper och komposition med andra lager.

Denna separation gör det möjligt att cachelagra lagrets rasterrepresentation oberoende av View. Om lagret inte ändras använder Core Animation den cachelagrade bildrutan utan att anropa drawRect. För statiska element ger detta en betydande prestandaökning utan kodändringar.

Huvudtyper av lager i iOS och Android

iOS erbjuder en rik klasshierarki som ärver från CALayer. Varje underklass är optimerad för ett specifikt scenario: visning av text, vektorgrafik, gradienter eller 3D-transformationer. Valet av rätt lagertyp påverkar direkt renderingsprestandan.

• CALayer — baslagret för rektangulära områden med bakgrundsfärg, kant och skugga.
• CAShapeLayer — lager för att rita vektorformer via CGPath. Rendering sker på GPU utan att skapa en separat buffer.
• CATextLayer — lager för att visa text med stöd för subpixel-rendering och cachelagring av glyfer.
• CAGradientLayer — lager för linjära och radiella gradienter med hårdvaruacceleration.
• CAReplicatorLayer — lager som automatiskt skapar kopior av underordnade lager med angivna förskjutningar.

I Android är konceptet med lager implementerat via RenderNode, ViewLayer och HardwareRenderer. Från och med Android 5.0 (API 21) renderas varje View i sitt eget hårdvaruaccelerationslager, vilket gör det möjligt att utföra animationer utan att anropa onDraw.

Extra flexibilitet i iOS tillhandahålls av CAReplicatorLayer och CAEmitterLayer. Den första används för att skapa repetitiva mönster, den andra — för partikelsystem. Båda arbetar uteslutande på GPU, vilket gör det möjligt att skapa komplexa visuella effekter utan prestandaförlust.

Lagerhierarki och scenkomposition

Lagerhierarkin i iOS är uppbyggd enligt trädprincipen: varje CALayer kan innehålla flera underordnade sublayers. Alla transformationer som tillämpas på det överordnade lagret — skalning, rotation, förskjutning — tillämpas automatiskt på underordnade element. Detta säkerställer konsistens i den visuella presentationen under animationer.

Scenkomposition utförs av Core Animation i följande ordning: först renderas bakgrunden, sedan varje underordnat lager i den ordning de läggs till från botten till toppen. För varje lager kontrollerar Core Animation egenskaperna för transparens, masker och blandningslägen, varefter den utför sammanslagning (compositing) till den slutgiltiga bildrutan.

Enligt Apple Documentation utförs kompositionen av ett lager med opaque = true och utan alfakanal utan extra passager — GPU kopierar helt enkelt pixlar över det föregående lagret. Om lagret innehåller transparens utför GPU alfa-blandning, vilket kräver ytterligare beräkningsresurser.

I Android utförs lagerkomposition via SurfaceFlinger — systemtjänsten som tar emot buffertar från varje applikation och slår samman dem med hänsyn till z-ordningen. Varje Window i Android är en separat Surface som kan innehålla flera grafiska lager.

Masker och beskärning av lager

CALayer.mask — egenskapen som gör det möjligt att applicera en mask av godtycklig form på ett lager. Masken kan vara vilken annan CALayer som helst — till exempel CAShapeLayer med en cirkulär bana eller CAGradientLayer för att skapa en mjuk transparensövergång. Användning av masker ökar GPU-belastningen eftersom det kräver en extra renderingspassage för att beräkna alfavärdena för varje pixel.

För enkel beskärning längs rektangulära gränser rekommenderas att använda cornerRadius och masksToBounds. Till skillnad från masker via mask-egenskapen bearbetas cornerRadius hårdvarumässigt i rasteriseringsfasen och kräver ingen extra passage.

Lagers prestanda: rendering och cachelagring

shouldRasterize — den viktigaste CALayer-egenskapen för prestandaoptimering. När shouldRasterize är inställd på true renderar Core Animation lagret och alla dess sublayers till en separat rasterbuffer (offscreen buffer). Vid efterföljande bildrutor används den cachelagrade rasterbilden istället för att rendera om.

Cachelagring är effektivt för statiska eller sällan föränderliga lager: skuggor, gradienter, text med rundade hörn. För ofta uppdaterade lager (animation, video, scroll) kan rasterisering dock försämra prestandan eftersom varje bildruta kräver att cachen återskapas.

Enligt forskning från Objc.io minskar korrekt användning av shouldRasterize på iPad Pro renderingstiden för en komplex skärm från 25 ms till 8 ms — mer än tre gånger. Nyckelvillkor: lagret bör inte ändras oftare än en gång var 3-5 bildruta.

• Opaque = true — informerar Core Animation om att lagret är ogenomskinligt, vilket utesluter alfa-blandning.
• drawsAsynchronously — aktiverar asynkron rendering för komplexa lager utan att blockera main thread.
• allowsEdgeAntialiasing — aktiverar kantutjämning för transformerade lager, men ökar GPU-belastningen.
• allowsGroupOpacity — kontrollerar grupptransparensen för underordnade lager.

Exempel på arbete med lager i Swift och Kotlin

Det första exemplet visar konfiguration av grundläggande visuella egenskaper för CALayer i Swift — avrundning av hörn, skugga och kant:

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

Det andra exemplet — skapa lageranimation i Swift med CABasicAnimation. Egenskapen position animeras utan UIViews deltagande:

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

Det tredje exemplet — arbete med RenderNode i Kotlin på Android. RenderNode — den direkta motsvarigheten till CALayer, som möjliggör hantering av grafiska lager på Canvas-nivå:

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
}