draw(_:) en drawRect — wat is het, aanroep en overschrijven

Wat is draw(_:) / drawRect

draw(_:) — is een UIView-instantiemethode die UIKit aanroept voor het renderen van de inhoud van de view. Binnen deze methode krijgt de ontwikkelaar toegang tot de grafische context CGContext en gebruikt hij de Core Graphics API om lijnen, vullingen, tekst en afbeeldingen te tekenen. drawRect: in Objective-C vervult dezelfde functie, maar met een andere syntaxis: de enige parameter is CGRect die het te hertekenen gebied specificeert.

Volgens Apple Engineering (2024) werkt draw(_:) via CPU-rendering Bitmap Graphics Context, wat maximale flexibiliteit biedt, maar meer middelen vereist in vergelijking met CALayer. De beslissing om draw(_:) te gebruiken wordt genomen op basis van de complexiteit van de graphics en de prestatienvereisten.

Handtekening van de methode in Swift en Objective-C

In Swift wordt de methode gedeclareerd als override func draw(_ rect: CGRect), waarbij rect de rechthoek is die opnieuw moet worden getekend. In Objective-C is de handtekening - (void)drawRect:(CGRect)rect. De parameter rect kan kleiner zijn dan de bounds van de view bij gedeeltelijk hertekenen via setNeedsDisplay(_:).

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextFillRect(context, rect);
}

Wanneer roept het systeem draw(_:) aan

Het systeem roept draw(_:) automatisch aan in strikt gedefinieerde scenario's. Inzicht in deze triggers helpt onnodig hertekenen te voorkomen en de prestaties van de view te optimaliseren. Hieronder worden alle gevallen van automatische aanroep van de methode opgesomd.

• Eerste weergave — wanneer de view voor het eerst aan de hiërarchie wordt toegevoegd en zichtbaar wordt op het scherm
• setNeedsDisplay() — na aanroep van deze methode door het systeem in de dichtstbijzijnde tekencyclus
• setNeedsDisplay(_:) — hetzelfde, maar met specificatie van de specifieke rechthoek om te hertekenen
• contentMode — bij wijziging van bounds, als contentMode hertekenen vereist (bijv. .redraw)
• setNeedsLayout() — in sommige gevallen kan na het herschikken van subviews hertekenen nodig zijn

Apple-documentatie waarschuwt: roep draw(_:) nooit direct aan. Het systeem beslist zelf wanneer het tekenen moet uitvoeren en een directe aanroep verstoort het interne cachingmechanisme. Gebruik altijd setNeedsDisplay() of setNeedsDisplay(_:) om hertekenen aan te vragen.

Hoe draw(_:) in Swift te overschrijven

Het overschrijven van draw(_:) in Swift begint met het verkrijgen van de grafische context en daaropvolgende Core Graphics-aanroepen. Het wordt aanbevolen om afzonderlijke methoden te maken voor logische tekenblokken — dit verbetert de leesbaarheid en testbaarheid van de code.

override func draw(_ rect: CGRect) {
    super.draw(rect)

    guard let context = UIGraphicsGetCurrentContext() else { return }

    // Lijnparameters
    context.setStrokeColor(UIColor.darkGray.cgColor)
    context.setLineWidth(2.0)

    // Een driehoek tekenen
    context.move(to: CGPoint(x: rect.midX, y: rect.minY + 10))
    context.addLine(to: CGPoint(x: rect.maxX - 10, y: rect.maxY - 10))
    context.addLine(to: CGPoint(x: rect.minX + 10, y: rect.maxY - 10))
    context.closePath()
    context.strokePath()
}

In dit voorbeeld tekent draw(_:) een driehoek met een donkergrijze omtrek van 2 pixels dik. Het aanroepen van super.draw(rect) aan het begin van de methode wordt door Apple aanbevolen om de bovenliggende tekenlogica te behouden, hoewel de standaardimplementatie van draw(_:) in UIView leeg is.

De idempotentieregel van draw(_:)

Elke aanroep van draw(_:) moet bij dezelfde invoergegevens een identiek resultaat opleveren. Hierdoor kan het systeem het resultaat cachen en draw(_:) niet opnieuw aanroepen als de inhoud van de view niet is veranderd. Gebruik geen willekeurige waarden, systeemtijd of netwerkverzoeken binnen draw(_:).

drawRect: in Objective-C en verschil met draw(_:)

drawRect: — historisch de eerste versie van de methode, verschenen in iOS 2.0 samen met Objective-C. In Swift werd de methode hernoemd naar draw(_:) met gebruik van de externe parameter _. Functioneel zijn de methodes identiek: beide ontvangen een CGRect van het te hertekenen gebied en gebruiken UIGraphicsGetCurrentContext() voor toegang tot de grafische context.

Bij het migreren van een project van Objective-C naar Swift is het hernoemen van de methode een van de eerste taken. Xcode biedt een automatische converter, maar drawRect: vereist handmatige update naar draw(_:). Volgens Apple (2024) heeft de Swift-versie draw(_:) de voorkeur voor nieuwe projecten.

Optimalisatie van tekenen in draw(_:)

draw(_:) wordt op de CPU uitgevoerd en een niet-geoptimaliseerde implementatie kan leiden tot framedrops en lage prestaties. Apple beveelt verschillende bewezen benaderingen aan om het tekenen te versnellen.

Minimaliseer het aantal tekenbewerkingen

Elke Core Graphics-bewerking (move(to:), addLine(to:), strokePath) heeft overhead. Groepeer bewerkingen en gebruik CGPath voor complexe vormen — het pad wordt eenmaal gemaakt en opnieuw gebruikt bij elke aanroep van draw(_:).

Gebruik UIBezierPath voor vectorobjecten

UIBezierPath — is een Objective-C-wrapper rond CGPath die een eenvoudige API biedt voor het maken van vormen. Maak UIBezierPath van tevoren (bijv. in de initialisator) en roep eenvoudig fill() of stroke() aan binnen draw(_:).

private let starPath: UIBezierPath = {
    let path = UIBezierPath()
    // Een stervorm maken
    path.move(to: CGPoint(x: 50, y: 0))
    for i in 1...5 {
        let angle = CGFloat(i) * 4 * CGFloat.pi / 5
        path.addLine(to: CGPoint(x: 50 + 40 * cos(angle),
                               y: 50 + 40 * sin(angle)))
    }
    path.close()
    return path
}()

override func draw(_ rect: CGRect) {
    UIColor.systemYellow.setFill()
    starPath.fill()
}

Veelvoorkomende fouten bij het werken met draw(_:)

Ontwikkelaars maken vaak dezelfde fouten bij het overschrijven van draw(_:). Kennis van deze patronen helpt bugs en prestatievermindering te voorkomen. Laten we de meest voorkomende problemen en hun oplossingen bekijken.

• Directe aanroep van draw(_:) — roep draw(_:) nooit direct aan. Gebruik setNeedsDisplay() om hertekenen aan te vragen. Directe aanroep verstoort de caching en kan leiden tot onjuiste weergave.
• Zware berekeningen binnen draw(_:) — draw(_:) moet zo licht mogelijk zijn. Maak UIBezierPath, afbeeldingen en andere zware objecten buiten de methode, initialiseer ze eenmalig.
• Objecten maken binnen draw(_:) — UIColor-, UIFont- en UIGraphicsImageRenderer-constructies binnen draw(_:) creëren extra geheugenbelasting. Verplaats objectcreatie naar klasse-eigenschappen.
• Negeren van de parameter rect — rect geeft het gebied aan dat hertekend moet worden. Tekenen buiten rect wordt door het systeem genegeerd, maar verbruikt middelen. Controleer de intersectie met rect voor het tekenen.
• Ontbreken van super.draw(rect) — hoewel de UIView-implementatie leeg is, raadt Apple aan om super.draw(rect) aan te roepen voor compatibiliteit met toekomstige UIKit-wijzigingen.

Door deze regels te volgen, zorgt u voor stabiel en snel tekenen van aangepaste views in elk iOS-project. Profileer draw(_:) via Instruments (Core Animation) om de werkelijke uitvoeringstijd en knelpunten te zien.