SwiftUI Gauge

Bienvenidos a un nuevo tutorial donde llevaremos tus habilidades de diseño de interfaces al siguiente nivel. Si eres un iOS Developer que busca crear experiencias visuales impactantes y mostrar datos de manera intuitiva, estás en el lugar correcto.

Hoy vamos a sumergirnos profundamente en uno de los componentes más versátiles y atractivos que Apple ha introducido en los últimos años: el Gauge en SwiftUI. Ya sea que estés creando un panel de control para un coche inteligente, una app de salud, o un widget para la pantalla de bloqueo, dominar este elemento es fundamental en la programación Swift moderna.

A lo largo de este extenso artículo, no solo aprenderás qué es, sino cómo implementarlo, personalizarlo y adaptarlo para que brille en iOS, macOS y watchOS utilizando Xcode.

1. ¿Qué es un Gauge en SwiftUI?

En el mundo de la programación Swift, la representación de datos es clave para la retención del usuario. Un Gauge en SwiftUI (que se traduce como “medidor” o “indicador”) es una vista diseñada específicamente para mostrar un valor actual dentro de un rango finito.

Piensa en el velocímetro de un coche, el indicador de batería de tu iPhone, o los anillos de actividad de tu Apple Watch. Todos ellos representan un valor que tiene un mínimo y un máximo conocidos.

Antes de la llegada de este componente nativo en iOS 16 y macOS 13, los desarrolladores tenían que crear estas vistas desde cero usando Path, GeometryReader y mucha trigonometría para los medidores circulares. Ahora, SwiftUI nos ofrece una solución elegante, declarativa y altamente optimizada con solo un par de líneas de código.

¿Por qué deberías usarlo?

Como iOS Developer, tu objetivo es reducir la fricción cognitiva del usuario. Un Gauge permite a los usuarios:

• Comprender el contexto al instante: Un vistazo rápido revela si una métrica está alta, baja o en un rango normal.
• Ahorrar espacio: Especialmente en watchOS o en los widgets, donde el espacio en pantalla es un bien escaso.
• Mantener la coherencia del sistema: Al usar componentes nativos de SwiftUI, tu app se sentirá como una extensión natural del ecosistema de Apple.

2. La Anatomía de un Gauge

Para dominar el Gauge en SwiftUI, primero debemos entender de qué partes se compone. La API de Swift para este componente es sorprendentemente flexible. Un Gauge completo consta de:

1. Valor actual (Value): El número dinámico que estás midiendo (por ejemplo, 75).
2. Rango (Bounds): El límite inferior y superior (por ejemplo, de 0 a 100). Si no especificas uno, SwiftUI asume un rango de 0.0 a 1.0.
3. Etiqueta principal (Label): Describe lo que el Gauge está midiendo (ej. “Velocidad”).
4. Etiqueta de valor mínimo (Minimum Value Label): Muestra el límite inferior (ej. “0”).
5. Etiqueta de valor máximo (Maximum Value Label): Muestra el límite superior (ej. “100”).
6. Etiqueta de valor actual (Current Value Label): Muestra el valor exacto en texto (ej. “75 km/h”).

3. Tu Primer Gauge en Xcode: Paso a Paso

Vamos a ensuciarnos las manos. Abre Xcode, crea un nuevo proyecto de SwiftUI y navega a tu ContentView.swift. Vamos a crear el indicador de batería más sencillo posible.

import SwiftUI

struct ContentView: View {
    // 1. Definimos nuestro estado
    @State private var batteryLevel: Double = 0.45

    var body: some View {
        VStack(spacing: 40) {
            
            // 2. El Gauge más básico
            Gauge(value: batteryLevel) {
                Text("Batería")
            }
            .padding()
            
            // Un slider para interactuar con el valor
            Slider(value: $batteryLevel, in: 0...1)
                .padding()
        }
    }
}

Analizando el código de Swift:

En este ejemplo, no hemos definido un rango (in:), por lo que SwiftUI asume que batteryLevel se mueve entre 0.0 y 1.0. El bloque final ({ Text("Batería") }) proporciona la etiqueta principal para temas de accesibilidad, aunque en el estilo por defecto de iOS, esta etiqueta podría no ser visible a menos que cambies el estilo.

4. Estilos de Gauge: Adaptándose al Diseño

La verdadera magia del Gauge en SwiftUI reside en los GaugeStyle. Al igual que con los botones o las listas, Apple proporciona varios estilos predefinidos que cambian drásticamente la apariencia del componente sin tener que alterar la lógica subyacente de tu código Swift.

Vamos a explorar los estilos disponibles aplicando el modificador .gaugeStyle():

A. Estilo Lineal (LinearCapacityGaugeStyle)

Este es el estilo por defecto en iOS y macOS. Muestra una barra de progreso horizontal.

Gauge(value: speed, in: 0...200) {
    Text("Velocidad")
} currentValueLabel: {
    Text("\(Int(speed)) km/h")
} minimumValueLabel: {
    Text("0")
} maximumValueLabel: {
    Text("200")
}
.gaugeStyle(.linearCapacity) // Opcional, es el default en iOS

B. Estilos de Accesorio (Accessory Styles)

Estos estilos fueron diseñados originalmente para las complicaciones de watchOS y los widgets de la pantalla de bloqueo de iOS. Son circulares o compactos.

• .accessoryCircular: Muestra un anillo circular que se llena, con el currentValueLabel en el centro.
• .accessoryCircularCapacity: Un anillo cerrado donde el progreso se marca de manera un poco más densa.
• .accessoryLinearCapacity: Una barra pequeña y compacta, perfecta para widgets en línea.

HStack(spacing: 30) {
    // Estilo Circular
    Gauge(value: 0.7) {
        Text("CPU")
    } currentValueLabel: {
        Text("70%")
    }
    .gaugeStyle(.accessoryCircular)
    .tint(.blue)

    // Estilo Circular con Capacidad
    Gauge(value: 0.4) {
        Text("RAM")
    } currentValueLabel: {
        Text("40%")
    }
    .gaugeStyle(.accessoryCircularCapacity)
    .tint(.purple)
}

5. Personalización Avanzada de Colores y Gradientes

Un iOS Developer sénior sabe que la interfaz no solo debe funcionar, sino debe verse espectacular. SwiftUI hace que colorear un Gauge sea un juego de niños usando el modificador .tint().

Pero no estamos limitados a colores sólidos. Podemos usar gradientes para indicar estados de advertencia (por ejemplo, verde cuando la temperatura es normal, rojo cuando está caliente).

struct ThermometerView: View {
    @State private var temperature: Double = 38.0
    
    // Definimos un gradiente que va de azul (frío) a rojo (caliente)
    let tempGradient = Gradient(colors: [.blue, .green, .yellow, .orange, .red])
    
    var body: some View {
        Gauge(value: temperature, in: -10...50) {
            Text("Temperatura")
        } currentValueLabel: {
            Text("\(Int(temperature))°C")
                .font(.title2.bold())
        } minimumValueLabel: {
            Text("-10")
                .foregroundColor(.blue)
        } maximumValueLabel: {
            Text("50")
                .foregroundColor(.red)
        }
        .gaugeStyle(.linearCapacity)
        // Aplicamos el gradiente al Gauge
        .tint(tempGradient)
        .padding()
    }
}

Al usar un Gradient, SwiftUI mapea automáticamente el inicio del gradiente al valor mínimo y el final del gradiente al valor máximo. A medida que el valor sube, la barra indicadora se llenará con los colores correspondientes.

6. Desarrollo Multiplataforma: iOS, macOS y watchOS

Una de las grandes promesas de la programación Swift con SwiftUI es “Aprende una vez, aplícalo en cualquier lugar” (Learn once, apply anywhere). El Gauge en SwiftUI es un excelente ejemplo de esto, pero como buen iOS Developer, debes conocer las sutilezas de cada plataforma en Xcode.

En iOS y iPadOS

En dispositivos móviles, los Gauges lineales son excelentes para pantallas de configuración (como el almacenamiento del iPhone) o paneles de control en apps financieras y de salud. Sin embargo, con la llegada de las Live Activities y los Widgets de la Pantalla de Bloqueo, los estilos .accessoryCircular se han vuelto increíblemente populares. Te permiten mostrar datos cruciales directamente en la pantalla de inicio del usuario.

En macOS

En el Mac, el espacio horizontal abunda. Los Gauges lineales encajan perfectamente en ventanas de preferencias o en aplicaciones de monitorización del sistema que viven en la barra de menú superior. SwiftUI adapta automáticamente la tipografía y el espaciado para que se sienta nativo en el entorno de ventanas de macOS.

En watchOS

Aquí es donde el Gauge realmente brilla. Las pantallas del Apple Watch son pequeñas y los usuarios interactúan con ellas en ráfagas de pocos segundos.
En watchOS, los Gauges son la columna vertebral de las Complicaciones. Al usar .gaugeStyle(.accessoryCircular) dentro de un widget para watchOS, Xcode se asegura de que el Gauge se adapte a la esfera del reloj del usuario, tomando automáticamente el color de acento que el usuario haya configurado en su Apple Watch.

// Ejemplo típico en un entorno watchOS para una complicación
Gauge(value: steps, in: 0...10000) {
    Image(systemName: "figure.walk")
} currentValueLabel: {
    Text("\(steps)")
}
.gaugeStyle(.accessoryCircular)
.tint(.green)

7. Llevando SwiftUI al Límite: Custom GaugeStyle

Aunque los estilos predeterminados son geniales, a veces el diseñador de tu equipo tiene una visión muy específica que no encaja en lo estándar. Como experto en programación Swift, puedes crear tu propio GaugeStyle.

Para hacer esto, debemos crear un struct que adopte el protocolo GaugeStyle e implemente el método makeBody(configuration:).

Imagina que queremos un Gauge estilo “Barra de progreso segmentada” (como las barras de vida en los videojuegos retro).

struct SegmentedGaugeStyle: GaugeStyle {
    var segments: Int = 10
    var activeColor: Color = .green
    var inactiveColor: Color = .gray.opacity(0.3)
    
    func makeBody(configuration: Configuration) -> some View {
        // configuration.value nos da una fracción entre 0.0 y 1.0
        let activeSegments = Int(configuration.value * Double(segments))
        
        return VStack(alignment: .leading, spacing: 8) {
            // Mostramos la etiqueta
            configuration.label
                .font(.headline)
            
            HStack(spacing: 4) {
                ForEach(0..<segments, id: \.self) { index in
                    Rectangle()
                        .fill(index < activeSegments ? activeColor : inactiveColor)
                        .frame(height: 20)
                        .cornerRadius(2)
                }
            }
            
            HStack {
                configuration.minimumValueLabel
                    .font(.caption)
                Spacer()
                configuration.currentValueLabel
                    .font(.caption.bold())
                Spacer()
                configuration.maximumValueLabel
                    .font(.caption)
            }
        }
    }
}

// Extensión para usarlo fácilmente como los nativos
extension GaugeStyle where Self == SegmentedGaugeStyle {
    static var segmented: SegmentedGaugeStyle {
        SegmentedGaugeStyle()
    }
}

Ahora, en tu vista principal de SwiftUI, simplemente lo aplicas así:

Gauge(value: 0.7) {
    Text("Progreso del Curso")
} currentValueLabel: {
    Text("70%")
} minimumValueLabel: {
    Text("0%")
} maximumValueLabel: {
    Text("100%")
}
.gaugeStyle(.segmented)
.padding()

¡Boom! Has extendido las capacidades de Xcode y SwiftUI con un componente completamente personalizado y reutilizable.

8. Animando Cambios en tu Gauge

En la programación Swift, las interfaces estáticas pueden parecer aburridas. SwiftUI facilita la animación de los cambios de valor en tu Gauge. Cuando el valor subyacente de tu variable @State cambia, puedes envolver ese cambio en un bloque withAnimation.

struct AnimatedGaugeView: View {
    @State private var downloadProgress: Double = 0.0
    
    var body: some View {
        VStack(spacing: 50) {
            Gauge(value: downloadProgress) {
                Text("Descargando...")
            }
            .gaugeStyle(.accessoryCircularCapacity)
            .scaleEffect(2.0) // Lo hacemos más grande para verlo bien
            .tint(downloadProgress == 1.0 ? .green : .blue)
            // Animamos la vista implícitamente cuando cambia el progreso
            .animation(.spring(response: 0.5, dampingFraction: 0.6), value: downloadProgress)
            
            Button("Simular Descarga") {
                // Generamos un cambio de valor de forma aleatoria simulando red
                withAnimation {
                    downloadProgress += Double.random(in: 0.1...0.3)
                    if downloadProgress > 1.0 { downloadProgress = 1.0 }
                }
            }
            .buttonStyle(.borderedProminent)
            .disabled(downloadProgress == 1.0)
        }
    }
}

9. Accesibilidad: La Responsabilidad de un Buen iOS Developer

Nunca debes olvidar a los usuarios que interactúan con tus aplicaciones a través de VoiceOver. Afortunadamente, un Gauge en SwiftUI viene con excelente soporte de accesibilidad de fábrica. Sin embargo, es tu trabajo como iOS Developer asegurarte de que la información transmitida tenga sentido.

Por defecto, VoiceOver leerá el valor del Gauge como un porcentaje si no le das contexto. Si tu Gauge mide algo específico (como decibelios o litros), debes usar el modificador .accessibilityValue().

Gauge(value: waterIntake, in: 0...3000) {
    Text("Agua Consumida")
}
.accessibilityValue("\(Int(waterIntake)) mililitros de 3000 recomendados")

De esta manera, en lugar de que VoiceOver lea un confuso “50 por ciento”, dirá algo útil y humano como “1500 mililitros de 3000 recomendados”.

10. Mejores Prácticas al usar Gauges en tus Proyectos

Para cerrar este tutorial, quiero compartirte algunos consejos de diseño e ingeniería a la hora de implementar Gauge en SwiftUI en tus proyectos de Xcode:

• No satures la pantalla: Los Gauges llaman la atención. Si tienes 10 en una sola pantalla, el usuario no sabrá dónde mirar. Úsalos solo para los Key Performance Indicators (KPIs) más importantes de tu app.
• Provee siempre contexto: Un Gauge sin un minimumValueLabel o maximumValueLabel (cuando el rango no es intuitivamente obvio) es inútil. Si el medidor de presión de un neumático marca “32”, ¿eso es mucho o poco? El contexto lo es todo.
• Aprovecha el espacio en widgets: Si estás creando un widget para la Lock Screen en iOS o una complicación en watchOS, usa .accessoryCircular. Es el estándar de la industria y lo que los usuarios de Apple esperan visualmente.
• Contraste de color: Si vas a crear gradientes o colores personalizados, asegúrate de que pasen las pruebas de accesibilidad de contraste tanto en el Modo Claro como en el Modo Oscuro de iOS.

Conclusión

¡Y ahí lo tienes! Has pasado de conocer el concepto teórico a dominar la creación, el estilizado, la animación y la personalización avanzada de un Gauge en SwiftUI. Esta es una herramienta fenomenal dentro del arsenal de cualquier iOS Developer dedicado a la programación Swift.

La belleza de SwiftUI radica en cómo nos permite escribir menos código logrando resultados visualmente asombrosos en múltiples plataformas (iOS, macOS y watchOS) simultáneamente gracias a herramientas como Xcode.

Ahora que has aprendido a integrar y dominar los Gauges, el límite es tu imaginación.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram