Mobil uygulamalarda Layer — nedir, türleri ve nasıl çalışır

Mobil Grafiklerde Layer Nedir?

Layer, ekran parçasının bitmap görüntüsünü depolayan ve görsel niteliklerini (konum, boyut, döndürme, opaklık, gölge ve renk) yöneten düşük seviyeli bir grafik sistemi nesnesidir. iOS'ta, her UIView'in layer özelliği aracılığıyla erişilebilen yerleşik bir CALayer'ı vardır. Geliştirici, ince ayar işleme kontrolü için UIView'i atlayarak doğrudan layer ile çalışabilir.

Katman mimarisi Model-View-Controller desenini takip eder; CALayer Model olarak hareket eder — görsel özelliklerin durumunu depolar. Core Animation, durumlar arasındaki animasyon geçişlerini yöneten Denetleyicidir. View (UIView), dokunma işleme ve Auto Layout katılımı ekleyen isteğe bağlı bir sarmalayıcıdır.

Apple WWDC 2024'e göre, modern iOS işleme hattı, katman birleştirme için Metal kullanır. Her CALayer ayrı bir tampona işlenir, ardından Core Animation opaklık ve karıştırma modlarını dikkate alarak tüm tamponları nihai görüntüde birleştirir.

Android'de katmanların benzeri View ve arka plan Drawable'dır, ancak grafik katmanlarıyla doğrudan çalışma Android 10+'da Canvas ve RenderNode aracılığıyla kullanılabilir. Her iki platformda da işlemeyi optimize etmek için katman kavramını anlamak önemlidir.

Layer ve View Arasındaki Fark

Temel fark sorumluluk alanında yatar. View kullanıcı girişini (dokunmalar, jestler), konumlandırmayı (Auto Layout, frame) ve yaşam döngüsünü işler. Layer yalnızca görsel sunumdan sorumludur: içerik işleme, özellik animasyonu ve diğer katmanlarla birleştirme.

Bu ayrım, katmanın bitmap temsilinin View'dan bağımsız olarak önbelleğe alınmasını sağlar. Katman değişmezse, Core Animation drawRect'i çağırmadan önbelleğe alınmış kareyi kullanır. Statik öğeler için bu, kod değişikliği olmadan önemli bir performans artışı sağlar.

iOS ve Android'de Ana Katman Türleri

iOS, CALayer'dan miras alan zengin bir sınıf hiyerarşisi sağlar. Her alt sınıf belirli bir senaryo için optimize edilmiştir: metin görüntüleme, vektör grafikleri, degradeler veya 3B dönüşümler. Doğru katman türünü seçmek doğrudan işleme performansını etkiler.

• CALayer — arka plan rengi, kenarlık ve gölge ile dikdörtgen alanlar için temel katman.
• CAShapeLayer — CGPath aracılığıyla vektör şekilleri işlemek için katman. İşleme, ayrı bir tampon oluşturmadan GPU'da gerçekleştirilir.
• CATextLayer — alt piksel işleme ve glif önbellekleme ile metin görüntülemek için katman.
• CAGradientLayer — donanım hızlandırmalı doğrusal ve radyal degradeler için katman.
• CAReplicatorLayer — belirtilen ofsetlerle alt katmanların kopyalarını otomatik olarak oluşturan katman.

Android'de katman kavramı RenderNode, ViewLayer ve HardwareRenderer aracılığıyla uygulanır. Android 5.0 (API 21)'den itibaren, her View kendi donanım hızlandırma katmanında işlenir ve onDraw'i çağırmadan animasyonlara izin verir.

iOS'ta ek esneklik CAReplicatorLayer ve CAEmitterLayer tarafından sağlanır. İlki yinelenen desenler oluşturmak için, ikincisi parçacık sistemleri için kullanılır. Her ikisi de yalnızca GPU'da çalışır ve performans kaybı olmadan karmaşık görsel efektler oluşturmayı sağlar.

Katman Hiyerarşisi ve Sahne Birleştirme

iOS'ta katman hiyerarşisi bir ağaç yapısını izler: her CALayer birden çok alt katman içerebilir. Üst katmana uygulanan tüm dönüşümler — ölçekleme, döndürme, öteleme — otomatik olarak alt öğelere uygulanır. Bu, animasyonlar sırasında görsel tutarlılık sağlar.

Sahne birleştirme Core Animation tarafından şu sırayla gerçekleştirilir: önce arka plan işlenir, ardından her alt katman aşağıdan yukarıya doğru sırayla işlenir. Her katman için Core Animation opaklık, maske ve karıştırma modu özelliklerini kontrol eder ve ardından bunları nihai karede birleştirir.

Apple Documentation'a göre, opaque = true ve alfa kanalı olmayan bir katmanın birleştirilmesi ekstra geçiş olmadan gerçekleştirilir — GPU, önceki katmanın üzerine pikselleri kopyalar. Katman şeffaflığa sahipse, GPU alfa karıştırma gerçekleştirir ve bu da ek hesaplama kaynakları gerektirir.

Android'de katman birleştirme SurfaceFlinger aracılığıyla gerçekleştirilir — her uygulamadan tamponları alan ve bunları z-sırasına göre birleştiren bir sistem hizmeti. Android'deki her Window, birden çok grafik katmanı içerebilen ayrı bir Surface'dir.

Maskeler ve Katman Kırpma

CALayer.mask — bir katmana isteğe bağlı şekilde maske uygulamaya izin veren bir özelliktir. Maske başka herhangi bir CALayer olabilir — örneğin, dairesel yola sahip CAShapeLayer veya yumuşak opaklık geçişi oluşturmak için CAGradientLayer. Maske kullanımı, her pikselin alfa değerlerini hesaplamak için ek işleme geçişi gerektirdiğinden GPU yükünü artırır.

Basit dikdörtgen kırpma için cornerRadius ve masksToBounds kullanılması önerilir. mask özelliği aracılığıyla maskelerin aksine, cornerRadius rasterleştirme aşamasında donanım tarafından işlenir ve ek geçiş gerektirmez.

Katman Performansı: İşleme ve Önbellekleme

shouldRasterize, performans optimizasyonu için önemli bir CALayer özelliğidir. shouldRasterize true olarak ayarlandığında, Core Animation katmanı ve tüm alt katmanlarını ayrı bir ekran dışı tampona işler. Sonraki karelerde, yeniden işleme yerine önbelleğe alınmış bitmap görüntüsü kullanılır.

Önbellekleme, statik veya nadiren değişen katmanlar (gölgeler, degradeler, yuvarlak köşeli metin) için etkilidir. Ancak sık güncellenen katmanlar (animasyon, video, kaydırma) için rasterleştirme performansı düşürebilir çünkü her kare önbellek yeniden oluşturmayı gerektirir.

Objc.io araştırmasına göre, iPad Pro'da shouldRasterize'ın doğru kullanımı karmaşık bir ekranın işleme süresini 25 ms'den 8 ms'ye düşürür — üç kattan fazla. Temel koşul, katmanın her 3–5 karede bir defadan fazla değişmemesidir.

• Opaque = true — Core Animation'a katmanın opak olduğunu bildirir, alfa karıştırmayı ortadan kaldırır.
• drawsAsynchronously — ana iş parçacığını engellemeden karmaşık katmanlar için eşzamansız işlemeyi etkinleştirir.
• allowsEdgeAntialiasing — dönüştürülmüş katmanlar için kenar yumuşatmayı etkinleştirir ancak GPU yükünü artırır.
• allowsGroupOpacity — alt katmanların grup opaklığını kontrol eder.

Swift ve Kotlin'de Katmanlarla Çalışma Örnekleri

İlk örnek, Swift'te CALayer'ın temel görsel özelliklerinin (köşe yuvarlama, gölge ve kenarlık) ayarlanmasını gösterir:

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 örnek — CABasicAnimation kullanarak Swift'te katman animasyonu oluşturma. position özelliği UIView katılımı olmadan canlandırılır:

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ü örnek — Android'de Kotlin'de RenderNode ile çalışma. RenderNode, CALayer'ın doğrudan bir benzeridir ve Canvas düzeyinde grafik katmanlarıyla çalışmaya izin verir:

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
}