Apple has released major updates to the SwiftUI framework at WWDC20. We might need to show visual feedback to the user about what’s happening and the progress of the tasks like uploading or downloading a file or fetching data from the server. Earlier we were depending on UIViewRepresentable to import and use UIActivityIndicatorView from UIKit in SwiftUI or on custom implementation using solid shapes.

With the latest updates in SwiftUI, we have a dedicated native view for showing determinate and indeterminate progress in the SwiftUI app: [ProgressView](https://developer.apple.com/documentation/swiftui/progressview?language=objc).

  • Indeterminate: To show whether the process is happening
  • Determinate: To show the percentage completion of the task

Let’s get started and see how can we implement the progress view in the SwiftUI app. You need Xcode 12 beta to try this out as ProgressViewavailable from iOS 14.


Indeterminate Progress View

Loading indicator

You can add the continuous spinning activity indicator in just a few lines, as below. The indicator starts animating as soon as you add it.

import SwiftUI

	struct ContentView: View {

	    var body: some View {
	        ProgressView()
	            .scaleEffect(1.5, anchor: .center)
	            .progressViewStyle(CircularProgressViewStyle(tint: .blue))
	    }

	}

You need to use CircularProgressViewStyle(tint: ) as progressViewStyleto set the tint color of your progress view. I have used scale effect to increase the size of the progress view for visibility.

Loading indicator with info text

You can add any meaningful text with your progress view easily, as below. Passing tint color using CircularProgressViewStyle(tint: ) will set only the spinning loading indicator. You need to set a foreground color separately for the label.

import SwiftUI

	struct ContentView: View {

	    var body: some View {
	        ProgressView()
	            .scaleEffect(1.5, anchor: .center)
	            .progressViewStyle(CircularProgressViewStyle(tint: .blue))
	    }

	}

#swift #programming #swiftui #wwdc-2020 #ios

Explore the New Features in SwiftUI for Building Progress Views
70.65 GEEK