Layer у мобилним апликацијама — шта је то, које врсте постоје и како ради

Шта је Layer у мобилној графици?

Layer — је нисконвони објекат графичког система који чува растерску слику фрагмента екрана и управља његовим визуелним атрибутима: положајем, величином, ротацијом, провидношћу, сенком и бојом. У iOS сваки UIView има уграђени CALayer, доступан путем својства layer. Програмер може радити директно са layer-ом, заобилазећи UIView, за фино подешавање рендеровања.

Архитектура слојева следи образац Model-View-Controller, где CALayer делује као Model — чува стање визуелних својстава. Core Animation је Controller који управља анимацијом прелаза између стања. View (UIView) — опционални омотач који додаје обраду додира и учешће у Auto Layout.

Према Apple WWDC 2024, савремени pipeline рендеровања iOS користи Metal за композицију слојева. Сваки CALayer се црта у посебан бафер, након чега Core Animation врши спајање свих бафера у коначну слику узимајући у обзир провидност и blending режиме.

У Android аналогон слојева су View и позадински Drawable, али директан рад са графичким слојевима је доступан кроз Canvas и RenderNode у Android 10+. Разумевање концепта layer је важно за оптимизацију рендеровања на обе платформе.

Разлика између Layer и View

Главна разлика је у области одговорности. View одговара за кориснички унос (додир, гестови), позиционирање (Auto Layout, frame) и животни циклус. Layer одговара искључиво за визуелни приказ: рендеровање садржаја, анимацију својстава и композицију са другим слојевима.

Ово раздвајање омогућава кеширање растерске представе слоја независно од View. Ако се слој не мења, Core Animation користи кеширани кадар без позивања drawRect. За статичне елементе ово даје значајан пораст перформанси без промене кода.

Основне врсте слојева у iOS и Android

iOS пружа богату хијерархију класа које наслеђују од CALayer. Свака подкласа је оптимизована за конкретан сценарио: приказ текста, векторске графике, градијената или 3D трансформација. Избор правилног типа слоја директно утиче на перформансе рендеровања.

• CALayer — основни слој за правоугаоне области са бојом позадине, ивицом и сенком.
• CAShapeLayer — слој за цртање векторских облика путем CGPath. Рендеровање се извршава на GPU без креирања посебног бафера.
• CATextLayer — слој за приказ текста са подршком за субпикселно рендеровање и кеширање глифова.
• CAGradientLayer — слој за линеарне и радијалне градијенте са хардверским убрзањем.
• CAReplicatorLayer — слој који аутоматски креира копије подређених слојева са задатим померајима.

У Android концепт слојева је имплементиран кроз RenderNode, ViewLayer и HardwareRenderer. Почевши од Android 5.0 (API 21), сваки View се рендерује у сопствени слој хардверског убрзања, што омогућава извођење анимација без позивања onDraw.

Додатну флексибилност у iOS пружају CAReplicatorLayer и CAEmitterLayer. Први се користи за креирање понављајућих образаца, други — за системе честица. Оба раде искључиво на GPU, што омогућава креирање сложених визуелних ефеката без губитка перформанси.

Хијерархија слојева и композиција сцена

Хијерархија слојева у iOS се гради по принципу дрвета: сваки CALayer може садржати више подређених sublayer-а. Све трансформације примењене на родитељски слој — скала, ротација, померај — аутоматски се примењују на подређене елементе. Ово обезбеђује конзистентност визуелног приказа током анимација.

Композиција сцене се извршава од стране Core Animation следећим редоследом: прво се рендерује позадина (background), затим сваки подређени слој редом додавања одоздо према горе. За сваки слој Core Animation проверава својства провидности, маски и blending режима, након чега врши спајање (compositing) у коначни кадар.

Према Apple Documentation, композиција слоја са opaque = true и без алфа канала се извршава без додатних пролаза — GPU једноставно копира пикселе преко претходног слоја. Ако слој садржи провидност, GPU врши алфа-блендинг, што захтева додатне рачунске ресурсе.

У Android композиција слојева се врши путем SurfaceFlinger — системског сервиса који прима бафере од сваке апликације и спаја их узимајући у обзир z-редослед. Сваки Window у Android је посебан Surface који може садржати више графичких слојева.

Маске и обрезивање слојева

CALayer.mask — својство које омогућава примену маске произвољног облика на слој. Маска може бити било који други CALayer — на пример, CAShapeLayer са кружним path или CAGradientLayer за стварање глатког прелаза провидности. Коришћење маски повећава оптерећење GPU, јер захтева додатни пролаз рендеровања за израчунавање алфа вредности сваког пиксела.

За једноставно обрезивање по правоугаоним границама препоручује се коришћење cornerRadius и masksToBounds. За разлику од маски преко својства mask, cornerRadius се обрађује хардверски у фази растеризације и не захтева додатни пролаз.

Перформансе слојева: рендеровање и кеширање

shouldRasterize — кључно својство CALayer за оптимизацију перформанси. Када је shouldRasterize постављен на true, Core Animation рендерује слој и све његове sublayer-е у посебан растерски бафер (offscreen buffer). При наредним кадровима, уместо поновног рендеровања, користи се кеширана растерска слика.

Кеширање је ефикасно за статичне или ретко променљиве слојеве: сенке, градијенте, текст са заобљеним угловима. Међутим, за често ажуриране слојеве (анимација, видео, скрол) растеризација може погоршати перформансе, јер сваки кадар захтева поновно генерисање кеша.

Према истраживању Objc.io, правилна употреба shouldRasterize на iPad Pro смањује време рендеровања сложеног екрана са 25 ms на 8 ms — више од три пута. Кључни услов: слој се не сме мењати чешће од једном у 3-5 кадрова.

• Opaque = true — обавештава Core Animation да је слој непровидан, искључујући алфа-блендинг.
• drawsAsynchronously — укључује асинхроно рендеровање за сложене слојеве без блокирања main thread-а.
• allowsEdgeAntialiasing — укључује изглађивање ивица за трансформисане слојеве, али повећава оптерећење GPU.
• allowsGroupOpacity — контролише групну провидност подређених слојева.

Примери рада са слојевима у Swift и Kotlin

Први пример демонстрира подешавање основних визуелних својстава CALayer у Swift — заобљавање углова, сенка и ивица:

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

Други пример — креирање анимације слоја у Swift коришћењем CABasicAnimation. Анимира се својство position без учешћа 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")

Трећи пример — рад са RenderNode у Kotlin на Android. RenderNode — директни аналогон CALayer, који омогућава рад са графичким слојевима на нивоу 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
}