CALayer: nedir, temel kavramlar ve katman oluşturma

CALayer Nedir?

CALayer, ekranın dikdörtgen bir alanının bitmap görüntüsünü yöneten QuartzCore framework'ünden bir sınıftır. Görsel özellikleri depolar: frame, backgroundColor, opacity, shadow, border, transform. UIView'ın aksine, CALayer dokunma olaylarını işlemez, Auto Layout'a katılmaz ve view controller yaşam döngüsüne sahip değildir.

Mimari olarak, CALayer, Core Animation bağlamında Model desenini uygular. Katman, görsel özelliklerin durumunu depolar; Core Animation ise animasyon sırasında durumlar arasındaki enterpolasyonu yönetir. Bu ayrım, drawRect aracılığıyla içeriği yeniden çizmeye gerek kalmadan herhangi bir katman özelliğini canlandırmaya olanak tanır.

Apple WWDC 2024'e göre, CALayer Metal aracılığıyla çalışmak üzere yeniden yazıldı. Modern oluşturma hattı üç aşamadan oluşur: Commit (CPU'da özellikleri güncelleme), Render (CPU'da GPU komutları oluşturma) ve Composite (GPU'da komutları yürütme). CALayer, her biri için veri sağlayarak her üç aşamada da yer alır.

Her katman, üst katmanın üzerinde oluşturulan alt katmanlar (sublayers) içerebilir. Katman hiyerarşisi, UIView hiyerarşisini yansıtır ancak ondan bağımsız olarak var olabilir. Geliştiriciler, CALayer() aracılığıyla UIView'den bağımsız katmanlar oluşturabilir ve bunları addSublayer aracılığıyla hiyerarşiye ekleyebilir.

CALayer ve UIView Arasındaki Fark

UIView, CALayer'ın etrafındaki bir sarmalayıcıdır ve UIResponder aracılığıyla dokunma işleme, Auto Layout'a katılım, storyboard'da temsil ve UIViewController ile entegrasyon ekler. CALayer, tamamen görsel öğeler için UIView olmadan kullanılabilen hafif bir nesnedir.

Pratikte bu, bir öğenin dokunma işleme veya düzene ihtiyacı yoksa CALayer olarak uygulanabileceği anlamına gelir. Örneğin, arka plan animasyonları, yükleme göstergeleri, dekoratif öğeler — bunların tümü, UIView ek yükünden kaçınarak CALayer aracılığıyla daha verimli bir şekilde uygulanır.

CALayer'ın Temel Özellikleri

Temel özellikler arasında çerçeve, konumlandırma, görüntüleme ve görsel efektler bulunur. frame, üst koordinatlardaki katmanın dikdörtgen alanını tanımlar; bounds, iç koordinatları tanımlar; position ise katmanın merkezini tanımlar. position değişikliği varsayılan olarak örtük animasyon yoluyla canlandırılır.

• backgroundColor — katmanın arka plan rengi (CGColor). opaque = true ile opak bir renk ayarlamak alfa karıştırmayı ortadan kaldırır.
• cornerRadius — köşe yuvarlama. Ek oluşturma geçişi olmadan donanım tarafından işlenir.
• borderWidth ve borderColor — katman kenarlığı. GPU'da oluşturulur, drawRect gerektirmez.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — gölge. Açık bir shadowPath, oluşturmayı önemli ölçüde hızlandırır.
• opacity — katmanın 0.0 ile 1.0 arasında şeffaflığı. drawRect çağrısı yapmadan canlandırılır.
• transform — 2B ve 3B dönüşümler için CATransform3D. Perspektif bozulmalarını destekler.

contents özelliği, bitmap içeriğini doğrudan ayarlamaya olanak tanır — CGImage veya CIImage aracılığıyla. Bu, drawRect aracılığıyla çizime bir alternatiftir: görüntü zaten hazırsa, contents'e aktarılabilir ve Core Animation onu ek işlem yapmadan oluşturur.

Animasyon için CABasicAnimation, CAKeyframeAnimation ve CATransition kullanılır. Bu sınıfların tümü, CALayer özellik anahtar yolları aracılığıyla çalışarak position'dan transform.rotation.z'ye kadar neredeyse her özelliğin canlandırılmasına olanak tanır.

CALayer Alt Sınıfları ve Amaçları

Apple, her biri belirli bir görevi çözen birkaç özel CALayer alt sınıfı sağlar. Temel CALayer yerine uygun alt sınıfı seçmek, donanım hızlandırma yoluyla önemli performans iyileştirmeleri sağlayabilir.

• CAShapeLayer — GPU'da vektör şekillerini (CGPath) oluşturur. Ayrı bir arabellek gerektirmez — şekil, üst katman kompozisyonunun bir parçası olarak oluşturulur.
• CATextLayer — alt piksel kenar yumuşatma ile metin oluşturma. Glifleri önbelleğe alır, tekrarlanan metin görüntülemeyi hızlandırır.
• CAGradientLayer — doğrusal ve radyal gradyanlar. Ara görüntüler oluşturmadan donanım oluşturma.
• CAEmitterLayer — GPU'da parçacık sistemi. Her parçacık, CPU katılımı olmadan ayrı bir öğe olarak oluşturulur.
• CAReplicatorLayer — konum, renk ve zamanda yapılandırılabilir ofsetlerle alt katman kopyalarının otomatik oluşturulması.
• CATiledLayer — büyük görüntülerin döşemelerle oluşturulması. Yalnızca görünür parçaları yükler ve görüntüler.

CAReplicatorLayer, kod tekrarı olmadan yinelenen desenler oluşturmak için özellikle kullanışlıdır. Örneğin, 10 noktalı bir yükleme göstergesi, instanceCount = 10 ve animasyon zaman ofseti instanceDelay ile tek bir CAReplicatorLayer kullanılarak uygulanır.

CALayer Oluşturma ve Kompozisyon

CALayer oluşturma üç aşamada ilerler. Commit — bir katman özelliği değiştiğinde, CPU'da bir değişiklik yığını oluşturulur. Render — Core Animation, katman özelliklerine dayalı olarak CPU'da Metal komutları oluşturur. Composite — GPU komutları yürütür ve kareyi ekrana çıkarır. Tüm süreç, ekran yenileme hızıyla senkronize edilir.

Birden çok katmanın kompozisyonu sırasında GPU, şeffaflık, maskeler ve karıştırma modlarını dikkate alarak bunları nihai görüntüde birleştirir. Bir katmanın opaque = true değeri varsa, Core Animation kompozisyonu optimize eder: alfa karıştırma yerine, basit piksel değişimi gerçekleştirilir ve bu önemli ölçüde daha hızlıdır.

Apple Performance Guidelines'a göre, CALayer oluşturmayı yavaşlatan ana faktörler şunlardır: karmaşık sublayer hiyerarşisi (ekranda 30'dan fazla katman), maske kullanımı (mask özelliği), shadowPath olmadan otomatik gölge hesaplaması ve dinamik katmanlar için aşırı shouldRasterize kullanımı.

XCode'daki Core Animation Instrument, her katmanın oluşturma süresini, ekran dışı arabellek sayısını ve drawRect çağrı sıklığını izlemeye olanak tanır. 60 FPS için optimum oluşturma süresi CPU'da 8 ms ve GPU'da 8 ms'yi geçmez.

Ekran Dışı Oluşturma ve Etkisi

Ekran dışı oluşturma — bir katmanı ekranda görüntülemeden önce bir ara arabellekte oluşturma. İçerikle birlikte cornerRadius + masksToBounds, grup opaklığı, maskeler ve shouldRasterize kullanıldığında oluşur. Her ekran dışı geçiş 2–5 ms sürer, bu nedenle aşırı ekran dışı oluşturma performans için kritiktir.

Ekran dışı oluşturmayı teşhis etmek için Core Animation Instrument'taki Color Offscreen-Rendered aracını kullanın. Sarı katmanlar — ekran dışı, mavi — doğrudan ekran oluşturma. Ekran dışı geçişleri en aza indirmek, iOS'ta önemli bir optimizasyon tekniğidir.

Kod Örnekleri: Swift'te CALayer ile Çalışmak

İlk örnek, gölge oluşturma, köşe yuvarlama ve kenarlık ile temel CALayer kurulumunu gösterir. Oluşturmayı hızlandırmak için shadowPath açıkça belirtilmiştir:

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

İkinci örnek, perspektif 3B dönüşüm ile CABasicAnimation aracılığıyla transform animasyonunu gösterir. Y ekseni dönüş animasyonu bir kart çevirme efekti oluşturur:

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

Üçüncü örnek, arka plan gradyanı oluşturmak için CAGradientLayer kullanımını gösterir. Gradyan GPU'da oluşturulur ve yeniden boyutlandırma sırasında ek kaynak gerektirmez:

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}