🌀 PROGRESSVIEW en SWIFTUI en Español
ProgressView en SwiftUI

🌀 PROGRESSVIEW en SWIFTUI en Español

ProgressView en SwiftUI 2.0 es una vista que usamos para dar feedback al usuario en apps iOS, puede ser con forma de progress bar o circular. Podemos usar cualquiera de los dos pero con el ProgressView con progreso damos más información al user de cuánto queda por acabar una tarea.

SwiftBeta
Aprende SwiftUI desde cero 

Hoy en SwiftBeta vamos hablar del ProgressView en SwiftUI. Esta vista es muy usada para dar feedback visual al usuario de que alguna tarea está en proceso y que aún no ha terminado.
Tenemos varios estilos disponibles en SwiftUI y hoy vamos a ver dos:

  • ProgressView con un estilo circular, se usa para indicar al usuario que se está realizando una tarea pero que no podemos medir cuánto falta para que finalice.
    Algunos escenarios donde podrías pasar es al mostrar una pantalla en nuestra app pero aún no hemos recibido todos los datos de nuestro servidor, imagínate que quieres mostrar un listado de productos, pero para ello tienes que hacer una petición a backend para recibirlos, si la red es muy lenta en ese momento podemos mostrar este ProgressView y cuando recibamos los datos, ocultamos el progress view y mostramos los datos recién recibidos de nuestro servidor.
Circular ProgressView en SwiftUI
ProgressView en SwiftUI
  • ProgressView en el que podemos ver cuánto queda para que una tarea acabe, en este caso damos más información a los usuarios. Por ejemplo, se están descargando datos para poder mostrar en la app, podría ser una foto y a medida que se va descargando mostramos cuánto queda por descargar todo el archivo.
ProgressView con progreso en SwiftUI
ProgressView con progreso en SwiftUI

ProgressView en código

Ahora vamos a crear los dos ProgressView en un VStack. Aparecerán cuando le demos a un botón que vamos a crear llamado Start. Y si volvemos a dar al botón el valor del ProgressView con progreso se incrementará en un porcentaje, pudiendo ver como se va completando la tarea (lo incrementaremos de 0,1 en 0,1 hasta llegar a 1, que es cuando la barra no se puede rellenar más).

También vamos a crear otro Button con título Stop para ocultar otra vez los 2 ProgressView.

struct ContentView: View {
    @State var isLoading: Bool = false
    @State private var progress = 0.1
    
    var body: some View {
        VStack {
            if isLoading {
                ProgressView(value: progress)
                    .padding(.horizontal, 30)
                    .padding(.bottom, 20)
                ProgressView()
                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
                    .scaleEffect(2)
            }
            Text("Suscríbete a SwiftBeta")
                .padding()
            HStack(spacing: 30) {
                Button("Start") {
                    isLoading = true
                    progress += 0.1
                }
                Button("Stop") {
                    isLoading = false
                }
            }
        }
    }
}
Código en SwiftUI para añadir un ProgressView en tu App

Con el anterior código, si pulsamos en el botón Start, mostraríamos por pantalla las siguientes vistas:

Simulador con 2 ProgressView en SwiftUI
Simulador con 2 tipos de ProgressView en SwiftUI

Y si le damos al Button Stop, volveríamos a ocultar los dos ProgressView. Hoy hemos visto cómo le podemos indicar a los users de nuestra app que tenemos una tarea que se está ejecutando e indicarles el progreso (si lo tenemos).

Hasta aquí el post de hoy, gracias por leernos! 🤓
👉👉 SUSCRÍBETE al CANAL de youtube
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

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


SwiftUI desde cero