Custom UIView: ce este, crearea și suprascrierea drawRect

Ce este Custom UIView și când este necesar

Custom UIView — este o clasă personalizată care moștenește UIView, în care dezvoltatorul suprascrie metodele standard pentru a implementa propria logică de afișare și interacțiune. UIKit conține multe componente gata făcute, dar nu acoperă toate scenariile: grafice animate, comutatoare personalizate, pânză pentru desenat de mână, elemente de joc sau vizualizare de date necesită implementare personalizată.

Apple recomandă crearea Custom UIView atunci când componentele standard nu pot oferi funcționalitatea necesară sau când același element personalizat este utilizat în mai multe locuri ale aplicației. Conform WWDC 2024, vizualizările personalizate reprezintă în medie 15-20% din totalul UIView-urilor într-un proiect de dimensiune medie.

Scenarii tipice de utilizare

UIView personalizat este utilizat pentru construirea de grafice și diagrame (desenarea liniilor și formelor cu Core Graphics), indicatori de progres personalizați, fundaluri animate, elemente pentru desenat cu degetul, precum și pentru vizualizarea datelor în timp real. În fiecare dintre aceste cazuri, dezvoltatorul are acces complet la CGContext și poate desena orice geometrie.

Când Custom UIView nu este necesar

Dacă elementul poate fi asamblat din componente standard UIKit (UIButton, UIImageView, UILabel) folosind Auto Layout și configurarea proprietăților — crearea unei subclase UIView va fi de prisos. Apple recomandă să încercați mai întâi compoziția vizualizărilor gata făcute și numai când funcționalitatea este insuficientă să treceți la desenarea personalizată.

Cum să creați Custom UIView în Xcode

Crearea unui UIView personalizat începe cu declararea unei clase care moștenește UIView și implementarea inițializatorilor obligatorii. Implementarea minimă include init(frame:) pentru crearea din cod și init(coder:) pentru încărcarea din Storyboard sau XIB.

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

În metoda setupView() se stabilesc proprietățile inițiale: fundal transparent, setări ale stratului. Dacă vizualizarea va fi afișată în Interface Builder, merită adăugate @IBDesignable și @IBInspectable pentru previzualizare live.

Metodele ciclului de viață UIView

Custom UIView este gestionat de sistem printr-o succesiune de metode ale ciclului de viață care sunt apelate într-o anumită ordine. Înțelegerea acestui ciclu este crucială pentru configurarea și desenarea corectă a vizualizării.

Toate metodele sunt apelate automat de sistem și dezvoltatorul nu trebuie să le apeleze manual. Excepție — setNeedsDisplay(), care semnalează sistemului necesitatea reapelării lui draw(_:).

Suprascrierea draw(_:) pentru desenare

draw(_:) — metoda cheie pentru desenarea personalizată în Custom UIView. În interiorul ei, dezvoltatorul obține acces la CGContext (contextul grafic) și poate desena linii, forme, text și imagini folosind Core Graphics.

Sistemul apelează draw(_:) automat la prima apariție a vizualizării pe ecran. Reapelarea este inițiată prin setNeedsDisplay(), care marchează vizualizarea ca necesitând redesenare. Important: nu apelați draw(_:) direct — aceasta strică mecanismul de cache și reduce performanța.

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

    // Umplerea fundalului
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Desenarea unui cerc
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

În acest exemplu, draw(_:) umple fundalul cu culoare albastră și desenează un cerc alb cu o margine de 20 pixeli de la margini. Fiecare apel draw(_:) trebuie să fie idempotent — apelarea repetată cu aceiași parametri trebuie să dea același rezultat.

Reguli pentru un draw(_:) eficient

Apple recomandă minimizarea muncii în interiorul draw(_:) — creați UIBezierPath în avans, stocați în cache imaginile și nu executați calcule grele. Dacă vizualizarea este statică, luați în considerare utilizarea UIImageView cu o imagine redată în locul redesenării constante.

CALayer versus draw(_:): ce să alegeți

CALayer — este stratul subiacent care gestionează conținutul vizual al UIView. Multe sarcini de desenare personalizată pot fi rezolvate prin configurarea proprietăților CALayer fără a suprascrie draw(_:), ceea ce este semnificativ mai performant.

Conform Apple Engineering (2024), operațiile la nivelul CALayer se execută pe GPU, în timp ce draw(_:) funcționează prin randare CPU Core Graphics. Pentru animații și tranziții fluide este preferabilă utilizarea CALayer și CABasicAnimation.

Utilizați CAShapeLayer pentru desenarea formelor vectoriale cu animație — este accelerat hardware și suportă animația path, strokeStart și strokeEnd fără a apela draw(_:).

Optimizarea performanței Custom UIView

Performanța Custom UIView influențează direct fluiditatea animațiilor și impresia generală a aplicației. Problemele principale apar din cauza apelurilor excesive ale draw(_:), a aranjării neoptimale a subview-urilor și a lipsei de cache.

Evitați redesenările inutile

Fiecare apel setNeedsDisplay() duce la redesenarea completă a vizualizării. Utilizați setNeedsDisplay(_:) cu specificarea unui dreptunghi concret, dacă modificările au afectat doar o parte a vizualizării. Pentru proprietățile CALayer (backgroundColor, cornerRadius, shadow) redesenarea nu este necesară — acestea se actualizează la nivel GPU.

Stocarea în cache a conținutului randat

Dacă conținutul Custom UIView se schimbă rar, randați-l o dată în UIGraphicsImageRenderer și salvați-l ca UIImage. La următoarea redesenare, utilizați draw(at:) pentru a afișa imaginea din cache — aceasta este de zeci de ori mai rapid decât redesenarea prin Core Graphics.

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

Utilizați shouldRasterize pentru straturi statice

Proprietatea shouldRasterize a CALayer activează stocarea în cache a reprezentării rasterizate a stratului. Activați-o pentru vizualizări statice cu transparență și umbre — reduce încărcarea compositing-ului. Dezactivați-o pentru vizualizări animate: la fiecare modificare cache-ul se resetează, iar rasterizarea doar înrăutățește performanța.