Custom UIView: qué es, creación y sobrescritura de drawRect

Qué es Custom UIView y cuándo se necesita

Custom UIView es una clase definida por el usuario que hereda de UIView, en la que el desarrollador sobrescribe métodos estándar para implementar lógica de visualización e interacción personalizada. UIKit incluye muchos componentes integrados, pero no cubren todos los escenarios: gráficos animados, interruptores personalizados, lienzo de dibujo a mano alzada, elementos de juego o visualización de datos requieren una implementación personalizada.

Apple recomienda crear un Custom UIView cuando los componentes estándar no pueden proporcionar la funcionalidad requerida o cuando el mismo elemento personalizado se utiliza en varios lugares de la aplicación. Según WWDC 2024, las vistas personalizadas constituyen en promedio el 15-20% de todos los UIView en un proyecto de tamaño mediano.

Casos de uso típicos

Custom UIView se utiliza para construir gráficos y diagramas (dibujo de líneas y formas con Core Graphics), indicadores de progreso personalizados, fondos animados, elementos de dibujo con el dedo y visualización de datos en tiempo real. En cada uno de estos casos, el desarrollador obtiene acceso completo a CGContext y puede dibujar cualquier geometría.

Cuándo no se necesita Custom UIView

Si un elemento se puede ensamblar a partir de componentes UIKit estándar (UIButton, UIImageView, UILabel) usando Auto Layout y configuración de propiedades, crear una subclase de UIView es excesivo. Apple recomienda probar primero la composición de vistas prefabricadas y solo pasar al dibujo personalizado cuando la funcionalidad sea insuficiente.

Cómo crear un Custom UIView en Xcode

La creación de un UIView personalizado comienza con la declaración de una clase que hereda de UIView y la implementación de los inicializadores requeridos. La implementación mínima incluye init(frame:) para crear desde código e init(coder:) para cargar desde Storyboard o 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
    }
}

En el método setupView() se establecen las propiedades iniciales: fondo transparente, configuraciones de capa. Si la vista se mostrará en Interface Builder, vale la pena agregar @IBDesignable y @IBInspectable para vista previa en vivo.

Métodos del ciclo de vida de UIView

Custom UIView es gestionado por el sistema a través de una secuencia de métodos del ciclo de vida que se llaman en un orden específico. Comprender este ciclo es críticamente importante para la configuración y el dibujo correctos de la vista.

Todos los métodos son llamados automáticamente por el sistema y el desarrollador no necesita llamarlos manualmente. La excepción es setNeedsDisplay(), que señala al sistema la necesidad de volver a llamar a draw(_:).

Sobrescritura de draw(_:) para dibujo

draw(_:) es el método clave para el dibujo personalizado en Custom UIView. Dentro de él, el desarrollador obtiene acceso a CGContext (contexto gráfico) y puede dibujar líneas, formas, texto e imágenes mediante Core Graphics.

El sistema llama a draw(_:) automáticamente cuando la vista aparece por primera vez en pantalla. Una llamada posterior se desencadena mediante setNeedsDisplay(), que marca la vista como necesitada de redibujado. Importante: no llame a draw(_:) directamente — esto rompe el mecanismo de caché y reduce el rendimiento.

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

    // Relleno de fondo
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // Dibujar un círculo
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

En este ejemplo, draw(_:) rellena el fondo con color azul y dibuja un círculo blanco con un margen de 20 píxeles desde los bordes. Cada llamada a draw(_:) debe ser idempotente — múltiples llamadas con los mismos parámetros deben producir el mismo resultado.

Reglas para un draw(_:) eficaz

Apple recomienda minimizar el trabajo dentro de draw(_:) — cree UIBezierPath con anticipación, guarde en caché las imágenes y no realice cálculos pesados. Si la vista es estática, considere usar UIImageView con una imagen renderizada en lugar de redibujar constantemente.

CALayer vs draw(_:): cuál elegir

CALayer es la capa subyacente que gestiona el contenido visual de UIView. Muchas tareas de dibujo personalizado se pueden resolver configurando las propiedades de CALayer sin sobrescribir draw(_:), lo que es significativamente más eficiente.

Según Apple Engineering (2024), las operaciones a nivel de CALayer se ejecutan en la GPU, mientras que draw(_:) funciona mediante renderizado Core Graphics basado en CPU. Para animaciones y transiciones suaves, es preferible usar CALayer y CABasicAnimation.

Use CAShapeLayer para dibujar formas vectoriales con animación — está acelerado por hardware y admite animación de path, strokeStart y strokeEnd sin llamar a draw(_:).

Optimización del rendimiento de Custom UIView

El rendimiento de Custom UIView afecta directamente la suavidad de las animaciones y la experiencia general del usuario. Los principales problemas surgen de llamadas excesivas a draw(_:), disposición subóptima de subvistas y falta de almacenamiento en caché.

Evite redibujados innecesarios

Cada llamada a setNeedsDisplay() provoca un redibujado completo de la vista. Use setNeedsDisplay(_:) con un rectángulo específico si los cambios solo afectaron a una parte de la vista. Para propiedades de CALayer (backgroundColor, cornerRadius, shadow), no se requiere redibujado — se actualizan a nivel de GPU.

Almacenamiento en caché del contenido renderizado

Si el contenido de Custom UIView cambia con poca frecuencia, renderícelo una vez en UIGraphicsImageRenderer y guárdelo como UIImage. En el próximo redibujado, use draw(at:) para mostrar la imagen en caché — esto es decenas de veces más rápido que volver a renderizar mediante Core Graphics.

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

Use shouldRasterize para capas estáticas

La propiedad shouldRasterize en CALayer activa el almacenamiento en caché de la representación en mapa de bits de la capa. Actívela para vistas estáticas con transparencia y sombras — esto reduce la carga de composición. Desactívela para vistas animadas: la caché se restablece en cada cambio y la rasterización solo degrada el rendimiento.