Layer mobil tətbiqlərdə — bu nədir, hansı növləri var və necə işləyir

Mobil qrafikada Layer nədir?

Layer — ekran fraqmentinin raster təsvirini saxlayan və onun vizual atributlarını: mövqe, ölçü, dönmə, şəffaflıq, kölgə və rəngi idarə edən qrafik sisteminin aşağı səviyyəli obyektidir. iOS-da hər UIView layer xüsusiyyəti vasitəsilə əldə olunan daxili CALayer-ə malikdir. Tərtibatçı renderinqi incə tənzimləmək üçün UIView-i yan keçərək birbaşa layer ilə işləyə bilər.

Təbəqə arxitekturası Model-View-Controller nümunəsinə əməl edir, burada CALayer Model rolunu oynayır — vizual xüsusiyyətlərin vəziyyətini saxlayır. Core Animation — dövlətlər arasında keçid animasiyasını idarə edən Controller-dir. View (UIView) — toxunma emalı və Auto Layout-da iştirak əlavə edən isteğe bağlı qabıqdır.

Apple WWDC 2024-ə görə, müasir iOS renderinq pipeline-ı təbəqə kompozisiyası üçün Metal-dan istifadə edir. Hər CALayer ayrı buferdə çəkilir, bundan sonra Core Animation şəffaflıq və qarışdırma rejimlərini nəzərə alaraq bütün buferləri yekun təsvirdə birləşdirir.

Android-də təbəqələrin analoqu View və fon Drawable-lardır, lakin qrafik təbəqələrlə birbaşa iş Android 10+-da Canvas və RenderNode vasitəsilə mümkündür. Layer konsepsiyasını başa düşmək hər iki platformada renderinqin optimallaşdırılması üçün vacibdir.

Layer və View arasındakı fərq

Əsas fərq məsuliyyət sahəsindədir. View istifadəçi girişinə (toxunma, jestlər), yerləşdirməyə (Auto Layout, frame) və həyat dövrünə cavabdehdir. Layer yalnız vizual təqdimata cavabdehdir: məzmunun renderinqi, xüsusiyyətlərin animasiyası və digər təbəqələrlə kompozisiya.

Bu bölgü təbəqənin raster təsvirini View-dən asılı olmayaraq keşləməyə imkan verir. Təbəqə dəyişməzsə, Core Animation drawRect-i çağırmadan keşlənmiş kadrdan istifadə edir. Statik elementlər üçün bu, kod dəyişikliyi olmadan əhəmiyyətli performans artımı verir.

iOS və Android-də əsas təbəqə növləri

iOS CALayer-dən miras alan siniflərin zəngin iyerarxiyasını təqdim edir. Hər alt sinif konkret ssenari üçün optimallaşdırılıb: mətnin, vektor qrafikasının, gradientlərin və ya 3D transformasiyaların göstərilməsi. Düzgün təbəqə növünün seçimi birbaşa renderinq performansına təsir edir.

• CALayer — fon rəngi, haşiyə və kölgə ilə düzbucaqlı sahələr üçün əsas təbəqə.
• CAShapeLayer — CGPath vasitəsilə vektor formalarının çəkilməsi üçün təbəqə. Renderinq ayrı bufer yaratmadan GPU-da həyata keçirilir.
• CATextLayer — subpiksel renderinq və glif keşləmə dəstəyi ilə mətn göstərmək üçün təbəqə.
• CAGradientLayer — aparat sürətləndirilməsi ilə xətti və radial gradientlər üçün təbəqə.
• CAReplicatorLayer — müəyyən yerdəyişmələrlə uşaq təbəqələrinin surətlərini avtomatik yaradan təbəqə.

Android-də təbəqə konsepsiyası RenderNode, ViewLayer və HardwareRenderer vasitəsilə həyata keçirilir. Android 5.0-dan (API 21) başlayaraq, hər View öz aparat sürətləndirmə təbəqəsində render edilir, bu da onDraw çağırmadan animasiyaları yerinə yetirməyə imkan verir.

iOS-da əlavə çeviklik CAReplicatorLayer və CAEmitterLayer tərəfindən verilir. Birincisi təkrarlanan naxışlar yaratmaq üçün, ikincisi — hissəcik sistemləri üçün istifadə olunur. Hər ikisi yalnız GPU-da işləyir, bu da performans itkisi olmadan mürəkkəb vizual effektlər yaratmağa imkan verir.

Təbəqə iyerarxiyası və səhnə kompozisiyası

Təbəqə iyerarxiyası iOS-da ağac prinsipi ilə qurulur: hər CALayer çoxlu uşaq sublayers ehtiva edə bilər. Valideyn təbəqəsinə tətbiq olunan bütün transformasiyalar — miqyas, dönmə, yerdəyişmə — avtomatik olaraq uşaq elementlərə tətbiq olunur. Bu, animasiyalar zamanı vizual təqdimatın ardıcıllığını təmin edir.

Səhnə kompozisiyası Core Animation tərəfindən aşağıdakı ardıcıllıqla həyata keçirilir: əvvəlcə fon (background) render edilir, sonra hər uşaq təbəqə əlavə olunma ardıcıllığı ilə aşağıdan yuxarıya. Hər təbəqə üçün Core Animation şəffaflıq, maskalar və qarışdırma rejimlərinin xüsusiyyətlərini yoxlayır, bundan sonra yekun kadrda birləşdirmə (compositing) həyata keçirir.

Apple Documentation-a görə, opaque = true və alfa kanalı olmayan təbəqənin kompozisiyası əlavə keçidlər olmadan həyata keçirilir — GPU sadəcə pikselləri əvvəlki təbəqənin üzərinə kopyalayır. Təbəqə şəffaflıq ehtiva edərsə, GPU alfa-blending həyata keçirir, bu da əlavə hesablama resursları tələb edir.

Android-də təbəqə kompozisiyası SurfaceFlinger vasitəsilə həyata keçirilir — hər tətbiqdən buferlər alan və onları z-sırası nəzərə alınaraq birləşdirən sistem xidməti. Android-də hər Window çoxsaylı qrafik təbəqələr ehtiva edə bilən ayrı Surface-dir.

Təbəqələrin maskalanması və kəsilməsi

CALayer.mask — təbəqəyə ixtiyari formalı maska tətbiq etməyə imkan verən xüsusiyyətdir. Maska hər hansı digər CALayer ola bilər — məsələn, dairəvi path ilə CAShapeLayer və ya hamar şəffaflıq keçidi yaratmaq üçün CAGradientLayer. Maskaların istifadəsi GPU yükünü artırır, çünki hər pikselin alfa dəyərlərini hesablamaq üçün əlavə renderinq keçidi tələb olunur.

Sadə düzbucaqlı kəsiklər üçün cornerRadius və masksToBounds istifadə etmək tövsiyə olunur. Mask xüsusiyyəti ilə maskalardan fərqli olaraq, cornerRadius rasterləşdirmə mərhələsində aparat tərəfindən emal edilir və əlavə keçid tələb etmir.

Təbəqələrin performansı: renderinq və keşləmə

shouldRasterize — performans optimallaşdırması üçün CALayer-in əsas xüsusiyyətidir. shouldRasterize true-ya təyin edildikdə, Core Animation təbəqəni və onun bütün sublayers-larını ayrı raster buferinə (offscreen buffer) render edir. Sonrakı kadrlarda təkrar renderinq əvəzinə keşlənmiş raster təsvirdən istifadə olunur.

Keşləmə statik və ya nadir dəyişən təbəqələr üçün effektivdir: kölgələr, gradientlər, yuvarlaq künclü mətn. Lakin tez-tez yenilənən təbəqələr (animasiya, video, sürüşdürmə) üçün rasterləşdirmə performansı pisləşdirə bilər, çünki hər kadr keşin yenidən yaradılmasını tələb edir.

Objc.io araşdırmasına görə, iPad Pro-da shouldRasterize düzgün istifadəsi mürəkkəb ekranın renderinq müddətini 25 ms-dən 8 ms-ə endirir — üç dəfədən çox. Əsas şərt: təbəqə 3-5 kadrdan daha tez dəyişməməlidir.

• Opaque = true — Core Animation-a təbəqənin qeyri-şəffaf olduğunu bildirir, alfa-blending istisna olunur.
• drawsAsynchronously — main thread-i bloklamadan mürəkkəb təbəqələr üçün asinxron renderinqi aktivləşdirir.
• allowsEdgeAntialiasing — transformasiya olunmuş təbəqələr üçün kənar hamarlaşdırmanı aktivləşdirir, lakin GPU yükünü artırır.
• allowsGroupOpacity — uşaq təbəqələrin qrup şəffaflığını idarə edir.

Swift və Kotlin-də təbəqələrlə iş nümunələri

Birinci nümunə Swift-də CALayer-in əsas vizual xüsusiyyətlərinin konfiqurasiyasını göstərir — künclərin yuvarlaqlaşdırılması, kölgə və haşiyə:

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

İkinci nümunə — Swift-də CABasicAnimation istifadə edərək təbəqə animasiyasının yaradılması. UIView iştirakı olmadan position xüsusiyyəti animasiya edilir:

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

Üçüncü nümunə — Android-də Kotlin-də RenderNode ilə iş. RenderNode — Canvas səviyyəsində qrafik təbəqələrlə işləməyə imkan verən CALayer-in birbaşa analoqudur:

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
}