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 від 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 може містити безліч дочірніх sublayers. Всі трансформації, застосовані до батьківського шару — масштаб, поворот, зміщення — автоматично застосовуються до дочірніх елементів. Це забезпечує консистентність візуального представлення при анімаціях.

Композиція сцени виконується Core Animation у наступному порядку: спочатку рендериться задній план, потім кожен дочірній шар у порядку додавання від нижнього до верхнього. Для кожного шару Core Animation перевіряє властивості прозорості, масок та режимів змішування, після чого виконує зведення у фінальний кадр.

Згідно з 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 рендерить шар та всі його sublayers в окремий растровий буфер (offscreen buffer). При подальших кадрах замість повторного рендерингу використовується закешоване растрове зображення.

Кешування ефективне для статичних або рідко змінюваних шарів: тіней, градієнтів, тексту з закругленими кутами. Однак для шарів, що часто оновлюються (анімація, відео, скрол), растеризація може погіршити продуктивність, оскільки кожен кадр потребує перегенерації кешу.

За даними дослідження Objc.io, правильне використання shouldRasterize на iPad Pro знижує час рендерингу складного екрану з 25 мс до 8 мс — більш ніж утричі. Ключова умова: шар не повинен змінюватися частіше, ніж раз на 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
}