Layer en aplicaciones móviles — qué es, tipos y cómo funciona

¿Qué es Layer en gráficos móviles?

Layer es un objeto de bajo nivel del sistema gráfico que almacena una imagen de mapa de bits de un fragmento de pantalla y gestiona sus atributos visuales: posición, tamaño, rotación, opacidad, sombra y color. En iOS, cada UIView tiene un CALayer incorporado accesible a través de la propiedad layer. El desarrollador puede trabajar directamente con la capa, sin pasar por UIView, para un control detallado del renderizado.

La arquitectura de capas sigue el patrón Modelo-Vista-Controlador, donde CALayer actúa como el Modelo — almacena el estado de las propiedades visuales. Core Animation es el Controlador que gestiona las transiciones de animación entre estados. View (UIView) es un envoltorio opcional que añade manejo táctil y participación en Auto Layout.

Según Apple WWDC 2024, el pipeline de renderizado moderno de iOS utiliza Metal para la composición de capas. Cada CALayer se renderiza en un búfer separado, después de lo cual Core Animation compone todos los búferes en la imagen final, teniendo en cuenta la opacidad y los modos de mezcla.

En Android, el análogo de las capas son View y Drawable de fondo, pero el trabajo directo con capas gráficas está disponible a través de Canvas y RenderNode en Android 10+. Comprender el concepto de capa es importante para optimizar el renderizado en ambas plataformas.

Diferencia entre Layer y View

La principal diferencia radica en el área de responsabilidad. View maneja la entrada del usuario (toques, gestos), el posicionamiento (Auto Layout, frame) y el ciclo de vida. Layer es exclusivamente responsable de la presentación visual: renderizado de contenido, animación de propiedades y composición con otras capas.

Esta separación permite almacenar en caché la representación de mapa de bits de la capa independientemente de la View. Si la capa no cambia, Core Animation utiliza el fotograma en caché sin llamar a drawRect. Para elementos estáticos, esto proporciona un aumento significativo del rendimiento sin cambios en el código.

Principales tipos de capas en iOS y Android

iOS proporciona una rica jerarquía de clases que heredan de CALayer. Cada subclase está optimizada para un escenario específico: visualización de texto, gráficos vectoriales, degradados o transformaciones 3D. Elegir el tipo de capa correcto afecta directamente al rendimiento del renderizado.

• CALayer — la capa base para áreas rectangulares con color de fondo, borde y sombra.
• CAShapeLayer — una capa para renderizar formas vectoriales a través de CGPath. El renderizado se realiza en la GPU sin crear un búfer separado.
• CATextLayer — una capa para mostrar texto con renderizado subpíxel y almacenamiento en caché de glifos.
• CAGradientLayer — una capa para degradados lineales y radiales con aceleración por hardware.
• CAReplicatorLayer — una capa que crea automáticamente copias de las capas hijas con desplazamientos especificados.

En Android, el concepto de capa se implementa a través de RenderNode, ViewLayer y HardwareRenderer. A partir de Android 5.0 (API 21), cada View se renderiza en su propia capa de aceleración por hardware, permitiendo animaciones sin llamar a onDraw.

Flexibilidad adicional en iOS la proporcionan CAReplicatorLayer y CAEmitterLayer. El primero se utiliza para crear patrones repetitivos, el segundo para sistemas de partículas. Ambos funcionan exclusivamente en la GPU, permitiendo crear efectos visuales complejos sin pérdida de rendimiento.

Jerarquía de capas y composición de escenas

La jerarquía de capas en iOS sigue una estructura de árbol: cada CALayer puede contener múltiples subcapas hijas. Todas las transformaciones aplicadas a la capa principal — escala, rotación, traslación — se aplican automáticamente a los elementos hijos. Esto garantiza la consistencia visual durante las animaciones.

La composición de la escena la realiza Core Animation en el siguiente orden: primero se renderiza el fondo, luego cada capa hija en orden de abajo hacia arriba. Para cada capa, Core Animation verifica las propiedades de opacidad, máscaras y modos de mezcla, y luego las compone en el fotograma final.

Según Apple Documentation, la composición de una capa con opaque = true y sin canal alfa se realiza sin pasos adicionales — la GPU simplemente copia píxeles sobre la capa anterior. Si la capa tiene transparencia, la GPU realiza la mezcla alfa, lo que requiere recursos computacionales adicionales.

En Android, la composición de capas se realiza a través de SurfaceFlinger — un servicio del sistema que recibe búferes de cada aplicación y los compone según el orden z. Cada Window en Android es una Surface separada que puede contener múltiples capas gráficas.

Máscaras y recorte de capas

CALayer.mask — una propiedad que permite aplicar una máscara de forma arbitraria a una capa. La máscara puede ser cualquier otro CALayer — por ejemplo, CAShapeLayer con un path circular o CAGradientLayer para crear una transición suave de opacidad. El uso de máscaras aumenta la carga de la GPU, ya que requiere un paso de renderizado adicional para calcular los valores alfa de cada píxel.

Para recortes rectangulares simples, se recomienda usar cornerRadius y masksToBounds. A diferencia de las máscaras a través de la propiedad mask, cornerRadius se maneja por hardware en la etapa de rasterización y no requiere un paso adicional.

Rendimiento de capas: renderizado y almacenamiento en caché

shouldRasterize es una propiedad clave de CALayer para la optimización del rendimiento. Cuando shouldRasterize se establece en true, Core Animation renderiza la capa y todas sus subcapas en un búfer fuera de pantalla separado. En fotogramas posteriores, se utiliza la imagen de mapa de bits en caché en lugar de volver a renderizar.

El almacenamiento en caché es efectivo para capas estáticas o que cambian raramente: sombras, degradados, texto con esquinas redondeadas. Sin embargo, para capas que se actualizan con frecuencia (animación, video, desplazamiento), la rasterización puede degradar el rendimiento, ya que cada fotograma requiere regenerar la caché.

Según una investigación de Objc.io, el uso adecuado de shouldRasterize en iPad Pro reduce el tiempo de renderizado de una pantalla compleja de 25 ms a 8 ms — más de tres veces. La condición clave es que la capa no debe cambiar más de una vez cada 3–5 fotogramas.

• Opaque = true — indica a Core Animation que la capa es opaca, eliminando la mezcla alfa.
• drawsAsynchronously — habilita el renderizado asíncrono para capas complejas sin bloquear el hilo principal.
• allowsEdgeAntialiasing — habilita el suavizado de bordes para capas transformadas, pero aumenta la carga de la GPU.
• allowsGroupOpacity — controla la opacidad de grupo de las capas hijas.

Ejemplos de trabajo con capas en Swift y Kotlin

El primer ejemplo demuestra la configuración de propiedades visuales básicas de CALayer en Swift — esquinas redondeadas, sombra y borde:

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

El segundo ejemplo — crear una animación de capa en Swift usando CABasicAnimation. La propiedad position se anima sin intervención de UIView:

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

El tercer ejemplo — trabajar con RenderNode en Kotlin en Android. RenderNode es un análogo directo de CALayer, que permite operar con capas gráficas a nivel de Canvas:

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}