TimelineView en SwiftUI

Como iOS Developer, seguramente te has enfrentado al desafío de actualizar la interfaz de usuario basándote en el paso del tiempo. Ya sea que estés construyendo un reloj, un temporizador, una cuenta regresiva, o animaciones complejas que dependen del tiempo real, la programación Swift históricamente nos obligaba a depender de la clase Timer, gestionando estados con @State o @Published, y lidiando con ciclos de vida y cancelaciones para evitar fugas de memoria.

Todo esto cambió con la evolución del framework de Apple. Si estás trabajando con SwiftUI, ahora tienes a tu disposición una herramienta nativa, declarativa y altamente optimizada: TimelineView.

En este artículo tutorial, vamos a sumergirnos profundamente en qué es, cómo funciona y cómo usar TimelineView en SwiftUI. A lo largo de esta guía, abriremos Xcode y escribiremos código Swift puro para crear vistas dinámicas que funcionen a la perfección en iOS, macOS y watchOS.

¿Qué es TimelineView en SwiftUI?

Introducido en iOS 15, macOS 12, tvOS 15 y watchOS 8, TimelineView es un contenedor de vista que actualiza su contenido (su body) basándose en un calendario (o schedule) predeterminado.

En lugar de crear un temporizador externo que empuja actualizaciones a tu vista, TimelineView tira de las actualizaciones según sea necesario. Actúa como un bucle de tiempo integrado directamente en el sistema de renderizado de SwiftUI. Cuando declaras un TimelineView, le proporcionas una estrategia de programación (el schedule) y un bloque de código (el closure) que define cómo debe verse la vista en cualquier momento dado.

La Anatomía de TimelineView

La estructura básica de un TimelineView en Swift se ve así:

TimelineView(.periodic(from: Date(), by: 1.0)) { context in
    // Aquí defines tu vista, usando context.date
}

El context que recibe el closure es una instancia de TimelineView.Context. Este contexto contiene información crucial:

• date: El momento exacto en el tiempo para el cual la vista se está renderizando.
• cadence: Un valor que indica a qué velocidad se espera que se actualice la vista (por ejemplo, live, seconds, minutes). Esto es especialmente útil en plataformas como watchOS para manejar el modo de pantalla siempre encendida (Always-On Display).

Tipos de Programación (Schedules) en TimelineView

Para que TimelineView en SwiftUI sepa cuándo redibujar la pantalla, utiliza protocolos que conforman a TimelineSchedule. SwiftUI nos proporciona varios “schedules” integrados que cubren la gran mayoría de los casos de uso para un iOS Developer.

1. .everyMinute

Este es el programador más eficiente en términos de batería. Actualiza la vista exactamente al comienzo de cada minuto. Es ideal para relojes que no muestran segundos o para widgets que no necesitan precisión en tiempo real.

2. .periodic(from:by:)

Este programador te permite definir una fecha de inicio y un intervalo específico (en segundos). Es el sustituto perfecto para un Timer tradicional de un segundo. Se usa comúnmente para cuentas regresivas o relojes con segunderos.

3. .animation

Este es quizás el más fascinante para el desarrollo visual. Actualiza la vista lo más rápido posible, sincronizándose con la tasa de refresco de la pantalla (hasta 60 o 120 veces por segundo en dispositivos con ProMotion). Es fundamental para crear animaciones fluidas impulsadas por el tiempo, a menudo combinándolo con el componente Canvas de SwiftUI.

4. Programación Explícita (Arreglo de Fechas)

También puedes pasar un array de objetos Date. El TimelineView se actualizará exactamente en esas fechas y luego se detendrá.

Tutorial Paso a Paso: Construyendo con TimelineView en Xcode

Ahora que entendemos la teoría, vamos a la práctica. Abre Xcode, crea un nuevo proyecto de SwiftUI y asegúrate de seleccionar Swift como tu lenguaje de programación.

Ejemplo 1: Un Reloj Digital Multiplataforma

El caso de uso más clásico para entender TimelineView en SwiftUI es un reloj. Vamos a crear uno que muestre horas, minutos y segundos, y que se actualice cada segundo.

import SwiftUI

struct RelojDigitalView: View {
    var body: some View {
        // Usamos un schedule periódico, actualizando cada 1 segundo
        TimelineView(.periodic(from: .now, by: 1.0)) { context in
            VStack(spacing: 10) {
                Text("Hora Actual")
                    .font(.headline)
                    .foregroundColor(.secondary)
                
                // Formateamos el context.date para mostrar la hora
                Text(context.date.formatted(date: .omitted, time: .standard))
                    .font(.system(size: 50, weight: .bold, design: .rounded))
                    .foregroundColor(.blue)
            }
            .padding()
            .background(Color(UIColor.secondarySystemBackground))
            .cornerRadius(15)
            .shadow(radius: 5)
        }
    }
}

struct RelojDigitalView_Previews: PreviewProvider {
    static var previews: some View {
        RelojDigitalView()
    }
}

Análisis del código:

1. .periodic(from: .now, by: 1.0): Le decimos a Xcode que inicie la línea de tiempo ahora mismo y se actualice cada segundo exacto.
2. context.date: En lugar de usar Date() dentro de la vista, siempre debes usar context.date. Esto garantiza que la vista se renderice con el tiempo exacto que el sistema ha calculado para ese frame, evitando parpadeos e inconsistencias.
3. La belleza de SwiftUI: Nota cómo no hay variables @State ni funciones que manejen temporizadores. Es programación Swift declarativa en su máxima expresión.

Ejemplo 2: Creando un Temporizador de Enfoque (Estilo Pomodoro)

Un iOS Developer frecuentemente necesita construir temporizadores para aplicaciones de productividad o fitness. Veamos cómo hacer una cuenta regresiva.

import SwiftUI

struct TemporizadorView: View {
    // Definimos una fecha de finalización (ejemplo: 1 minuto en el futuro)
    let fechaFin: Date = Calendar.current.date(byAdding: .minute, value: 1, to: Date())!
    
    var body: some View {
        TimelineView(.periodic(from: .now, by: 1.0)) { context in
            VStack {
                Text("Tiempo Restante")
                    .font(.title2)
                
                Text(tiempoRestante(desde: context.date))
                    .font(.system(size: 60, weight: .heavy, design: .monospaced))
                    .foregroundColor(context.date >= fechaFin ? .red : .green)
            }
        }
    }
    
    // Función auxiliar para calcular la diferencia de tiempo
    func tiempoRestante(desde fechaActual: Date) -> String {
        let tiempoRestante = fechaFin.timeIntervalSince(fechaActual)
        
        if tiempoRestante <= 0 {
            return "00:00"
        }
        
        let minutos = Int(tiempoRestante) / 60
        let segundos = Int(tiempoRestante) % 60
        
        return String(format: "%02d:%02d", minutos, segundos)
    }
}

Este enfoque es inmensamente superior a usar un Timer tradicional porque si el hilo principal de la aplicación se congela brevemente, el TimelineView simplemente se “pondrá al día” en el siguiente frame usando el context.date real, evitando que el temporizador se desincronice.

Ejemplo 3: Animaciones Complejas con .animation y Canvas

Donde TimelineView en SwiftUI brilla de manera espectacular es en la generación de gráficos dinámicos y animaciones de alto rendimiento. Para esto, usamos el schedule .animation combinado con la vista Canvas (introducida en la misma versión de SwiftUI).

Imagina que queremos dibujar un radar abstracto que gira continuamente basándose en el tiempo.

import SwiftUI

struct AnimacionRadarView: View {
    var body: some View {
        // Schedule de animación para máxima tasa de refresco
        TimelineView(.animation) { context in
            Canvas { graphicsContext, size in
                // Extraemos los segundos actuales, incluyendo fracciones de segundo
                let time = context.date.timeIntervalSinceReferenceDate
                
                // Calculamos un ángulo basado en el tiempo que pasa
                // Multiplicamos por la velocidad deseada (ej. 1 radián por segundo)
                let angulo = Angle(radians: time * 2.0)
                
                let rect = CGRect(origin: .zero, size: size)
                
                // Centramos el contexto de dibujo
                graphicsContext.translateBy(x: size.width / 2, y: size.height / 2)
                graphicsContext.rotate(by: angulo)
                
                // Dibujamos la línea del radar
                var path = Path()
                path.move(to: .zero)
                path.addLine(to: CGPoint(x: size.width / 2, y: 0))
                
                graphicsContext.stroke(
                    path,
                    with: .linearGradient(
                        Gradient(colors: [.green, .clear]),
                        startPoint: .zero,
                        endPoint: CGPoint(x: size.width / 2, y: 0)
                    ),
                    lineWidth: 4
                )
            }
            .frame(width: 200, height: 200)
            .background(Circle().fill(Color.black))
            .overlay(Circle().stroke(Color.green, lineWidth: 2))
        }
    }
}

En este caso, la programación Swift aplicada al Canvas nos permite dibujar directamente usando operaciones gráficas de bajo nivel. El TimelineView impulsa el dibujo, pidiendo al canvas que se redibuje a 60 fps (o 120 fps en dispositivos ProMotion), logrando una rotación matemáticamente perfecta basada en la marca de tiempo de UNIX (timeIntervalSinceReferenceDate), sin depender de .rotationEffect o del sistema de animación de estado estándar de SwiftUI.

TimelineView en Diferentes Plataformas

Una de las grandes ventajas de ser un iOS Developer en el ecosistema de Apple actual es la facilidad para compartir código. TimelineView en SwiftUI es verdaderamente multiplataforma, pero tiene particularidades importantes según el dispositivo.

Apple Watch (watchOS) y el Always-On Display

El Apple Watch es el dispositivo donde el TimelineView es absolutamente crítico. Cuando el usuario baja la muñeca, el reloj entra en modo de bajo consumo (Always-On Display).

En este estado, el reloj reduce su tasa de refresco a 1 vez por minuto o 1 vez por segundo, dependiendo del modelo. Aquí es donde entra en juego context.cadence:

TimelineView(.periodic(from: .now, by: 1.0)) { context in
    if context.cadence == .live {
        // El usuario está mirando activamente: muestra los milisegundos o animaciones fluidas
        Text(context.date.formatted(.dateTime.second().secondFraction(.fractional(2))))
    } else {
        // La pantalla está atenuada: muestra solo horas y minutos para ahorrar batería
        Text(context.date.formatted(.dateTime.hour().minute()))
    }
}

Xcode facilita la simulación de estas cadencias directamente en el canvas de Previews.

Mac (macOS)

En macOS, TimelineView es perfecto para aplicaciones de la barra de menú (Menu Bar Extras) que necesitan actualizar estadísticas del sistema o tiempos de fondo sin consumir excesiva CPU. La gestión de hilos se hace de manera eficiente en el fondo por el sistema operativo.

iPhone / iPad (iOS)

Para el desarrollo de iOS, las Live Activities e Interactive Widgets introducidos recientemente dependen en gran medida de conceptos similares, donde las vistas deben renderizarse en el futuro. TimelineView es la herramienta preferida para cualquier UI “in-app” que necesite vivir y respirar con el reloj del sistema.

Creando un Schedule Personalizado (Nivel Avanzado)

Si eres un iOS Developer experimentado, quizás los schedules por defecto no sean suficientes. Afortunadamente, SwiftUI nos permite conformar el protocolo TimelineSchedule.

Imagina que estás construyendo una aplicación de astronomía y solo quieres actualizar la vista a intervalos aleatorios, o quizás crear un “latido del corazón” que late rápido, hace una pausa y vuelve a latir.

Para lograr esto en Swift, debemos crear un CustomSchedule:

struct LatidoSchedule: TimelineSchedule {
    // Definimos el tipo de iterador requerido por el protocolo
    typealias Entries = LatidoIterator

    func entries(from startDate: Date, mode: TimelineScheduleMode) -> LatidoIterator {
        LatidoIterator(fechaActual: startDate)
    }
}

struct LatidoIterator: IteratorProtocol {
    var fechaActual: Date
    var latidoRapido = true // Alternador de estado
    
    mutating func next() -> Date? {
        // Si es latido rápido, esperamos 0.2 segundos. Si es pausa, esperamos 0.8 segundos.
        let intervalo = latidoRapido ? 0.2 : 0.8
        
        // Calculamos la siguiente fecha
        let siguienteFecha = fechaActual.addingTimeInterval(intervalo)
        
        // Actualizamos el estado para la siguiente iteración
        fechaActual = siguienteFecha
        latidoRapido.toggle()
        
        return siguienteFecha
    }
}

// Extensión para usarlo fácilmente en TimelineView
extension TimelineSchedule where Self == LatidoSchedule {
    static var latido: LatidoSchedule { .init() }
}

Y así es como lo usarías en tu vista de SwiftUI:

struct CorazonView: View {
    @State private var escala: CGFloat = 1.0
    
    var body: some View {
        // Usamos nuestro schedule personalizado!
        TimelineView(.latido) { context in
            Image(systemName: "heart.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                // Utilizamos el modulo de los segundos para determinar si expandir o contraer
                .scaleEffect(context.date.timeIntervalSince1970.truncatingRemainder(dividingBy: 1) < 0.5 ? 1.2 : 1.0)
                .animation(.spring(), value: context.date)
        }
    }
}

Esta flexibilidad demuestra por qué Swift y SwiftUI forman un dúo tan potente dentro de Xcode. Tienes la facilidad de uso para tareas sencillas y la extensibilidad arquitectónica para lógica de negocio altamente personalizada.

Mejores Prácticas, Rendimiento y Consideraciones

A pesar de ser una herramienta fantástica, como buen profesional de la programación Swift, debes usar TimelineView con responsabilidad. Aquí tienes algunas reglas de oro:

1. Mantén el closure ligero: El closure dentro del TimelineView (especialmente si usas .animation) se ejecutará decenas de veces por segundo. No realices cálculos pesados, llamadas a red o parseo de JSON dentro de este bloque. Pre-calcula tu lógica o usa ViewModel (arquitectura MVVM) para proveer los datos listos para renderizar.
2. No abuses del .animation: Si tu vista solo necesita actualizarse una vez por segundo (por ejemplo, para mostrar segundos numéricos), usa .periodic(from: .now, by: 1.0). Usar .animation para un reloj de texto forzará al dispositivo a redibujar el texto a 60 fps, drenando la batería del iPhone de tu usuario innecesariamente.
3. Encapsulación: Si tienes una pantalla muy compleja, no envuelvas toda la pantalla en el TimelineView. Envuelve únicamente la pequeña parte de la vista (ej: el ícono del reloj o el texto del temporizador) en el TimelineView. SwiftUI es muy inteligente optimizando, pero tú debes ayudar minimizando el alcance de las actualizaciones de vista.
4. Usa context.date: Insistimos en esto. Nunca uses Date() dentro del closure para calcular tu estado. Depende siempre de la variable date inyectada por el TimelineView.Context. Esto garantiza que todas las vistas animadas permanezcan sincronizadas bajo el capó.
5. Depuración en Xcode: Si notas que tu TimelineView se comporta de manera extraña, recuerda que puedes usar print() dentro del body (usando let _ = print(context.date)) para ver en la consola de Xcode exactamente con qué frecuencia y en qué momento se está disparando la vista.

Resumen y Conclusión

La introducción de TimelineView en SwiftUI representó un cambio de paradigma para cualquier iOS Developer. Al adoptar un enfoque impulsado por el tiempo de forma declarativa, Apple ha eliminado la fricción, los posibles fallos de memoria y el código repetitivo que plagaban las implementaciones más antiguas en la programación Swift.

Hemos aprendido cómo funciona la estructura básica, cómo manejar diferentes programaciones (schedules) como .everyMinute, .periodic y .animation, e incluso cómo crear nuestros propios ritmos personalizados conformando los protocolos subyacentes. Desde un simple reloj hasta animaciones complejas basadas en Canvas, las posibilidades que te ofrece Xcode ahora son prácticamente infinitas.