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 для live-превью.

Методы жизненного цикла 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 }

    // Background fill
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Drawing a circle
    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 включает кэширование растрового представления слоя. Включайте его для статичных вью с прозрачностью и тюнингом — это снижает нагрузку на композитинг. Отключайте для анимированных вью: при каждом изменении кэш сбрасывается, и растеризация только ухудшает производительность.