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 обединява всички буфери в крайно изображение, като взема предвид прозрачността и режимите на смесване.

В 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 проверява свойствата на прозрачност, маски и режими на смесване, след което извършва обединяване (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
}