Cómo dibujar una línea en SwiftUI

Si estás dando tus primeros pasos o buscando perfeccionar tus habilidades en la programación Swift, has llegado al lugar indicado. Todo iOS Developer se encuentra tarde o temprano con la necesidad de crear interfaces de usuario personalizadas. A veces, las tareas que parecen más sencillas, como dibujar una línea en SwiftUI, esconden diferentes enfoques y técnicas que vale la pena dominar.

En este tutorial vamos a explorar todas las formas posibles de dibujar líneas utilizando SwiftUI, el framework declarativo de Apple. Lo mejor de todo es que el código Swift que escribiremos en Xcode será multiplataforma, lo que significa que funcionará de manera impecable en iOS, macOS y watchOS.

1. El Entorno de Trabajo: Preparando Xcode

Antes de empezar a tirar líneas de código (literal y figuradamente), necesitamos configurar nuestro entorno.

1. Abre Xcode.
2. Selecciona Create a new Xcode project.
3. Elige la pestaña Multiplatform y selecciona App. Esto asegurará que nuestro código esté preparado para iOS, macOS y watchOS.
4. Nombra tu proyecto (por ejemplo, SwiftUILinesTutorial), asegúrate de que la interfaz seleccionada sea SwiftUI y el lenguaje sea Swift.

Como iOS Developer, dominar el canvas de SwiftUI en Xcode acelerará drásticamente tu flujo de trabajo. ¡Comencemos!

2. El Método Fundamental: Usando Path

La forma más directa y cruda de dibujar una línea en SwiftUI es utilizando la estructura Path. Un Path es básicamente un conjunto de instrucciones de dibujo 2D (como un trazado vectorial).

En el sistema de coordenadas de SwiftUI, el punto de origen (0, 0) se encuentra en la esquina superior izquierda de la vista.

Aquí tienes cómo dibujar una línea diagonal simple:

import SwiftUI

struct PathLineView: View {
    var body: some View {
        Path { path in
            // 1. Movemos el "lápiz" al punto de inicio
            path.move(to: CGPoint(x: 50, y: 50))
            
            // 2. Trazamos la línea hasta el punto de destino
            path.addLine(to: CGPoint(x: 250, y: 250))
        }
        // 3. Definimos cómo se verá la línea (color y grosor)
        .stroke(Color.blue, lineWidth: 5)
        .frame(width: 300, height: 300)
    }
}

Explicación para el iOS Developer:

• move(to:): Levanta el lápiz virtual y lo coloca en unas coordenadas específicas sin dibujar nada.
• addLine(to:): Arrastra el lápiz desde la posición actual hasta las nuevas coordenadas.
• .stroke(): Sin este modificador, el Path es invisible. Le damos un color azul y un grosor de 5 puntos.

Este código es 100% compatible con iOS, macOS y watchOS.

3. La Forma Reutilizable: Creando un Shape Personalizado

Usar Path directamente en la vista está bien para cosas rápidas, pero en la programación Swift orientada a SwiftUI, la mejor práctica es crear componentes reutilizables. Para ello, podemos conformar nuestra propia estructura al protocolo Shape.

Al crear un Shape, SwiftUI nos proporciona un rectángulo (CGRect) que representa el espacio disponible, permitiéndonos dibujar líneas relativas al tamaño de la vista.

import SwiftUI

struct Line: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // Dibujamos una línea horizontal de extremo a extremo
        path.move(to: CGPoint(x: 0, y: rect.midY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
        
        return path
    }
}

// Uso en nuestra vista principal
struct ShapeLineView: View {
    var body: some View {
        VStack(spacing: 40) {
            Line()
                .stroke(Color.red, lineWidth: 3)
                .frame(height: 100)
            
            Line()
                .stroke(Color.green, style: StrokeStyle(lineWidth: 5, dash: [10, 5]))
                .frame(height: 100)
        }
        .padding()
    }
}

Las ventajas de este enfoque:

Como iOS Developer, notarás que al usar Shape, la línea se adapta automáticamente al contenedor. Si compilas esto en Xcode para un Apple Watch (watchOS) o un Mac (macOS), la línea horizontal aprovechará el ancho disponible de forma inteligente.

4. Dando Estilo a tus Líneas (StrokeStyle)

Dibujar una línea en SwiftUI no termina en un simple trazo sólido. SwiftUI nos ofrece StrokeStyle para personalizar completamente nuestras líneas.

Puedes modificar parámetros como:

• lineWidth: El grosor de la línea.
• lineCap: La forma de los extremos de la línea (.round, .butt, .square).
• lineJoin: Cómo se conectan dos líneas de un mismo trazado.
• dash: Un array que define un patrón de líneas discontinuas (guiones).

Veamos un ejemplo avanzado de personalización en Swift:

import SwiftUI

struct StyledLineView: View {
    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 20, y: 100))
            path.addLine(to: CGPoint(x: 300, y: 100))
        }
        .stroke(
            Color.purple,
            style: StrokeStyle(
                lineWidth: 10,
                lineCap: .round,
                dash: [20, 10] // Línea de 20 pts, espacio de 10 pts
            )
        )
        .frame(height: 200)
    }
}

5. Alternativas Prácticas: Divider y Rectangle

A veces, no necesitas usar un Path o un Shape. Si tu objetivo como iOS Developer es simplemente separar contenido visualmente, la programación Swift en su framework moderno nos da atajos semánticos.

El uso de Divider

Un Divider es el elemento nativo de SwiftUI para crear líneas de separación. Es sutil, se adapta al modo claro/oscuro del sistema operativo automáticamente, y requiere cero esfuerzo.

import SwiftUI

struct DividerView: View {
    var body: some View {
        VStack {
            Text("Arriba")
            
            Divider() // La línea de separación automática
                .background(Color.red) // Puedes tintarla si quieres
            
            Text("Abajo")
        }
        .padding()
    }
}

El truco del Rectangle

Otra técnica común en la programación Swift para UI es usar un rectángulo con una altura o anchura de 1 o 2 puntos. Esto es útil cuando quieres un control absoluto sobre el color y el fondo sin usar Path.

import SwiftUI

struct RectangleLineView: View {
    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(height: 2) // Esto lo convierte visualmente en una línea
            .edgesIgnoringSafeArea(.horizontal)
    }
}

6. Llevando tu Código al Siguiente Nivel: Animando Líneas

Ningún tutorial de SwiftUI para un verdadero iOS Developer estaría completo sin un poco de magia. Gracias a cómo funciona SwiftUI, animar el dibujo de una línea es increíblemente sencillo usando el modificador .trim.

El modificador .trim(from:to:) permite dibujar solo un porcentaje del Path o Shape. Si animamos el valor to, podemos crear un efecto de “dibujo en progreso”.

Pruébalo en tu simulador de Xcode:

import SwiftUI

struct AnimatedLineView: View {
    // Estado para controlar la animación
    @State private var endAmount: CGFloat = 0.0

    var body: some View {
        VStack {
            Line()
                .trim(from: 0.0, to: endAmount) // Controla cuánto se dibuja
                .stroke(Color.blue, lineWidth: 5)
                .frame(width: 250, height: 50)
                .onAppear {
                    // Disparamos la animación al aparecer la vista
                    withAnimation(.easeInOut(duration: 2.0).repeatForever(autoreverses: false)) {
                        endAmount = 1.0
                    }
                }
        }
    }
}

Este tipo de detalles son los que elevan una aplicación promedio a una experiencia de usuario premium, y con SwiftUI en Xcode, cuesta muy pocas líneas de código Swift.

7. Consideraciones Multiplataforma (iOS, macOS, watchOS)

Una de las promesas más grandes de SwiftUI es su portabilidad. Cuando decides dibujar una línea en SwiftUI, las estructuras Path, Shape y los modificadores como .stroke funcionan de manera idéntica en los tres principales sistemas operativos de Apple.

Sin embargo, como un buen iOS Developer, debes tener en cuenta el contexto de la pantalla:

• iOS / iPadOS: Tienes mucho espacio. Las líneas con interacción táctil (usando DragGesture) son comunes.
• macOS: El usuario interactúa con un ratón. Puedes usar un Divider vertical en una barra de herramientas (Toolbar), lo cual es un patrón de diseño muy de Mac.
• watchOS: El espacio es extremadamente limitado. Usa líneas (Divider o rectángulos muy finos) con colores sutiles o baja opacidad (.opacity(0.5)) para no saturar la pequeña pantalla OLED. Asegúrate de probar tu código en los simuladores de Apple Watch dentro de Xcode.

Conclusión

Hemos cubierto un largo camino en este tutorial. Desde la compresión del sistema de coordenadas usando Path, pasando por la creación de componentes reutilizables y escalables con Shape, hasta llegar a la animación avanzada y trucos rápidos usando Rectangle o Divider.