Swift Academy · Lección

Fundamentos de CALayer

Trabaje con capas, sus propiedades y su jerarquía.

Fundamentos de CALayer es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué es un CALayer?

CALayer es el almacén de respaldo de todo lo que ve en UIKit. Cada UIView se dibuja mediante una capa que almacena su contenido visual como una textura en la GPU.

Trabajar directamente con capas permite aprovechar gráficos y animaciones acelerados por hardware.

import UIKit
let layer = CALayer()

Las capas detrás de las vistas

Cada vista tiene una propiedad layer. Establecer propiedades de la capa suele ser más sencillo y barato que dibujar de forma personalizada.

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

Geometría: frame, bounds, position

Una capa tiene bounds, que define su propio sistema de coordenadas; position, que indica dónde se encuentra su ancla en el padre; y un frame derivado. Editar cualquiera de ellos actualiza los otros.

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

El punto de anclaje

anchorPoint, cuyo valor predeterminado es 0.5, 0.5, es decir, el centro, define el origen de la capa para el posicionamiento y las transformaciones. Las rotaciones y escalas pivotan alrededor de él.

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

Propiedades visuales

Las capas exponen directamente propiedades de estilo visual: backgroundColor, un CGColor; cornerRadius; borderWidth; borderColor; y opacity.

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

Sombras

Las capas dibujan sombras mediante shadowColor, shadowOpacity, shadowOffset y shadowRadius. Establezca un shadowPath para mejorar el rendimiento.

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

Subcapas

Las capas forman un árbol. Añada elementos hijos con addSublayer; se posicionan en el sistema de coordenadas del padre.

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

Tipos de capa especializados

UIKit incluye subclases de capas: CAShapeLayer, para rutas vectoriales; CAGradientLayer, para gradientes; CATextLayer, para texto; y CAReplicatorLayer, para hijos duplicados.

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

Capas de gradiente

CAGradientLayer representa transiciones suaves de color definidas por colors, locations, startPoint y 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)

contentsScale y nitidez

Establezca contentsScale según la escala de la pantalla para que el contenido dibujado por la capa se vea nítido en pantallas Retina. Si lo olvida, el texto y las formas se verán borrosos.

layer.contentsScale = UIScreen.main.scale

Las capas son ligeras

Las capas no gestionan eventos táctiles ni Auto Layout; son objetos puramente visuales. Por eso resultan más baratas que las vistas para contenido decorativo o animado.

Comprobación rápida: CALayer

Compruebe su comprensión de los fundamentos de CALayer.

Resumen: fundamentos de CALayer

CALayer respalda todas las vistas de UIKit y ofrece elementos visuales acelerados por GPU: geometría con bounds/position/anchorPoint, estilos como radio de esquina, bordes y sombras, y un árbol de subcapas.

Las subclases especializadas gestionan formas, gradientes, texto y replicación. Establezca contentsScale para obtener nitidez y recuerde que las capas son objetos visuales ligeros, sin interacción táctil ni Auto Layout. Esta base permite las animaciones que veremos a continuación.

Preguntas frecuentes

¿La lección «Fundamentos de CALayer» es gratis?

Sí — el texto completo de «Fundamentos de CALayer» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de CALayer»?

Trabaje con capas, sus propiedades y su jerarquía. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Fundamentos de CALayer»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Swift Academy