Layer dans les applications mobiles — ce que c'est, types et fonctionnement

Qu'est-ce que Layer dans les graphiques mobiles ?

Layer est un objet de bas niveau du système graphique qui stocke une image bitmap d'un fragment d'écran et gère ses attributs visuels : position, taille, rotation, opacité, ombre et couleur. Dans iOS, chaque UIView a un CALayer intégré accessible via la propriété layer. Un développeur peut travailler directement avec la couche, en contournant UIView, pour un contrôle précis du rendu.

L'architecture des couches suit le modèle Model-View-Controller, où CALayer agit comme le Modèle — il stocke l'état des propriétés visuelles. Core Animation est le Contrôleur qui gère les transitions d'animation entre les états. View (UIView) est un wrapper optionnel qui ajoute la gestion tactile et la participation à Auto Layout.

Selon Apple WWDC 2024, le pipeline de rendu moderne d'iOS utilise Metal pour la composition des couches. Chaque CALayer est rendu dans un tampon séparé, après quoi Core Animation compose tous les tampons dans l'image finale, en tenant compte de l'opacité et des modes de fusion.

Dans Android, l'analogue des couches est View et Drawable d'arrière-plan, mais le travail direct avec les couches graphiques est disponible via Canvas et RenderNode dans Android 10+. Comprendre le concept de couche est important pour optimiser le rendu sur les deux plateformes.

Différence entre Layer et View

La principale différence réside dans le domaine de responsabilité. View gère les entrées utilisateur (touchers, gestes), le positionnement (Auto Layout, frame) et le cycle de vie. Layer est exclusivement responsable de la présentation visuelle : rendu du contenu, animation des propriétés et composition avec d'autres couches.

Cette séparation permet de mettre en cache la représentation bitmap de la couche indépendamment de la View. Si la couche ne change pas, Core Animation utilise l'image mise en cache sans appeler drawRect. Pour les éléments statiques, cela offre une augmentation significative des performances sans modification du code.

Principaux types de couches dans iOS et Android

iOS fournit une riche hiérarchie de classes héritant de CALayer. Chaque sous-classe est optimisée pour un scénario spécifique : affichage de texte, graphiques vectoriels, dégradés ou transformations 3D. Le choix du bon type de couche affecte directement les performances de rendu.

• CALayer — la couche de base pour les zones rectangulaires avec couleur de fond, bordure et ombre.
• CAShapeLayer — une couche pour rendre des formes vectorielles via CGPath. Le rendu est effectué sur le GPU sans créer de tampon séparé.
• CATextLayer — une couche pour afficher du texte avec rendu subpixel et mise en cache des glyphes.
• CAGradientLayer — une couche pour les dégradés linéaires et radiaux avec accélération matérielle.
• CAReplicatorLayer — une couche qui crée automatiquement des copies des couches enfants avec des décalages spécifiés.

Dans Android, le concept de couche est implémenté via RenderNode, ViewLayer et HardwareRenderer. À partir d'Android 5.0 (API 21), chaque View est rendue dans sa propre couche d'accélération matérielle, permettant des animations sans appeler onDraw.

Une flexibilité supplémentaire dans iOS est fournie par CAReplicatorLayer et CAEmitterLayer. Le premier est utilisé pour créer des motifs répétitifs, le second pour les systèmes de particules. Les deux fonctionnent exclusivement sur le GPU, permettant de créer des effets visuels complexes sans perte de performance.

Hiérarchie des couches et composition de scènes

La hiérarchie des couches dans iOS suit une structure arborescente : chaque CALayer peut contenir plusieurs sous-couches enfants. Toutes les transformations appliquées à la couche parent — échelle, rotation, translation — sont automatiquement appliquées aux éléments enfants. Cela garantit la cohérence visuelle pendant les animations.

La composition de la scène est effectuée par Core Animation dans l'ordre suivant : d'abord l'arrière-plan est rendu, puis chaque couche enfant dans l'ordre de bas en haut. Pour chaque couche, Core Animation vérifie les propriétés d'opacité, de masques et de modes de fusion, puis les compose dans l'image finale.

Selon Apple Documentation, la composition d'une couche avec opaque = true et sans canal alpha est effectuée sans passes supplémentaires — le GPU copie simplement les pixels sur la couche précédente. Si la couche a de la transparence, le GPU effectue un mélange alpha, ce qui nécessite des ressources de calcul supplémentaires.

Dans Android, la composition des couches est effectuée via SurfaceFlinger — un service système qui reçoit les tampons de chaque application et les compose selon l'ordre z. Chaque Window dans Android est une Surface séparée qui peut contenir plusieurs couches graphiques.

Masques et découpage de couches

CALayer.mask — une propriété qui permet d'appliquer un masque de forme arbitraire à une couche. Le masque peut être n'importe quel autre CALayer — par exemple, CAShapeLayer avec un chemin circulaire ou CAGradientLayer pour créer une transition douce d'opacité. L'utilisation de masques augmente la charge du GPU car elle nécessite une passe de rendu supplémentaire pour calculer les valeurs alpha de chaque pixel.

Pour un découpage rectangulaire simple, il est recommandé d'utiliser cornerRadius et masksToBounds. Contrairement aux masques via la propriété mask, cornerRadius est traité par le matériel au stade de la rastérisation et ne nécessite pas de passe supplémentaire.

Performance des couches : rendu et mise en cache

shouldRasterize est une propriété clé de CALayer pour l'optimisation des performances. Lorsque shouldRasterize est défini sur true, Core Animation rend la couche et toutes ses sous-couches dans un tampon hors écran séparé. Dans les images suivantes, l'image bitmap mise en cache est utilisée au lieu d'un nouveau rendu.

La mise en cache est efficace pour les couches statiques ou rarement modifiées : ombres, dégradés, texte avec coins arrondis. Cependant, pour les couches fréquemment mises à jour (animation, vidéo, défilement), la rastérisation peut dégrader les performances car chaque image nécessite une régénération du cache.

Selon une recherche de Objc.io, l'utilisation appropriée de shouldRasterize sur iPad Pro réduit le temps de rendu d'un écran complexe de 25 ms à 8 ms — plus de trois fois. La condition clé est que la couche ne doit pas changer plus d'une fois toutes les 3 à 5 images.

• Opaque = true — indique à Core Animation que la couche est opaque, éliminant le mélange alpha.
• drawsAsynchronously — active le rendu asynchrone pour les couches complexes sans bloquer le thread principal.
• allowsEdgeAntialiasing — active l'anticrénelage des bords pour les couches transformées mais augmente la charge du GPU.
• allowsGroupOpacity — contrôle l'opacité de groupe des couches enfants.

Exemples de travail avec les couches en Swift et Kotlin

Le premier exemple montre la configuration des propriétés visuelles de base de CALayer en Swift — coins arrondis, ombre et bordure :

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

Le deuxième exemple — création d'une animation de couche en Swift avec CABasicAnimation. La propriété position est animée sans intervention 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")

Le troisième exemple — travail avec RenderNode en Kotlin sur Android. RenderNode est un analogue direct de CALayer, permettant d'opérer avec des couches graphiques au niveau 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
}