Layer mobil ilovalarda — bu nima, qanday turlari bor va qanday ishlaydi

Mobil grafikada Layer nima?

Layer — ekran fragmentining rastr tasvirini saqlaydigan va uning vizual atributlarini: joylashuv, o'lcham, aylanish, shaffoflik, soya va rangni boshqaradigan grafik tizimining past darajali ob'ektidir. iOS-da har bir UIView layer xususiyati orqali mavjud bo'lgan o'rnatilgan CALayerga ega. Dasturchi renderlashni nozik sozlash uchun UIViewni chetlab o'tib, to'g'ridan-to'g'ri layer bilan ishlashi mumkin.

Qatlam arxitekturasi Model-View-Controller namunasiga amal qiladi, bu erda CALayer Model rolini o'ynaydi — vizual xususiyatlarning holatini saqlaydi. Core Animation — holatlar o'rtasidagi o'tish animatsiyasini boshqaradigan Controller. View (UIView) — teginishlarni qayta ishlash va Auto Layoutda ishtirok etishni qo'shadigan ixtiyoriy qobiq.

Apple WWDC 2024 ga ko'ra, zamonaviy iOS renderlash pipeline-i qatlamlar kompozitsiyasi uchun Metal-dan foydalanadi. Har bir CALayer alohida buferda chiziladi, shundan so'ng Core Animation barcha buferlarni shaffoflik va aralashtirish rejimlarini hisobga olgan holda yakuniy tasvirga birlashtiradi.

Android da qatlamlarning analogi View va fon Drawable-lardir, ammo grafik qatlamlar bilan to'g'ridan-to'g'ri ishlash Android 10+ da Canvas va RenderNode orqali mavjud. Layer tushunchasini tushunish har ikki platformada renderlashni optimallashtirish uchun muhimdir.

Layer va View o'rtasidagi farq

Asosiy farq mas'uliyat sohasidadir. View foydalanuvchi kiritishi (teginish, imo-ishoralar), joylashtirish (Auto Layout, frame) va hayot aylanishi uchun javobgardir. Layer faqat vizual taqdimot uchun javobgardir: kontent renderlashi, xususiyatlar animatsiyasi va boshqa qatlamlar bilan kompozitsiya.

Ushbu ajratish qatlamning rastr tasvirini View-dan mustaqil ravishda keshlash imkonini beradi. Agar qatlam o'zgarmasa, Core Animation drawRect-ni chaqirmasdan keshlangan kadrdan foydalanadi. Statik elementlar uchun bu kod o'zgarishisiz sezilarli samaradorlik o'sishini beradi.

iOS va Android-dagi asosiy qatlam turlari

iOS CALayer dan meros oladigan sinflarning boy ierarxiyasini taqdim etadi. Har bir kichik sinf muayyan stsenariy uchun optimallashtirilgan: matn, vektor grafikasi, gradientlar yoki 3D transformatsiyalarni ko'rsatish. To'g'ri qatlam turini tanlash bevosita renderlash samaradorligiga ta'sir qiladi.

• CALayer — fon rangi, chegara va soya bilan to'rtburchak maydonlar uchun asosiy qatlam.
• CAShapeLayer — CGPath orqali vektor shakllarini chizish uchun qatlam. Renderlash alohida bufer yaratmasdan GPUda amalga oshiriladi.
• CATextLayer — subpiksel renderlash va gliflarni keshlash bilan matn ko'rsatish uchun qatlam.
• CAGradientLayer — apparat tezlashtirishi bilan chiziqli va radial gradientlar uchun qatlam.
• CAReplicatorLayer — belgilangan siljishlar bilan bolaviy qatlamlarning nusxalarini avtomatik yaratadigan qatlam.

Android da qatlam tushunchasi RenderNode, ViewLayer va HardwareRenderer orqali amalga oshirilgan. Android 5.0 dan (API 21) boshlab, har bir View o'z apparat tezlashtirish qatlamida renderlanadi, bu onDraw-ni chaqirmasdan animatsiyalarni bajarish imkonini beradi.

iOS-da qo'shimcha moslashuvchanlik CAReplicatorLayer va CAEmitterLayer tomonidan ta'minlanadi. Birinchisi takrorlanuvchi naqshlar yaratish uchun, ikkinchisi — zarrachalar tizimlari uchun ishlatiladi. Ikkalasi faqat GPUda ishlaydi, bu samaradorlikni yo'qotmasdan murakkab vizual effektlar yaratish imkonini beradi.

Qatlam ierarxiyasi va sahna kompozitsiyasi

Qatlam ierarxiyasi iOS-da daraxt printsipi bo'yicha quriladi: har bir CALayer ko'plab bolaviy sublayerlarni o'z ichiga olishi mumkin. Ota-qatlamga qo'llaniladigan barcha transformatsiyalar — masshtab, aylanish, siljish — avtomatik ravishda bolaviy elementlarga qo'llaniladi. Bu animatsiyalar davomida vizual taqdimotning izchilligini ta'minlaydi.

Sahna kompozitsiyasi Core Animation tomonidan quyidagi tartibda amalga oshiriladi: avval fon (background) renderlanadi, so'ngra har bir bolaviy qatlam qo'shilish tartibida pastdan yuqoriga. Har bir qatlam uchun Core Animation shaffoflik, niqoblar va aralashtirish rejimlarining xususiyatlarini tekshiradi, shundan so'ng yakuniy kadrda birlashtirish (compositing) amalga oshiradi.

Apple Documentation ga ko'ra, opaque = true va alfa kanalisiz qatlamning kompozitsiyasi qo'shimcha o'tishlarsiz amalga oshiriladi — GPU shunchaki piksellarni oldingi qatlam ustiga nusxalaydi. Agar qatlam shaffoflikni o'z ichiga olsa, GPU alfa-blendingni amalga oshiradi, bu qo'shimcha hisoblash resurslarini talab qiladi.

Android da qatlam kompozitsiyasi SurfaceFlinger orqali amalga oshiriladi — har bir ilovadan buferlarni oladigan va ularni z-tartibini hisobga olgan holda birlashtiradigan tizim xizmati. Android-dagi har bir Window ko'plab grafik qatlamlarni o'z ichiga olishi mumkin bo'lgan alohia Surfacdir.

Niqoblar va qatlamlarni kesish

CALayer.mask — qatlamga ixtiyoriy shakldagi niqobni qo'llash imkonini beradigan xususiyat. Niqob har qanday boshqa CALayer bo'lishi mumkin — masalan, dumaloq path bilan CAShapeLayer yoki silliq shaffoflik o'tishini yaratish uchun CAGradientLayer. Niqoblardan foydalanish GPU yukini oshiradi, chunki har bir pikselning alfa qiymatlarini hisoblash uchun qo'shimcha renderlash o'tishi talab qilinadi.

Oddiy to'rtburchak chegaralar bo'ylab kesish uchun cornerRadius va masksToBounds dan foydalanish tavsiya etiladi. Mask xususiyati orqali niqoblardan farqli o'laroq, cornerRadius rastrlashtirish bosqichida apparat tomonidan qayta ishlanadi va qo'shimcha o'tishni talab qilmaydi.

Qatlamlarning samaradorligi: renderlash va keshlash

shouldRasterize — samaradorlikni optimallashtirish uchun CALayerning asosiy xususiyati. shouldRasterize true ga o'rnatilganda, Core Animation qatlamni va uning barcha sublayerlarini alohida rastr buferiga (offscreen buffer) renderlaydi. Keyingi kadrlarda qayta renderlash o'rniga keshlangan rastr tasvirdan foydalaniladi.

Keshlash statik yoki kam o'zgaruvchan qatlamlar uchun samaralidir: soyalar, gradientlar, yumaloq burchakli matn. Biroq tez-tez yangilanadigan qatlamlar (animatsiya, video, aylantirish) uchun rastrlashtirish samaradorlikni yomonlashtirishi mumkin, chunki har bir kadr keshlning qayta yaratilishini talab qiladi.

Objc.io tadqiqotiga ko'ra, iPad Pro-da shouldRasterize to'g'ri ishlatilishi murakkab ekranning renderlash vaqtini 25 ms dan 8 ms gacha kamaytiradi — uch barobardan ko'proq. Asosiy shart: qatlam 3-5 kadrdan ko'proq tez-tez o'zgarmasligi kerak.

• Opaque = true — Core Animation-ga qatlam shaffof emasligini bildiradi, alfa-blendingni istisno qiladi.
• drawsAsynchronously — main threadni bloklamasdan murakkab qatlamlar uchun asinxron renderlashni faollashtiradi.
• allowsEdgeAntialiasing — transformatsiya qilingan qatlamlar uchun chekka tekislashni faollashtiradi, ammo GPU yukini oshiradi.
• allowsGroupOpacity — bolaviy qatlamlarning guruh shaffofligini boshqaradi.

Swift va Kotlin-da qatlamlar bilan ishlash misollari

Birinchi misol Swift da CALayerning asosiy vizual xususiyatlarini sozlashni ko'rsatadi — burchaklarni yumaloqlash, soya va chegara:

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

Ikkinchi misol — Swift da CABasicAnimation yordamida qatlam animatsiyasini yaratish. UIView ishtirokisiz position xususiyati animatsiya qilinadi:

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

Uchinchi misol — Android da Kotlin da RenderNode bilan ishlash. RenderNode — Canvas darajasida grafik qatlamlar bilan ishlash imkonini beradigan CALayerning bevosita analogi:

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
}