Custom UIView: какво е това, създаване и предефиниране на drawRect

Какво е Custom UIView и кога е необходим

Custom UIView — е персонализиран клас, който наследява UIView, в който разработчикът предефинира стандартните методи, за да реализира собствена логика на показване и взаимодействие. UIKit съдържа много готови компоненти, но те не покриват всички сценарии: анимирани графики, нестандартни превключватели, платно за рисуване на ръка, игрови елементи или визуализация на данни изискват персонализирана реализация.

Apple препоръчва създаване на Custom UIView, когато стандартните компоненти не могат да осигурят необходимата функционалност или когато същият персонализиран елемент се използва на няколко места в приложението. Според WWDC 2024, персонализираните изгледи съставляват средно 15-20% от всички UIView в проект със среден размер.

Типични сценарии на използване

Персонализираният UIView се използва за изграждане на графики и диаграми (рисуване на линии и фигури с Core Graphics), нестандартни индикатори за напредък, анимирани фонове, елементи за рисуване с пръст, както и за визуализация на данни в реално време. Във всеки от тези случаи разработчикът има пълен достъп до CGContext и може да нарисува всякаква геометрия.

Кога Custom UIView не е необходим

Ако елементът може да бъде сглобен от стандартни UIKit компоненти (UIButton, UIImageView, UILabel) с помощта на Auto Layout и конфигурация на свойства — създаването на подклас на UIView ще бъде излишно. Apple препоръчва първо да опитате композиция от готови изгледи и само когато функционалността е недостатъчна, да преминете към персонализирано рисуване.

Как да създадем Custom UIView в Xcode

Създаването на персонализиран UIView започва с деклариране на клас, който наследява UIView, и имплементиране на задължителните инициализатори. Минималната имплементация включва init(frame:) за създаване от код и init(coder:) за зареждане от Storyboard или 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
    }
}

В метода setupView() се задават началните свойства: прозрачен фон, настройки на слоя. Ако изгледът ще се показва в Interface Builder, си струва да добавите @IBDesignable и @IBInspectable за преглед на живо.

Методи на жизнения цикъл на UIView

Custom UIView се управлява от системата чрез последователност от методи на жизнения цикъл, които се извикват в определен ред. Разбирането на този цикъл е критично за правилната конфигурация и рисуване на изгледа.

Всички методи се извикват автоматично от системата и разработчикът не трябва да ги извиква ръчно. Изключение — setNeedsDisplay(), който сигнализира на системата за необходимост от повторно извикване на draw(_:).

Предефиниране на draw(_:) за рисуване

draw(_:) — ключовият метод за персонализирано рисуване в Custom UIView. Вътре в него разработчикът получава достъп до CGContext (графичен контекст) и може да рисува линии, фигури, текст и изображения с помощта на Core Graphics.

Системата извиква draw(_:) автоматично при първото появяване на изгледа на екрана. Повторното извикване се инициира чрез setNeedsDisplay(), който маркира изгледа като изискващ прерисуване. Важно: не извиквайте draw(_:) директно — това нарушава механизма за кеширане и намалява производителността.

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

    // Запълване на фона
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Рисуване на кръг
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

В този пример draw(_:) запълва фона със син цвят и рисува бял кръг с разстояние от 20 пиксела от ръбовете. Всяко извикване на draw(_:) трябва да бъде идемпотентно — многократното извикване със същите параметри трябва да дава същия резултат.

Правила за ефективен draw(_:)

Apple препоръчва минимизиране на работата вътре в draw(_:) — създавайте UIBezierPath предварително, кеширайте изображения и не изпълнявайте тежки изчисления. Ако изгледът е статичен, обмислете използването на UIImageView с рендерирано изображение вместо постоянно прерисуване.

CALayer срещу draw(_:): кое да изберем

CALayer — е основният слой, който управлява визуалното съдържание на UIView. Много задачи за персонализирано рисуване могат да бъдат решени чрез конфигуриране на свойствата на CALayer без предефиниране на draw(_:), което е значително по-ефективно.

Според Apple Engineering (2024), операциите на ниво CALayer се изпълняват на GPU, докато draw(_:) работи чрез CPU рендериране на Core Graphics. За анимации и плавни преходи е за предпочитане използването на CALayer и CABasicAnimation.

Използвайте CAShapeLayer за рисуване на векторни фигури с анимация — той е хардуерно ускорен и поддържа анимация на path, strokeStart и strokeEnd без извикване на draw(_:).

Оптимизация на производителността на Custom UIView

Производителността на Custom UIView пряко влияе върху плавността на анимациите и цялостното потребителско изживяване на приложението. Основните проблеми възникват поради прекомерни извиквания на draw(_:), неоптимално подреждане на подизгледи и липса на кеширане.

Избягвайте ненужни прерисувания

Всяко извикване на setNeedsDisplay() води до пълно прерисуване на изгледа. Използвайте setNeedsDisplay(_:) с указване на конкретен правоъгълник, ако промените са засегнали само част от изгледа. За свойствата на CALayer (backgroundColor, cornerRadius, shadow) прерисуване не е необходимо — те се актуализират на ниво GPU.

Кеширане на рендерирано съдържание

Ако съдържанието на Custom UIView се променя рядко, рендерирайте го веднъж в UIGraphicsImageRenderer и го запазете като UIImage. При следващото прерисуване използвайте draw(at:) за показване на кешираното изображение — това е десетки пъти по-бързо от повторно рисуване чрез Core Graphics.

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

Използвайте shouldRasterize за статични слоеве

Свойството shouldRasterize на CALayer включва кеширане на растерното представяне на слоя. Включете го за статични изгледи с прозрачност и сенки — това намалява натоварването на композирането. Изключете го за анимирани изгледи: при всяка промяна кешът се нулира и растерзирането само влошава производителността.