Vistas personalizadas y dibujo en el desarrollo móvil: concepto, qué API y cómo funciona

Qué son las vistas personalizadas y por qué se necesitan en aplicaciones móviles

Las vistas personalizadas son componentes de interfaz definidos por el usuario que sobrescriben los métodos estándar de dibujo y medición para crear gráficos únicos. Gráficos, animaciones, diagramas, elementos de chat personalizados y máscaras AR — son escenarios típicos de uso de vistas personalizadas en aplicaciones móviles. Los componentes de UI estándar (Button, TextView, Label) cubren el 80% de las tareas, pero el 20% restante requiere control total sobre el dibujo en el desarrollo móvil. El dibujo en el desarrollo móvil es una habilidad que diferencia a un desarrollador junior de un senior.

Cuándo están justificadas las vistas personalizadas

Las vistas personalizadas en aplicaciones móviles son necesarias para gráficos 2D únicos, animaciones complejas, gráficos estadísticos y visualización de datos. Si el UIKit estándar no proporciona el elemento necesario — se crea una vista personalizada. En aplicaciones móviles, las vistas personalizadas se usan para barras de progreso, botones personalizados, rellenos degradados, iconos animados y lienzos para dibujar con el dedo. Es importante no abusar — para estilos simples basta con configurar los componentes estándar mediante la API de apariencia.

Vistas personalizadas en iOS: drawRect y Core Graphics

En iOS, las vistas personalizadas se crean heredando de UIView y sobrescribiendo el método drawRect. drawRect se llama en el primer renderizado y después de cada llamada a setNeedsDisplay(). Dentro de drawRect, el desarrollador obtiene un CGContext mediante UIGraphicsGetCurrentContext() — un lienzo para líneas, formas, degradados y texto. Core Graphics (Quartz 2D) es un motor de renderizado de bajo nivel en CPU que ofrece control total sobre cada píxel. UIBezierPath es un envoltorio conveniente para crear rutas con sintaxis concisa.

class CircleView: UIView {
    private var fillColor: UIColor = .systemBlue

    override func drawRect(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }
        ctx.setFillColor(fillColor.cgColor)
        ctx.addEllipse(in: bounds.insetBy(dx: 4, dy: 4))
        ctx.drawPath(using: .fill)
    }

    func updateColor(_ newColor: UIColor) {
        fillColor = newColor
        setNeedsDisplay()
    }
}

Core Graphics: CGContext, CGGradient y transformaciones

Core Graphics proporciona CGContext — un lienzo para todas las operaciones de dibujo. CGGradient crea degradados lineales y radiales con soporte de CGColorSpace (sRGB, Display P3). Las transformaciones se realizan mediante CGAffineTransform — una matriz 3x3 para rotación, escalado y desplazamiento. CGContextTranslateCTM, CGContextRotateCTM y CGContextScaleCTM modifican el sistema de coordenadas. Core Graphics funciona en CPU, por lo que los gráficos complejos pueden cargar el procesador — use Metal para aceleración GPU.

UIBezierPath para crear formas

UIBezierPath es un envoltorio orientado a objetos sobre CGPath. El método addArc(withCenter:radius:startAngle:endAngle:clockwise:) crea arcos y círculos, addCurve crea curvas Bézier. Las rutas admiten operaciones de unión, intersección y sustracción mediante addClip. UIBezierPath es conveniente para máscaras personalizadas (maskView), contornos de recorte y formas complejas — estrellas, corazones, iconos personalizados.

Vistas personalizadas en Android: onDraw y Canvas

En Android, una vista personalizada hereda de View con onDraw(Canvas) sobrescrito. Canvas contiene todos los métodos de dibujo en el desarrollo móvil: drawCircle, drawRect, drawLine, drawText, drawBitmap, drawPath y drawRoundRect. Paint configura los parámetros — color, grosor de línea, estilo (FILL, STROKE, FILL_AND_STROKE), suavizado (isAntiAlias) y tamaño de texto. onDraw se llama cada vez en invalidate() y no debe contener operaciones pesadas — todos los cálculos se almacenan en caché.

class CustomCircleView(context: Context, attrs: AttributeSet?)
    : View(context, attrs) {

    private val paint = Paint().apply {
        style = Paint.Style.FILL
        color = Color.BLUE
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val cx = width / 2f
        val cy = height / 2f
        val radius = minOf(cx, cy) - 4f
        canvas.drawCircle(cx, cy, radius, paint)
    }
}

Path y animaciones en Android

Path en Android es el equivalente de UIBezierPath: addCircle, addRect, addOval, lineTo, cubicTo y quadTo. PathMeasure calcula la longitud de la ruta y las coordenadas en cualquier punto — útil para animar el movimiento de un objeto a lo largo de una ruta. Para animaciones se usa ValueAnimator con invalidate() en el callback. El animador puede cambiar color, radio, posición — cualquier propiedad que afecte al dibujo. Las vistas personalizadas en Android también admiten StateListDrawable y animated-vector para animación mediante XML.

Shader y degradados en Canvas

Los degradados en Android se definen mediante Shader — LinearGradient, RadialGradient y SweepGradient. Shader se asigna a Paint mediante paint.setShader(shader). LinearGradient genera un degradado lineal entre dos puntos con posiciones de color opcionales. RadialGradient — radial desde el centro hacia los bordes. SweepGradient — cónico alrededor de un punto central. Shader.TileMode (CLAMP, REPEAT, MIRROR) define el comportamiento fuera de los límites del área.

CustomPainter en Flutter: dibujo en Canvas

Flutter usa CustomPainter — una clase con los métodos paint(Canvas canvas, Size size) y shouldRepaint. Canvas en Flutter proporciona los mismos métodos que en Android: drawCircle, drawRect, drawLine, drawPath, drawParagraph y drawImage. Paint en Flutter configura color, grosor, estilo y suavizado. Flutter no usa drawRect ni onDraw — todo el dibujo se realiza mediante CustomPainter, integrado en el widget CustomPaint.

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill
      ..isAntiAlias = true;
    final radius = size.shortestSide / 2 - 4;
    canvas.drawCircle(size.center(Offset.zero), radius, paint);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

shouldRepaint y RepaintBoundary

shouldRepaint determina si es necesario volver a dibujar el CustomPainter. Devuelva true solo cuando cambien los datos que afectan al renderizado — color, tamaño, datos del gráfico. RepaintBoundary aísla el redibujado en una capa separada — úselo para widgets que cambian con poca frecuencia. En Flutter no hay setNeedsDisplay ni invalidate — el redibujado se activa mediante setState o ValueNotifier con escucha de cambios.

Gradientes y transformaciones en Flutter

Flutter admite LinearGradient, RadialGradient y SweepGradient — los mismos tipos que en Android. Gradient crea un Shader para Paint mediante createShader(Rect bounds). Las transformaciones se realizan con canvas.rotate, canvas.scale, canvas.translate y canvas.skew. Flutter usa una matriz de transformación 4x4 (Matrix4) para el widget Transform. Las animaciones de dibujo en Flutter se hacen con AnimationController junto con setState para redibujar CustomPainter.

Medición de vistas personalizadas: métodos sizeThatFits, onMeasure y computeDryLayout

La medición correcta de las vistas personalizadas es la base del comportamiento predecible de la interfaz. En iOS, el tamaño de la View se determina mediante sizeThatFits e intrinsicContentSize. sizeThatFits devuelve el tamaño óptimo para las restricciones dadas. intrinsicContentSize — el tamaño natural del contenido sin restricciones externas. En Android, la medición se implementa en onMeasure con parámetros MeasureSpec (UNSPECIFIED, EXACTLY, AT_MOST). En Flutter, el tamaño se pasa a paint(Canvas, Size) y se puede calcular mediante computeDryLayout o LayoutBuilder.

sizeThatFits e intrinsicContentSize en iOS

intrinsicContentSize devuelve un CGSize — el tamaño natural de la View basado en su contenido. setContentHuggingPriority y setContentCompressionResistancePriority controlan el comportamiento durante el estiramiento y la compresión. sizeThatFits es llamado por el sistema para calcular el tamaño en Auto Layout. Para vistas personalizadas, sobrescriba intrinsicContentSize si su componente tiene un tamaño natural — por ejemplo, un círculo siempre debe ser 100x100.

onMeasure y MeasureSpec en Android

onMeasure acepta widthMeasureSpec y heightMeasureSpec. MeasureSpec contiene modo y tamaño: UNSPECIFIED (sin restricciones, la View elige su tamaño), EXACTLY (tamaño exacto del padre), AT_MOST (tamaño máximo). setMeasuredDimension(width, height) guarda el resultado de la medición. Al cambiar los datos, llame a requestLayout() para volver a medir. Los ViewGroup anidados requieren sobrescribir onLayout para la disposición de los elementos hijos.

computeDryLayout en Flutter

computeDryLayout es un método de RenderObject para calcular el tamaño sin un ciclo completo de diseño. LayoutBuilder.getSize — una alternativa para obtener el espacio disponible en el método build. En Flutter, el tamaño del lienzo se pasa a paint como Size y no requiere medición separada — CustomPainter dibuja dentro de los límites pasados. Sin embargo, para RenderObject personalizados, es necesario sobrescribir performLayout y computeDryLayout.