Layer em aplicações móveis — o que é, tipos e como funciona

O que é Layer em gráficos móveis?

Layer é um objeto de baixo nível do sistema gráfico que armazena uma imagem bitmap de um fragmento de tela e gerencia seus atributos visuais: posição, tamanho, rotação, opacidade, sombra e cor. Em iOS, cada UIView tem um CALayer embutido acessível através da propriedade layer. Um desenvolvedor pode trabalhar diretamente com a camada, ignorando UIView, para um controle refinado da renderização.

A arquitetura de camadas segue o padrão Model-View-Controller, onde CALayer atua como o Modelo — armazena o estado das propriedades visuais. Core Animation é o Controlador que gerencia as transições de animação entre estados. View (UIView) é um invólucro opcional que adiciona manipulação de toque e participação em Auto Layout.

De acordo com Apple WWDC 2024, o pipeline de renderização moderno do iOS utiliza Metal para composição de camadas. Cada CALayer é renderizado num buffer separado, após o qual Core Animation compõe todos os buffers na imagem final, tendo em conta a opacidade e os modos de mistura.

Em Android, o análogo de camadas é View e Drawable de fundo, mas o trabalho direto com camadas gráficas está disponível através de Canvas e RenderNode no Android 10+. Compreender o conceito de camada é importante para otimizar a renderização em ambas as plataformas.

Diferença entre Layer e View

A principal diferença reside na área de responsabilidade. View lida com entrada do utilizador (toques, gestos), posicionamento (Auto Layout, frame) e ciclo de vida. Layer é exclusivamente responsável pela apresentação visual: renderização de conteúdo, animação de propriedades e composição com outras camadas.

Esta separação permite armazenar em cache a representação bitmap da camada independentemente da View. Se a camada não mudar, Core Animation utiliza o frame em cache sem chamar drawRect. Para elementos estáticos, isto proporciona um aumento significativo de desempenho sem alterações de código.

Principais tipos de camadas em iOS e Android

iOS fornece uma rica hierarquia de classes que herdam de CALayer. Cada subclasse é otimizada para um cenário específico: exibição de texto, gráficos vetoriais, gradientes ou transformações 3D. Escolher o tipo de camada correto afeta diretamente o desempenho da renderização.

• CALayer — a camada base para áreas retangulares com cor de fundo, borda e sombra.
• CAShapeLayer — uma camada para renderizar formas vetoriais através de CGPath. A renderização é realizada na GPU sem criar um buffer separado.
• CATextLayer — uma camada para exibir texto com renderização subpixel e cache de glifos.
• CAGradientLayer — uma camada para gradientes lineares e radiais com aceleração por hardware.
• CAReplicatorLayer — uma camada que cria automaticamente cópias das camadas filhas com deslocamentos especificados.

Em Android, o conceito de camada é implementado através de RenderNode, ViewLayer e HardwareRenderer. A partir do Android 5.0 (API 21), cada View é renderizado na sua própria camada de aceleração por hardware, permitindo animações sem chamar onDraw.

Flexibilidade adicional em iOS é fornecida por CAReplicatorLayer e CAEmitterLayer. O primeiro é usado para criar padrões repetitivos, o segundo para sistemas de partículas. Ambos funcionam exclusivamente na GPU, permitindo criar efeitos visuais complexos sem perda de desempenho.

Hierarquia de camadas e composição de cenas

A hierarquia de camadas em iOS segue uma estrutura de árvore: cada CALayer pode conter múltiplas subcamadas filhas. Todas as transformações aplicadas à camada pai — escala, rotação, translação — são automaticamente aplicadas aos elementos filhos. Isto garante consistência visual durante as animações.

A composição da cena é realizada pelo Core Animation na seguinte ordem: primeiro o fundo é renderizado, depois cada camada filha por ordem de baixo para cima. Para cada camada, Core Animation verifica as propriedades de opacidade, máscaras e modos de mistura, depois compõe-nas no frame final.

De acordo com Apple Documentation, a composição de uma camada com opaque = true e sem canal alfa é feita sem passos adicionais — a GPU simplesmente copia pixels sobre a camada anterior. Se a camada tiver transparência, a GPU realiza mistura alfa, o que requer recursos computacionais adicionais.

Em Android, a composição de camadas é realizada através do SurfaceFlinger — um serviço de sistema que recebe buffers de cada aplicação e os compõe de acordo com a ordem z. Cada Window em Android é uma Surface separada que pode conter múltiplas camadas gráficas.

Máscaras e recorte de camadas

CALayer.mask — uma propriedade que permite aplicar uma máscara de forma arbitrária a uma camada. A máscara pode ser qualquer outro CALayer — por exemplo, CAShapeLayer com um caminho circular ou CAGradientLayer para criar uma transição suave de opacidade. Usar máscaras aumenta a carga da GPU, pois requer um passo de renderização adicional para calcular os valores alfa de cada pixel.

Para recorte retangular simples, recomenda-se usar cornerRadius e masksToBounds. Ao contrário de máscaras através da propriedade mask, cornerRadius é processado por hardware na fase de rasterização e não requer um passo adicional.

Desempenho de camadas: renderização e cache

shouldRasterize é uma propriedade chave de CALayer para otimização de desempenho. Quando shouldRasterize é definido como true, Core Animation renderiza a camada e todas as suas subcamadas num buffer offscreen separado. Em frames subsequentes, a imagem bitmap em cache é usada em vez de re-renderizar.

O cache é eficaz para camadas estáticas ou que raramente mudam: sombras, gradientes, texto com cantos arredondados. No entanto, para camadas atualizadas frequentemente (animação, vídeo, rolagem), a rasterização pode degradar o desempenho, pois cada frame requer regeneração do cache.

De acordo com pesquisa da Objc.io, o uso adequado de shouldRasterize no iPad Pro reduz o tempo de renderização de um ecrã complexo de 25 ms para 8 ms — mais de três vezes. A condição chave é que a camada não deve mudar mais do que uma vez a cada 3–5 frames.

• Opaque = true — informa Core Animation que a camada é opaca, eliminando a mistura alfa.
• drawsAsynchronously — ativa a renderização assíncrona para camadas complexas sem bloquear a thread principal.
• allowsEdgeAntialiasing — ativa o anti-aliasing de bordas para camadas transformadas, mas aumenta a carga da GPU.
• allowsGroupOpacity — controla a opacidade de grupo das camadas filhas.

Exemplos de trabalho com camadas em Swift e Kotlin

O primeiro exemplo demonstra a configuração de propriedades visuais básicas de CALayer em Swift — cantos arredondados, sombra e borda:

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
    }
}

O segundo exemplo — criar uma animação de camada em Swift usando CABasicAnimation. A propriedade position é animada sem envolvimento 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")

O terceiro exemplo — trabalhar com RenderNode em Kotlin no Android. RenderNode é um análogo direto de CALayer, permitindo operar com camadas gráficas ao nível do 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
}