How to Use Native Progress View in SwiftUI

What is a progress view? A progress view presents the progress of some activity in the app. Generally, there are two kinds of progress views. One displays determinate progress, the other displays indeterminate progress.

Indeterminate progress
Determinate progress

An activity Indicator is a spinning wheel that indicates a task is running. As a result, you should display an activity indicator to let the user know your app is still working when an action takes an unknown amount of time to process.

Since Xcode 12 beta (iOS 14), a new view called ProgressView is available to developers, and that can display both determinate and indeterminate progress. The ProgressView is the native control in SwiftUI, therefore, it must be well tested and stable.

Indeterminate progress

Indeterminate progress presents a task is in progressing or not. To create an indeterminate progress view, use an initializer that doesn’t take a value.

Indeterminate Progress
var body: some View {
    VStack {
        ProgressView()
    }
}

Usually, developers always put an indeterminate progress view into the overlay and control its visibility by a state variable. For example, consider that an indeterminate progress view should display to let the user know the app is fetching data from the remote server, without percentage because it is impossible to expect exactly.

Simulate a network request

struct ContentView: View {
    
    @State private var isLoading = true
    
    var body: some View {
        
        Text("Fetching data ...")
            .overlay(ProgressView()
                        .padding()
                        .background(Color.white)
                        .cornerRadius(10)
                        .shadow(radius: 10)
                        .opacity(isLoading ? 1 : 0))
    }
}

Determinate progress

Determinate progress presents the percentage complete of a task. Create a determinate progress view by initializing a ProgressView with a binding to a numeric value that indicates the percentage complete, and a total value that represents the completion of the task. By default, the progress is 0.0 and the total is 1.0.

Usually, we can use a determinate progress view to display how many bytes and minutes remains for a running download task.

Determinate style
var body: some View {
    ProgressView(value: 0.5)
        .progressViewStyle(LinearProgressViewStyle())
}

In conclusion, you have learned how to Use Native Activity Indicator ProgressView in SwiftUI. In addition, indeterminate and determinate progress views also be discussed. Right now, open your Xcode and try it out!

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *