Custom UIView: шта је то, креирање и преоптерећење drawRect-а

Шта је Custom UIView и када је потребан

Custom UIView — је корисничка класа која наслеђује UIView, у којој програмер преоптерећује стандардне методе за имплементацију сопствене логике приказа и интеракције. UIKit садржи много готових компоненти, али one не покривају све сценарије: анимирани графикони, нестандардни прекидачи, платно за цртање руком, гејминг елементи или визуелизација података захтевају прилагођену имплементацију.

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-а укључује кеширање растерске репрезентације слоја. Укључите га за статичне приказе са провидношћу и сенкама — смањује оптерећење композитинга. Искључите га за анимиране приказе: при свакој промени кеш се ресетује, а растерзација само погоршава перформансе.