Layer sa mga mobile application — ano ito, anong mga uri at paano ito gumagana

Ano ang Layer sa mobile graphics?

Layer — ay isang mababang antas na bagay ng graphic system na nag-iimbak ng raster na imahe ng fragment ng screen at namamahala sa mga visual na attribute nito: posisyon, laki, pag-ikot, transparency, anino, at kulay. Sa iOS, bawat UIView ay may built-in na CALayer, na maa-access sa pamamagitan ng property na layer. Ang developer ay maaaring direktang magtrabaho sa layer, na lampasan ang UIView, para sa pinong pag-aayos ng rendering.

Ang arkitektura ng mga layer ay sumusunod sa pattern na Model-View-Controller, kung saan ang CALayer ay gumaganap bilang Model — iniimbak nito ang estado ng mga visual na property. Ang Core Animation ay ang Controller na namamahala sa animation ng paglipat sa pagitan ng mga estado. Ang View (UIView) — isang opsyonal na wrapper na nagdaragdag ng pagproseso ng touch at pakikilahok sa Auto Layout.

Ayon sa Apple WWDC 2024, ang modernong rendering pipeline ng iOS ay gumagamit ng Metal para sa komposisyon ng layer. Ang bawat CALayer ay iginuhit sa isang hiwalay na buffer, pagkatapos ay pinagsama ng Core Animation ang lahat ng buffer sa huling imahe na isinasaalang-alang ang transparency at blending mode.

Sa Android ang katumbas ng mga layer ay View at background Drawable, ngunit ang direktang pagtatrabaho sa mga graphic layer ay magagamit sa pamamagitan ng Canvas at RenderNode sa Android 10+. Ang pag-unawa sa konsepto ng layer ay mahalaga para sa pag-optimize ng rendering sa parehong platform.

Pagkakaiba sa pagitan ng Layer at View

Ang pangunahing pagkakaiba ay nasa lugar ng responsibilidad. View ay responsable para sa input ng user (touch, gestures), pagpoposisyon (Auto Layout, frame), at lifecycle. Layer ay eksklusibong responsable para sa visual na representasyon: rendering ng nilalaman, animation ng mga property, at komposisyon sa iba pang mga layer.

Ang paghihiwalay na ito ay nagpapahintulot sa pag-cache ng raster na representasyon ng layer nang independyente sa View. Kung hindi nagbabago ang layer, ginagamit ng Core Animation ang naka-cache na frame nang hindi tinatawagan ang drawRect. Para sa mga static na elemento, ito ay nagbibigay ng makabuluhang pagtaas sa performance nang walang pagbabago sa code.

Mga pangunahing uri ng layer sa iOS at Android

iOS ay nagbibigay ng mayamang hierarchy ng mga klase na nagmamana mula sa CALayer. Ang bawat subclass ay na-optimize para sa isang partikular na sitwasyon: pagpapakita ng text, vector graphics, gradient, o 3D transformasyon. Ang pagpili ng tamang uri ng layer ay direktang nakakaapekto sa performance ng rendering.

• CALayer — ang base layer para sa mga parihabang lugar na may kulay ng background, border, at anino.
• CAShapeLayer — layer para sa pagguhit ng mga vector shape sa pamamagitan ng CGPath. Ang rendering ay isinasagawa sa GPU nang hindi lumilikha ng hiwalay na buffer.
• CATextLayer — layer para sa pagpapakita ng text na may suporta para sa subpixel rendering at glyph caching.
• CAGradientLayer — layer para sa linear at radial gradient na may hardware acceleration.
• CAReplicatorLayer — layer na awtomatikong lumilikha ng mga kopya ng mga child layer na may tinukoy na mga offset.

Sa Android ang konsepto ng mga layer ay ipinatupad sa pamamagitan ng RenderNode, ViewLayer, at HardwareRenderer. Simula sa Android 5.0 (API 21), ang bawat View ay nire-render sa sarili nitong hardware acceleration layer, na nagpapahintulot sa mga animation na maisagawa nang hindi tinatawagan ang onDraw.

Ang karagdagang flexibility sa iOS ay ibinibigay ng CAReplicatorLayer at CAEmitterLayer. Ang una ay ginagamit para sa paglikha ng mga paulit-ulit na pattern, ang pangalawa — para sa mga particle system. Pareho silang gumagana nang eksklusibo sa GPU, na nagpapahintulot sa paglikha ng mga kumplikadong visual effect nang walang pagkawala ng performance.

Hierarchy ng layer at komposisyon ng scene

Hierarchy ng layer sa iOS ay binuo sa prinsipyo ng puno: bawat CALayer ay maaaring maglaman ng maraming child sublayer. Lahat ng transformasyon na inilapat sa parent layer — scale, rotation, paglipat — ay awtomatikong nalalapat sa mga child element. Ito ay nagsisiguro ng pagkakapare-pareho ng visual na representasyon sa panahon ng mga animation.

Ang komposisyon ng scene ay isinasagawa ng Core Animation sa sumusunod na pagkakasunod-sunod: una ang background ay nire-render, pagkatapos ang bawat child layer sa pagkakasunod-sunod ng pagdaragdag mula sa ibaba pataas. Para sa bawat layer, sinusuri ng Core Animation ang mga property ng transparency, mask, at blending mode, pagkatapos ay nagsasagawa ng pagsasama-sama (compositing) sa huling frame.

Ayon sa Apple Documentation, ang komposisyon ng layer na may opaque = true at walang alpha channel ay isinasagawa nang walang karagdagang passes — kinokopya lang ng GPU ang mga pixel sa ibabaw ng nakaraang layer. Kung ang layer ay naglalaman ng transparency, ang GPU ay nagsasagawa ng alpha-blending, na nangangailangan ng karagdagang computational resources.

Sa Android ang komposisyon ng layer ay isinasagawa sa pamamagitan ng SurfaceFlinger — ang system service na tumatanggap ng mga buffer mula sa bawat application at pinagsasama ang mga ito na isinasaalang-alang ang z-order. Ang bawat Window sa Android ay isang hiwalay na Surface na maaaring maglaman ng maraming graphic layer.

Mga mask at pagputol ng mga layer

CALayer.mask — property na nagpapahintulot sa paglalapat ng mask na may arbitrary na hugis sa isang layer. Ang mask ay maaaring maging anumang iba pang CALayer — halimbawa, CAShapeLayer na may bilog na path o CAGradientLayer para sa paglikha ng makinis na transition ng transparency. Ang paggamit ng mga mask ay nagpapataas ng karga ng GPU dahil nangangailangan ito ng karagdagang rendering pass para sa pagkalkula ng alpha value ng bawat pixel.

Para sa simpleng pagputol sa mga parihabang hangganan, inirerekomenda ang paggamit ng cornerRadius at masksToBounds. Hindi tulad ng mga mask sa pamamagitan ng mask property, ang cornerRadius ay pinoproseso ng hardware sa yugto ng rasterization at hindi nangangailangan ng karagdagang pass.

Performance ng layer: rendering at caching

shouldRasterize — ang pangunahing property ng CALayer para sa pag-optimize ng performance. Kapag ang shouldRasterize ay nakatakda sa true, ire-render ng Core Animation ang layer at lahat ng sublayer nito sa isang hiwalay na raster buffer (offscreen buffer). Sa mga susunod na frame, ang naka-cache na raster na imahe ay ginagamit sa halip na muling pag-render.

Ang caching ay epektibo para sa static o bihirang nagbabagong layer: mga anino, gradient, text na may bilugan na sulok. Gayunpaman, para sa madalas na ina-update na mga layer (animation, video, scroll), ang rasterization ay maaaring makasira ng performance dahil ang bawat frame ay nangangailangan ng pag-regenerate ng cache.

Ayon sa pananaliksik ng Objc.io, ang tamang paggamit ng shouldRasterize sa iPad Pro ay nagbabawas ng oras ng rendering ng kumplikadong screen mula 25 ms hanggang 8 ms — higit sa tatlong beses. Mahalagang kondisyon: ang layer ay hindi dapat magbago nang mas madalas kaysa isang beses bawat 3-5 frame.

• Opaque = true — nagpapaalam sa Core Animation na ang layer ay opaque, na hindi kasama ang alpha-blending.
• drawsAsynchronously — nag-a-activate ng asynchronous rendering para sa mga kumplikadong layer nang hindi hinaharangan ang main thread.
• allowsEdgeAntialiasing — nag-a-activate ng edge smoothing para sa mga transformed layer, ngunit pinapataas ang karga ng GPU.
• allowsGroupOpacity — kumokontrol sa group transparency ng mga child layer.

Mga halimbawa ng pagtatrabaho sa mga layer sa Swift at Kotlin

Ang unang halimbawa ay nagpapakita ng configuration ng mga pangunahing visual property ng CALayer sa Swift — pagbilog ng mga sulok, anino, at border:

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

Ang pangalawang halimbawa — paglikha ng layer animation sa Swift gamit ang CABasicAnimation. Ang property na position ay ina-animate nang walang partisipasyon ng UIView:

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

Ang ikatlong halimbawa — pagtatrabaho sa RenderNode sa Kotlin sa Android. Ang RenderNode — direktang katumbas ng CALayer, na nagpapahintulot sa pagpapatakbo sa mga graphic layer sa antas ng Canvas:

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
}