Gauge en SwiftUI 4

Gauge en SwiftUI 4

Gauge es una vista que podemos usar en iOS 16. Esta vista es un medidor que puede tener dos estilos, uno lineal y otro circular. Depende de tu aplicación aplicarás uno u otro (o incluso los dos). Con muy pocas líneas de código puedes añadir esta vista y su funcionalidad a tus apps.

SwiftBeta

Tabla de contenido

Aprende a crear la vista Gauge en SwiftUI 4

Hoy en SwiftBeta vamos a ver una nueva vista llamada Gauge (gaich) que podemos usar con SwiftUI 4. Esta vista nos permite mostrar como un medidor, una barra de progreso. Y podemos configurarlo de varias maneras. Y es justo lo que vamos a ver hoy.

Si quieres apoyar el canal y que siga creando este tipo de contenido, suscríbete a SwiftBeta. De esta manera seguiré subiendo contenido cada semana ✌️

Creamos proyecto en Xcode 14

Lo primero de todo que vamos hacer es crear un proyecto nuevo en Xcode. Vamos a seleccionar SwiftUI y apartir de ahí nos vamos a la vista ContentView.

Aquí vamos a añadir la vista Gauge dentro de un Form, y vamos a ver cómo la podemos inicializar esta nueva vista.

struct GaugeView: View {
    var body: some View {
        Form {
            Section("Linear") {
                Gauge(value: 0.8) {
                    Text("Value")
                }
            }
        }
    }
}
Código para crear la vista Gauge en SwiftUI 4

En este caso le hemos pasado un valor de 0.8 y en el canvas vemos como la línea de nuestro medidor llega hasta el 80% de su ancho. Pero vamos hacer que acepte un valor dinámico, de esta manera con un slider podremos mover el valor de un extremo a otro, para hacerlo necesitamos crear una propiedad @State.

struct GaugeView: View {
    @State private var value = 0.5
    
    var body: some View {
        Form {
            Section("Linear") {
                Gauge(value: value) {
                    Text("Value")
                }
            }
            Section {
                Slider(value: $value) {
                    Text("Update Values")
                } minimumValueLabel: {
                    Text("0")
                } maximumValueLabel: {
                    Text("100")
                }
            }
        }
    }
Gauge dinámico al crear un Slider que modifica su valor

Ahora, al mover el Slider vemos como el valor de nuestro medido aumenta o disminuye. Ahora vamos a añadir más estilos,  pero antes vamos a crear una función que nos va a obtener el valor de la propiedad @State que hemos llamado value y nos la va a pasar a String, añadiendo el símbolo del portcentaje. Esto nos va a servir para mostrar esta información en la barra de nuestro medidor:

struct GaugeView: View {
    @State private var value = 0.5
    
    var body: some View {
        Form {
            Section("Linear") {
                Gauge(value: value) {
                    Text("Value")
                }
                
                Gauge(value: value) {
                    Text("Value")
                } currentValueLabel: {
                    Text(updateValueToString())
                }
            }
            Section {
                Slider(value: $value) {
                    Text("Update Values")
                } minimumValueLabel: {
                    Text("0")
                } maximumValueLabel: {
                    Text("100")
                }
            }
        }
    }
    
    func updateValueToString() -> String {
        let formattedString = Int(self.value * 100)
        return "\(formattedString)" + "%"
    }
}
Creamos método que formatea el valor de nuestra propiedad value

Ahora fíjate que al mover el Slider, aparece el valor debajo de la barra de nuestro medidor.

Modificador gaugeStyle

Hasta aquí todo bien, pero podemos dar aspectos muy atractivos a nuestro medidor. Lo que vamos hacer es aplicar el modificador gaugeStyle y le vamos a pasar el valor de .accessoryLinear y también de .accessoryLinearCapacity para ver nuestro medidor en forma lineal (en unos minutos aplicaremos otros valores para ver el medidor en forma circular)

struct GaugeView: View {
    @State private var value = 0.5
    
    var body: some View {
        Form {
            Section("Linear") {
                Gauge(value: value) {
                    Text("Value")
                }
                
                Gauge(value: value) {
                    Text("Value")
                } currentValueLabel: {
                    Text(updateValueToString())
                }
                
                Gauge(value: value) {
                    Text("Value")
                }
                .gaugeStyle(.accessoryLinear)
                .tint(.red)
                
                Gauge(value: value) {
                    Text("Value")
                } currentValueLabel: {
                    Text(updateValueToString())
                }
                .gaugeStyle(.accessoryLinear)
                .tint(.red)
                
                Gauge(value: value) {
                    Text("Value")
                }
                .gaugeStyle(.accessoryLinearCapacity)
                .tint(.green)
                
                Gauge(value: value) {
                    Text("Value")
                } currentValueLabel: {
                    Text(updateValueToString())
                }
                .gaugeStyle(.accessoryLinearCapacity)
                .tint(.green)
            }
            Section {
                Slider(value: $value) {
                    Text("Update Values")
                } minimumValueLabel: {
                    Text("0")
                } maximumValueLabel: {
                    Text("100")
                }
            }
        }
    }
    
    func updateValueToString() -> String {
        let formattedString = Int(self.value * 100)
        return "\(formattedString)" + "%"
    }
}
Aplicamos distintos estilos a nuestro Gauge

En nuestro canvas de SwiftUI deberíamos de ver lo siguiente:

Gauge con estilo linear
Gauge con estilo linear

Ahora vamos a crear otra sección y vamos a aplicar otros estilos a nuestro medidor. Como os mencionaba antes, acabamos de ver los lineales, y ahora toca ver los circulares. Añadimos una nueva sección de nuestro Form a continuación de la anterior.

Section("Circular") {
    Gauge(value: value) {
        Text("Value")
    }
    .gaugeStyle(.accessoryCircular)
    .tint(.red)
    
    Gauge(value: value) {
        Text("Value")
    } currentValueLabel: {
        Text(updateValueToString())
            .font(.body)
    }
    .gaugeStyle(.accessoryCircular)
    .tint(.red)
    
    Gauge(value: value) {
        Text("Value")
            .padding(.top, 10)
    }
    .gaugeStyle(.accessoryCircularCapacity)
    .tint(.green)
    
    HStack {
        Gauge(value: value) {
            Image(systemName: "wifi", variableValue: value)
                .padding(.top, 10)
        }
        .gaugeStyle(.accessoryCircularCapacity)
        .tint(.green)
        
        Gauge(value: value) {
            Image(systemName: "cellularbars", variableValue: value)
                .padding(.top, 10)
        }
        .gaugeStyle(.accessoryCircularCapacity)
        .tint(.green)
        
        Gauge(value: value) {
            Image(systemName: "touchid", variableValue: value)
                .padding(.top, 10)
        }
        .gaugeStyle(.accessoryCircularCapacity)
        .tint(.green)
    }
    
    Gauge(value: value) {
        Text("Value")
            .padding(.top, 10)
    } currentValueLabel: {
        Text(updateValueToString())
    }
    .gaugeStyle(.accessoryCircularCapacity)
    .tint(.green)
    
}
Aplicamos estilo circular a nuestra vista Gauge

Y obtenemos un resultado como el siguiente:

Resultado final de los Gauge creados con diferentes estilos
Resultado final de los Gauge creados con diferentes estilos

Conclusión

Hoy hemos aprendido a usar otra vista en SwiftUI 4. Esta vista es un medidor que nos ayuda a obtener información de manera muy directa dentro de nuestras apps. Y podemos encontrar esta vista en muchas apps, sobretodo en la app de Fitness de Apple.

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple