CALayer : ce que c'est, concepts clés et rendu des couches

Qu'est-ce que CALayer ?

CALayer est une classe du framework QuartzCore qui gère une image bitmap d'une zone rectangulaire de l'écran. Elle stocke des propriétés visuelles : frame, backgroundColor, opacity, shadow, border, transform. Contrairement à UIView, CALayer ne gère pas les événements tactiles, ne participe pas à Auto Layout et n'a pas de cycle de vie de view controller.

Architecturalement, CALayer implémente le modèle Model dans le contexte de Core Animation. La couche stocke l'état des propriétés visuelles, tandis que Core Animation gère l'interpolation entre les états pendant l'animation. Cette séparation permet d'animer n'importe quelle propriété de la couche sans avoir à redessiner le contenu via drawRect.

Selon Apple WWDC 2024, CALayer a été réécrit pour fonctionner via Metal. Le pipeline de rendu moderne comprend trois étapes : Commit (mise à jour des propriétés sur le CPU), Render (génération de commandes GPU sur le CPU) et Composite (exécution des commandes sur le GPU). CALayer participe aux trois étapes, fournissant des données pour chacune.

Chaque couche peut contenir des sublayers — des couches filles qui se rendent au-dessus de la couche parente. La hiérarchie des couches reflète la hiérarchie UIView mais peut exister indépendamment d'elle. Les développeurs peuvent créer des couches indépendamment de UIView via CALayer() et les ajouter à la hiérarchie via addSublayer.

Différence entre CALayer et UIView

UIView est un wrapper autour de CALayer qui ajoute : la gestion tactile via UIResponder, la participation à Auto Layout, la représentation dans storyboard et l'intégration avec UIViewController. CALayer est un objet léger qui peut être utilisé sans UIView pour des éléments purement visuels.

En pratique, cela signifie que si un élément n'a pas besoin de gestion tactile ni de layout, il peut être implémenté comme CALayer. Par exemple, les animations d'arrière-plan, les indicateurs de chargement, les éléments décoratifs — tout cela est plus efficacement implémenté via CALayer, évitant la surcharge de UIView.

Propriétés principales de CALayer

Les propriétés de base de CALayer incluent le cadre, le positionnement, l'affichage et les effets visuels. frame définit la zone rectangulaire de la couche dans les coordonnées du parent, bounds définit les coordonnées internes, et position définit le centre de la couche. Le changement de position est animé par défaut via une animation implicite.

• backgroundColor — la couleur d'arrière-plan de la couche (CGColor). Définir une couleur opaque avec opaque = true élimine le mélange alpha.
• cornerRadius — l'arrondi des coins. Traité par le matériel sans passes de rendu supplémentaires.
• borderWidth et borderColor — la bordure de la couche. Rendu sur GPU, sans nécessiter drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — l'ombre. Un shadowPath explicite accélère considérablement le rendu.
• opacity — la transparence de la couche de 0.0 à 1.0. Animée sans appeler drawRect.
• transform — CATransform3D pour les transformations 2D et 3D. Prend en charge les distorsions de perspective.

La propriété contents permet de définir directement le contenu bitmap — via CGImage ou CIImage. C'est une alternative au dessin via drawRect : si l'image est déjà prête, elle peut être passée à contents, et Core Animation la rendra sans traitement supplémentaire.

Pour l'animation, CABasicAnimation, CAKeyframeAnimation et CATransition sont utilisés. Toutes ces classes fonctionnent via les key paths des propriétés de CALayer, permettant d'animer pratiquement n'importe quel attribut — de position à transform.rotation.z.

Sous-classes de CALayer et leur objectif

Apple fournit plusieurs sous-classes spécialisées de CALayer, chacune résolvant une tâche spécifique. Choisir la sous-classe appropriée plutôt que CALayer de base peut apporter des améliorations significatives des performances grâce à l'accélération matérielle.

• CAShapeLayer — rend les formes vectorielles (CGPath) sur le GPU. Ne nécessite pas de tampon séparé — la forme est rendue dans le cadre de la composition de la couche parente.
• CATextLayer — rendu de texte avec anti-crénelage sous-pixel. Met en cache les glyphes, accélérant l'affichage de texte répété.
• CAGradientLayer — dégradés linéaires et radiaux. Rendu matériel sans génération d'images intermédiaires.
• CAEmitterLayer — système de particules sur le GPU. Chaque particule est rendue comme un élément séparé sans intervention du CPU.
• CAReplicatorLayer — création automatique de copies de couches filles avec des décalages configurables en position, couleur et temps.
• CATiledLayer — rendu de grandes images par tuiles. Charge et affiche uniquement les fragments visibles.

CAReplicatorLayer est particulièrement utile pour créer des motifs répétitifs sans duplication de code. Par exemple, un indicateur de chargement à 10 points est implémenté avec un seul CAReplicatorLayer utilisant instanceCount = 10 et un décalage temporel d'animation instanceDelay.

Rendu et composition de CALayer

Le rendu de CALayer se déroule en trois phases. Commit — lorsqu'une propriété de couche change, un lot de modifications est formé sur le CPU. Render — Core Animation génère des commandes Metal sur le CPU en fonction des propriétés de la couche. Composite — le GPU exécute les commandes et affiche l'image à l'écran. L'ensemble du processus est synchronisé avec la fréquence de rafraîchissement de l'écran.

Lors de la composition de plusieurs couches, le GPU les fusionne en une image finale en tenant compte de la transparence, des masques et des modes de fusion. Si une couche a opaque = true, Core Animation optimise la composition : au lieu du mélange alpha, un simple remplacement de pixels est effectué, ce qui est considérablement plus rapide.

Selon les Apple Performance Guidelines, les principaux facteurs ralentissant le rendu de CALayer sont : une hiérarchie complexe de sublayers (plus de 30 couches à l'écran), l'utilisation de masques (propriété mask), le calcul automatique d'ombre sans shadowPath et l'utilisation excessive de shouldRasterize pour les couches dynamiques.

L'instrument Core Animation dans XCode permet de surveiller le temps de rendu de chaque couche, le nombre de tampons hors écran et la fréquence des appels drawRect. Le temps de rendu optimal pour 60 FPS ne dépasse pas 8 ms sur le CPU et 8 ms sur le GPU.

Rendu hors écran et son impact

Rendu hors écran — rendu d'une couche dans un tampon intermédiaire avant de l'afficher à l'écran. Se produit lors de l'utilisation de cornerRadius + masksToBounds avec contenu, d'opacité de groupe, de masques et de shouldRasterize. Chaque passage hors écran prend 2 à 5 ms, donc les rendus hors écran excessifs sont critiques pour les performances.

Pour diagnostiquer le rendu hors écran, utilisez l'outil Color Offscreen-Rendered dans l'instrument Core Animation. Les couches jaunes sont hors écran, les bleues sont un rendu direct à l'écran. Minimiser les passages hors écran est une technique d'optimisation clé dans iOS.

Exemples de code : travailler avec CALayer en Swift

Le premier exemple montre la configuration de base de CALayer avec création d'ombre, arrondi des coins et bordure. shadowPath est spécifié explicitement pour accélérer le rendu :

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

Le deuxième exemple montre une animation de transform via CABasicAnimation avec une transformation 3D en perspective. L'animation de rotation sur l'axe Y crée un effet de retournement de carte :

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

Le troisième exemple montre l'utilisation de CAGradientLayer pour créer un dégradé d'arrière-plan. Le dégradé est rendu sur le GPU et ne nécessite pas de ressources supplémentaires lors du redimensionnement :

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}