Swift Academy · Leçon

Fondamentaux de CALayer

Travaillez avec les calques, leurs propriétés et leur hiérarchie.

Fondamentaux de CALayer est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Qu’est-ce qu’un CALayer ?

CALayer est la structure de stockage sous-jacente à tout ce que vous voyez dans UIKit. Chaque UIView est dessiné par un layer qui conserve son contenu visuel sous forme de texture sur le GPU.

Travailler directement avec les couches permet d’exploiter les graphismes et les animations accélérés par le matériel.

import UIKit
let layer = CALayer()

Les couches derrière les vues

Chaque vue possède une propriété layer. Définir les propriétés d’un layer est souvent plus simple et moins coûteux qu’un dessin personnalisé.

view.layer.cornerRadius = 12
view.layer.masksToBounds = true

Géométrie : cadre, limites et position

Un layer possède des bounds, qui définissent son propre espace de coordonnées, une position, qui indique où se trouve son point d’ancrage dans le parent, et un frame calculé. Modifier l’un de ces éléments met à jour les autres.

let layer = CALayer()
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.position = CGPoint(x: 150, y: 150)

Le point d’ancrage

anchorPoint, dont la valeur par défaut est 0,5, 0,5, c’est-à-dire le centre, définit l’origine du layer pour le positionnement et les transformations. Les rotations et les mises à l’échelle s’effectuent autour de ce point.

layer.anchorPoint = CGPoint(x: 0, y: 0) // top-left pivot

Propriétés visuelles

Les couches exposent directement plusieurs styles visuels : backgroundColor, une CGColor, cornerRadius, borderWidth, borderColor et opacity.

layer.backgroundColor = UIColor.systemBlue.cgColor
layer.cornerRadius = 8
layer.borderWidth = 2
layer.borderColor = UIColor.white.cgColor

Ombres

Les couches dessinent des ombres avec shadowColor, shadowOpacity, shadowOffset et shadowRadius. Définissez un shadowPath pour améliorer les performances.

layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 6

Sous-couches

Les couches forment une arborescence. Ajoutez des enfants avec addSublayer ; ils sont positionnés dans l’espace de coordonnées du parent.

let parent = CALayer()
let child = CALayer()
child.frame = CGRect(x: 10, y: 10, width: 40, height: 40)
parent.addSublayer(child)

Types de couches spécialisés

UIKit fournit plusieurs sous-classes de couches : CAShapeLayer pour les chemins vectoriels, CAGradientLayer pour les dégradés, CATextLayer pour le texte et CAReplicatorLayer pour les enfants dupliqués.

let shape = CAShapeLayer()
shape.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 50, height: 50)).cgPath
shape.fillColor = UIColor.systemRed.cgColor

Couches de dégradé

CAGradientLayer produit des transitions douces entre les couleurs, définies par colors, locations, startPoint et endPoint.

let gradient = CAGradientLayer()
gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)

Échelle du contenu et netteté

Définissez contentsScale sur l’échelle de l’écran afin que le contenu dessiné par les couches reste net sur les écrans Retina. Si vous l’oubliez, le texte et les formes seront flous.

layer.contentsScale = UIScreen.main.scale

Les couches sont légères

Les couches ne gèrent ni les événements tactiles ni Auto Layout ; ce sont de purs objets visuels. Elles sont donc moins coûteuses que les vues pour le contenu décoratif ou animé.

Vérification rapide : CALayer

Vérifiez votre compréhension des principes fondamentaux de CALayer.

Récapitulatif : principes fondamentaux de CALayer

CALayer est à la base de chaque vue UIKit et fournit des éléments visuels accélérés par le GPU : une géométrie composée de bounds, position et anchorPoint, des styles comme le rayon des angles, les bordures et les ombres, ainsi qu’une arborescence de sous-couches.

Les sous-classes spécialisées gèrent les formes, les dégradés, le texte et la réplication. Définissez contentsScale pour garantir la netteté et rappelez-vous que les couches sont des objets visuels légers, sans gestion des interactions tactiles ni d’Auto Layout. Cette base permet de construire les animations à venir.

Questions Fréquemment Posées

La leçon « Fondamentaux de CALayer » est-elle gratuite ?

Oui — le texte complet de « Fondamentaux de CALayer » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Fondamentaux de CALayer » ?

Travaillez avec les calques, leurs propriétés et leur hiérarchie. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Fondamentaux de CALayer » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy