Custom UIView: Was es ist, Erstellung und Überschreiben von drawRect

Was ist Custom UIView und wann wird es benötigt

Custom UIView ist eine benutzerdefinierte Klasse, die von UIView erbt, in der der Entwickler Standardmethoden überschreibt, um benutzerdefinierte Anzeige- und Interaktionslogik zu implementieren. UIKit enthält viele integrierte Komponenten, aber sie decken nicht alle Szenarien ab: animierte Diagramme, benutzerdefinierte Schalter, Freihandzeichenfläche, Spielelemente oder Datenvisualisierung erfordern eine benutzerdefinierte Implementierung.

Apple empfiehlt die Erstellung einer Custom UIView, wenn Standardkomponenten die erforderliche Funktionalität nicht bereitstellen können oder wenn dasselbe benutzerdefinierte Element an mehreren Stellen der Anwendung verwendet wird. Laut WWDC 2024 machen benutzerdefinierte Ansichten in einem mittelgroßen Projekt durchschnittlich 15-20% aller UIViews aus.

Typische Anwendungsfälle

Custom UIView wird zum Erstellen von Diagrammen und Grafiken (Zeichnen von Linien und Formen mit Core Graphics), benutzerdefinierten Fortschrittsanzeigen, animierten Hintergründen, Fingerzeichenelementen und Echtzeit-Datenvisualisierung verwendet. In jedem dieser Fälle erhält der Entwickler vollständigen Zugriff auf CGContext und kann jede Geometrie zeichnen.

Wann Custom UIView nicht benötigt wird

Wenn ein Element aus Standard-UIKit-Komponenten (UIButton, UIImageView, UILabel) mit Auto Layout und Eigenschaftskonfiguration zusammengesetzt werden kann, ist die Erstellung einer UIView-Unterklasse übertrieben. Apple empfiehlt, zuerst die Komposition vorgefertigter Ansichten zu versuchen und nur bei unzureichender Funktionalität auf benutzerdefiniertes Zeichnen umzusteigen.

So erstellen Sie eine Custom UIView in Xcode

Die Erstellung einer benutzerdefinierten UIView beginnt mit der Deklaration einer Klasse, die von UIView erbt, und der Implementierung der erforderlichen Initialisierer. Die minimale Implementierung umfasst init(frame:) zum Erstellen aus Code und init(coder:) zum Laden aus Storyboard oder 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
    }
}

In der setupView()-Methode werden Anfangseigenschaften festgelegt: transparenter Hintergrund, Layer-Einstellungen. Wenn die Ansicht im Interface Builder angezeigt wird, lohnt es sich, @IBDesignable und @IBInspectable für die Live-Vorschau hinzuzufügen.

Lebenszyklusmethoden von UIView

Custom UIView wird vom System durch eine Sequenz von Lebenszyklusmethoden verwaltet, die in einer bestimmten Reihenfolge aufgerufen werden. Das Verständnis dieses Zyklus ist für die korrekte Einrichtung und das Zeichnen der Ansicht von entscheidender Bedeutung.

Alle Methoden werden automatisch vom System aufgerufen, und der Entwickler muss sie nicht manuell aufrufen. Die Ausnahme ist setNeedsDisplay(), das dem System signalisiert, draw(_:) erneut aufzurufen.

Überschreiben von draw(_:) zum Zeichnen

draw(_:) ist die Schlüsselmethode für benutzerdefiniertes Zeichnen in Custom UIView. In ihr erhält der Entwickler Zugriff auf CGContext (Grafikkontext) und kann Linien, Formen, Text und Bilder mit Core Graphics zeichnen.

Das System ruft draw(_:) automatisch auf, wenn die Ansicht zum ersten Mal auf dem Bildschirm erscheint. Ein nachfolgender Aufruf wird durch setNeedsDisplay() ausgelöst, das die Ansicht als neu zu zeichnen markiert. Wichtig: Rufen Sie draw(_:) nicht direkt auf — dies zerstört den Caching-Mechanismus und verringert die Leistung.

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

    // Hintergrundfüllung
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

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

In diesem Beispiel füllt draw(_:) den Hintergrund mit blauer Farbe und zeichnet einen weißen Kreis mit einem Abstand von 20 Pixeln von den Rändern. Jeder Aufruf von draw(_:) sollte idempotent sein — mehrere Aufrufe mit denselben Parametern sollten dasselbe Ergebnis liefern.

Regeln für effektives draw(_:)

Apple empfiehlt, die Arbeit innerhalb von draw(_:) zu minimieren — erstellen Sie UIBezierPath im Voraus, cachen Sie Bilder und führen Sie keine schweren Berechnungen durch. Wenn die Ansicht statisch ist, erwägen Sie die Verwendung von UIImageView mit einem gerenderten Bild anstelle ständigen Neuzeichnens.

CALayer vs draw(_:): Was wählen

CALayer ist die zugrunde liegende Ebene, die den visuellen Inhalt von UIView verwaltet. Viele benutzerdefinierte Zeichenaufgaben können durch Konfigurieren von CALayer-Eigenschaften ohne Überschreiben von draw(_:) gelöst werden, was wesentlich effizienter ist.

Laut Apple Engineering (2024) werden Operationen auf CALayer-Ebene auf der GPU ausgeführt, während draw(_:) über CPU-basiertes Core Graphics Rendering arbeitet. Für Animationen und flüssige Übergänge ist die Verwendung von CALayer und CABasicAnimation vorzuziehen.

Verwenden Sie CAShapeLayer zum Zeichnen von Vektorformen mit Animation — es ist hardwarebeschleunigt und unterstützt Pfad-, strokeStart- und strokeEnd-Animation ohne Aufruf von draw(_:).

Leistungsoptimierung von Custom UIView

Die Leistung von Custom UIView wirkt sich direkt auf die Flüssigkeit von Animationen und das allgemeine Benutzererlebnis aus. Hauptprobleme entstehen durch übermäßige draw(_:)-Aufrufe, suboptimales Layout von Unteransichten und fehlendes Caching.

Vermeiden Sie unnötiges Neuzeichnen

Jeder Aufruf von setNeedsDisplay() löst ein vollständiges Neuzeichnen der Ansicht aus. Verwenden Sie setNeedsDisplay(_:) mit einem bestimmten Rechteck, wenn Änderungen nur einen Teil der Ansicht betroffen haben. Für CALayer-Eigenschaften (backgroundColor, cornerRadius, shadow) ist kein Neuzeichnen erforderlich — sie werden auf GPU-Ebene aktualisiert.

Caching von gerenderten Inhalten

Wenn sich der Inhalt von Custom UIView selten ändert, rendern Sie ihn einmal in UIGraphicsImageRenderer und speichern Sie ihn als UIImage. Verwenden Sie beim nächsten Neuzeichnen draw(at:), um das gecachte Bild anzuzeigen — das ist dutzende Male schneller als erneutes Rendern über Core Graphics.

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

Verwenden Sie shouldRasterize für statische Ebenen

Die shouldRasterize-Eigenschaft von CALayer aktiviert das Caching der Rasterdarstellung der Ebene. Aktivieren Sie sie für statische Ansichten mit Transparenz und Schatten — dies reduziert die Compositing-Last. Deaktivieren Sie sie für animierte Ansichten: Der Cache wird bei jeder Änderung zurückgesetzt, und die Rasterung verschlechtert nur die Leistung.