Custom UIView: co to jest, tworzenie i nadpisywanie drawRect

Co to jest Custom UIView i kiedy jest potrzebny

Custom UIView — to klasa użytkownika dziedzicząca po UIView, w której programista nadpisuje standardowe metody, aby zaimplementować własną logikę wyświetlania i interakcji. UIKit zawiera wiele gotowych komponentów, ale nie pokrywają one wszystkich scenariuszy: animowane wykresy, niestandardowe przełączniki, płótno do rysowania odręcznego, elementy gier czy wizualizacja danych wymagają niestandardowej implementacji.

Apple zaleca tworzenie Custom UIView, gdy standardowe komponenty nie zapewniają potrzebnej funkcjonalności lub gdy ten sam niestandardowy element jest używany w wielu miejscach aplikacji. Według WWDC 2024, niestandardowe widoki stanowią średnio 15-20% wszystkich UIView w projekcie średniej wielkości.

Typowe scenariusze użycia

Niestandardowy UIView jest używany do tworzenia wykresów i diagramów (rysowanie linii i kształtów w Core Graphics), niestandardowych wskaźników postępu, animowanych tła, elementów do rysowania palcem, a także do wizualizacji danych w czasie rzeczywistym. W każdym z tych przypadków programista ma pełny dostęp do CGContext i może narysować dowolną geometrię.

Kiedy Custom UIView nie jest potrzebny

Jeśli element można złożyć ze standardowych komponentów UIKit (UIButton, UIImageView, UILabel) za pomocą Auto Layout i konfiguracji właściwości — tworzenie podklasy UIView będzie zbędne. Apple zaleca najpierw próbować kompozycji gotowych widoków i dopiero w przypadku niewystarczającej funkcjonalności przechodzić do niestandardowego rysowania.

Jak utworzyć Custom UIView w Xcode

Tworzenie niestandardowego UIView zaczyna się od zadeklarowania klasy dziedziczącej po UIView i zaimplementowania obowiązkowych inicjalizatorów. Minimalna implementacja obejmuje init(frame:) do tworzenia z kodu oraz init(coder:) do ładowania ze Storyboard lub 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
    }
}

W metodzie setupView() ustawiane są początkowe właściwości: przezroczyste tło, ustawienia warstwy. Jeśli widok będzie wyświetlany w Interface Builder, warto dodać @IBDesignable i @IBInspectable do podglądu na żywo.

Metody cyklu życia UIView

Custom UIView jest zarządzany przez system za pomocą sekwencji metod cyklu życia, które są wywoływane w określonej kolejności. Zrozumienie tego cyklu jest krytyczne dla prawidłowej konfiguracji i rysowania widoku.

Wszystkie metody są wywoływane automatycznie przez system i programista nie musi wywoływać ich ręcznie. Wyjątkiem jest setNeedsDisplay(), który sygnalizuje systemowi potrzebę ponownego wywołania draw(_:).

Nadpisywanie draw(_:) do rysowania

draw(_:) — kluczowa metoda niestandardowego rysowania w Custom UIView. Wewnątrz niej programista uzyskuje dostęp do CGContext (kontekstu graficznego) i może rysować linie, kształty, tekst i obrazy za pomocą Core Graphics.

System wywołuje draw(_:) automatycznie przy pierwszym pojawieniu się widoku na ekranie. Ponowne wywołanie inicjowane jest przez setNeedsDisplay(), który oznacza widok jako wymagający przerysowania. Ważne: nie wywołuj draw(_:) bezpośrednio — to psuje mechanizm buforowania i obniża wydajność.

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

    // Wypełnienie tła
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Rysowanie koła
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

W tym przykładzie draw(_:) wypełnia tło niebieskim kolorem i rysuje biały okrąg z odstępem 20 pikseli od krawędzi. Każde wywołanie draw(_:) powinno być idempotentne — wielokrotne wywołanie z tymi samymi parametrami powinno dawać ten sam wynik.

Zasady efektywnego draw(_:)

Apple zaleca minimalizowanie pracy wewnątrz draw(_:) — twórz UIBezierPath z wyprzedzeniem, buforuj obrazy i nie wykonuj ciężkich obliczeń. Jeśli widok jest statyczny, rozważ użycie UIImageView z wyrenderowanym obrazem zamiast ciągłego przerysowywania.

CALayer a draw(_:): co wybrać

CALayer — to leżąca poniżej warstwa, która zarządza zawartością wizualną UIView. Wiele zadań niestandardowego rysowania można rozwiązać poprzez konfigurację właściwości CALayer bez nadpisywania draw(_:), co jest znacznie wydajniejsze.

Według Apple Engineering (2024), operacje na poziomie CALayer są wykonywane na GPU, podczas gdy draw(_:) działa przez renderowanie CPU Core Graphics. Do animacji i płynnych przejść preferowane jest używanie CALayer i CABasicAnimation.

Używaj CAShapeLayer do rysowania kształtów wektorowych z animacją — jest przyspieszony sprzętowo i obsługuje animację path, strokeStart i strokeEnd bez wywoływania draw(_:).

Optymalizacja wydajności Custom UIView

Wydajność Custom UIView bezpośrednio wpływa na płynność animacji i ogólne wrażenie z aplikacji. Główne problemy wynikają z nadmiernych wywołań draw(_:), nieoptymalnego rozmieszczenia subview i braku buforowania.

Unikaj zbędnych przerysowań

Każde wywołanie setNeedsDisplay() prowadzi do pełnego przerysowania widoku. Używaj setNeedsDisplay(_:) z określeniem konkretnego prostokąta, jeśli zmiany dotknęły tylko część widoku. Dla właściwości CALayer (backgroundColor, cornerRadius, shadow) przerysowanie nie jest wymagane — są aktualizowane na poziomie GPU.

Buforowanie wyrenderowanej zawartości

Jeśli zawartość Custom UIView zmienia się rzadko, wyrenderuj ją raz w UIGraphicsImageRenderer i zapisz jako UIImage. Przy następnym przerysowaniu użyj draw(at:) do wyświetlenia buforowanego obrazu — to dziesiątki razy szybsze niż ponowne rysowanie przez Core Graphics.

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

Używaj shouldRasterize dla statycznych warstw

Właściwość shouldRasterize w CALayer włącza buforowanie rastrowej reprezentacji warstwy. Włączaj ją dla statycznych widoków z przezroczystością i cieniami — to zmniejsza obciążenie compositingu. Wyłączaj dla animowanych widoków: przy każdej zmianie bufor jest resetowany, a rasteryzacja tylko pogarsza wydajność.