Custom UIView: nedir, oluşturma ve drawRect'i geçersiz kılma

Custom UIView Nedir ve Ne Zaman Gerekir

Custom UIView, UIView'den miras alan, geliştiricinin özel görüntüleme ve etkileşim mantığı uygulamak için standart yöntemleri geçersiz kıldığı kullanıcı tanımlı bir sınıftır. UIKit birçok yerleşik bileşen içerir, ancak animasyonlu grafikler, özel anahtarlar, serbest el çizim tuvali, oyun öğeleri veya veri görselleştirme gibi tüm senaryoları kapsamaz ve özel uygulama gerektirir.

Apple, standart bileşenler gerekli işlevselliği sağlayamadığında veya aynı özel öğe uygulamanın birden çok yerinde kullanıldığında Custom UIView oluşturulmasını önerir. WWDC 2024'e göre, orta büyüklükteki bir projede özel görünümler tüm UIView'lerin ortalama %15-20'sini oluşturur.

Tipik Kullanım Durumları

Custom UIView, grafikler ve diyagramlar (Core Graphics ile çizgi ve şekil çizme), özel ilerleme göstergeleri, animasyonlu arka planlar, parmakla çizim öğeleri ve gerçek zamanlı veri görselleştirme oluşturmak için kullanılır. Bu durumların her birinde, geliştirici CGContext'e tam erişim elde eder ve herhangi bir geometriyi çizebilir.

Custom UIView Ne Zaman Gerekmez

Bir öğe standart UIKit bileşenlerinden (UIButton, UIImageView, UILabel) Auto Layout ve özellik yapılandırması kullanılarak birleştirilebiliyorsa, UIView alt sınıfı oluşturmak gereksizdir. Apple önce hazır görünümlerin kompozisyonunu denemeyi ve yalnızca işlevsellik yetersiz olduğunda özel çizime geçmeyi önerir.

Xcode'da Custom UIView Oluşturma

Özel bir UIView oluşturmak, UIView'den miras alan bir sınıf bildirimi ve zorunlu başlatıcıların uygulanmasıyla başlar. Minimum uygulama, koddan oluşturmak için init(frame:) ve Storyboard veya XIB'den yüklemek için init(coder:) içerir.

import UIKit

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .clear
        setupLayerProperties()
    }

    private func setupLayerProperties() {
        layer.cornerRadius = bounds.width / 2
        layer.masksToBounds = true
    }
}

setupView() yönteminde ilk özellikler ayarlanır: şeffaf arka plan, katman ayarları. Görünüm Interface Builder'da görüntülenecekse, canlı önizleme için @IBDesignable ve @IBInspectable eklemeye değer.

UIView Yaşam Döngüsü Yöntemleri

Custom UIView, belirli bir sırayla çağrılan bir dizi yaşam döngüsü yöntemi aracılığıyla sistem tarafından yönetilir. Bu döngüyü anlamak, görünümün doğru şekilde ayarlanması ve çizilmesi için kritik öneme sahiptir.

Tüm yöntemler sistem tarafından otomatik olarak çağrılır ve geliştiricinin bunları manuel olarak çağırması gerekmez. İstisna, sisteme draw(_:) yöntemini yeniden çağırması gerektiğini bildiren setNeedsDisplay()'dir.

Çizim İçin draw(_:) Geçersiz Kılma

draw(_:), Custom UIView'de özel çizim için anahtar yöntemdir. İçinde, geliştirici CGContext'e (grafik bağlamı) erişir ve Core Graphics kullanarak çizgiler, şekiller, metin ve resimler çizebilir.

Sistem, görünüm ekranda ilk kez göründüğünde draw(_:) yöntemini otomatik olarak çağırır. Sonraki bir çağrı, görünümü yeniden çizilmesi gereken olarak işaretleyen setNeedsDisplay() tarafından tetiklenir. Önemli: draw(_:) yöntemini doğrudan çağırmayın — bu önbelleğe alma mekanizmasını bozar ve performansı düşürür.

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    // Arka plan dolgusu
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Bir daire çizme
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

Bu örnekte, draw(_:) arka planı mavi renkle doldurur ve kenarlardan 20 piksel boşlukla beyaz bir daire çizer. draw(_:) yönteminin her çağrısı aynı sonucu üreten olmalıdır — aynı parametrelerle birden çok çağrı aynı sonucu vermelidir.

Etkili draw(_:) Kuralları

Apple, draw(_:) içindeki çalışmayı en aza indirmeyi önerir — UIBezierPath'i önceden oluşturun, resimleri önbelleğe alın ve ağır hesaplamalar yapmayın. Görünüm statikse, sürekli yeniden çizim yerine işlenmiş bir resimle UIImageView kullanmayı düşünün.

CALayer ve draw(_:): Hangisini Seçmeli

CALayer, UIView'in görsel içeriğini yöneten temel katmandır. Birçok özel çizim görevi, draw(_:) geçersiz kılınmadan CALayer özellikleri yapılandırılarak çözülebilir ve bu önemli ölçüde daha verimlidir.

Apple Engineering'e (2024) göre, CALayer düzeyindeki işlemler GPU'da çalışırken, draw(_:) CPU tabanlı Core Graphics işleme yoluyla çalışır. Animasyonlar ve yumuşak geçişler için CALayer ve CABasicAnimation kullanmak tercih edilir.

Animasyonlu vektör şekilleri çizmek için CAShapeLayer kullanın — donanım hızlandırmalıdır ve draw(_:) çağırmadan path, strokeStart ve strokeEnd animasyonunu destekler.

Custom UIView Performans Optimizasyonu

Custom UIView performansı, animasyonların akıcılığını ve genel kullanıcı deneyimini doğrudan etkiler. Temel sorunlar aşırı draw(_:) çağrılarından, alt görünümlerin optimal olmayan düzeninden ve önbelleğe alma eksikliğinden kaynaklanır.

Gereksiz Yeniden Çizimlerden Kaçının

setNeedsDisplay() çağrılarının her biri, görünümün tamamen yeniden çizilmesini tetikler. Değişiklikler yalnızca görünümün bir kısmını etkilediyse, belirli bir dikdörtgenle setNeedsDisplay(_:) kullanın. CALayer özellikleri (backgroundColor, cornerRadius, shadow) için yeniden çizim gerekmez — GPU düzeyinde güncellenirler.

İşlenmiş İçeriği Önbelleğe Alma

Custom UIView içeriği nadiren değişiyorsa, UIGraphicsImageRenderer içinde bir kez işleyin ve UIImage olarak kaydedin. Bir sonraki yeniden çizimde, önbelleğe alınmış resmi görüntülemek için draw(at:) kullanın — bu, Core Graphics aracılığıyla yeniden işlemekten onlarca kat daha hızlıdır.

func renderToImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: bounds.size)
    return renderer.image { ctx in
        drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
}

Statik Katmanlar İçin shouldRasterize Kullanın

CALayer üzerindeki shouldRasterize özelliği, katmanın bitmap temsilinin önbelleğe alınmasını etkinleştirir. Saydamlık ve gölgelere sahip statik görünümler için etkinleştirin — bu, birleştirme yükünü azaltır. Animasyonlu görünümler için devre dışı bırakın: önbellek her değişiklikte sıfırlanır ve rasterleştirme yalnızca performansı düşürür.