38. Creating a Customized SwiftUI ProgressView
The SwiftUI ProgressView, as the name suggests, provides a way to visually indicate the progress of a task within an app. An app might, for example, need to display a progress bar while downloading a large file. This chapter will work through an example project demonstrating how to implement a ProgressView-based interface in a SwiftUI app including linear, circular and indeterminate styles in addition to creating your own custom progress views.
The ProgressView can be displayed in three different styles. The linear style displays progress in the form of a horizontal line as shown in Figure 38-1 below:
Alternatively, progress may be displayed using the circular style as shown in Figure 38-2:
Finally, for indeterminate progress, the spinning animation shown in Figure 38-3 below is used. This style is useful for indicating to the user that progress is being made on a task when the percentage of work completed is unknown.
As we will see later in the chapter, it is also possible to design a custom style by creating declarations conforming to the ProgressViewStyle protocol.
The content view for this example app will consist of a ProgressView and a Slider. The Slider view will serve as a way to change the value of a State property variable, such that changes to the slider position will be reflected by the ProgressView.
Edit the ContentView.swift file and modify the view as follows:
struct ContentView: View {
@State private var progress: Double = 1.0
var body: some View {
VStack {
ProgressView("Task Progress", value: progress, total: 100)
.progressViewStyle(LinearProgressViewStyle())
...
38.4 Using the Circular ProgressView Style
To display a circular ProgressView, the progressViewStyle() modifier needs to be called and passed an instance of CircularProgressViewStyle as follows:
struct ContentView: View {
@State private var progress: Double = 1.0
var body: some View {
VStack {
ProgressView("Task Progress", value: progress, total: 100)
.progressViewStyle(CircularProgressViewStyle())
Slider(value: $progress, in: 1...100, step: 0.1)
}
.padding...
38.5 Declaring an Indeterminate ProgressView
The indeterminate ProgressView displays the spinning indicator shown previously in Figure 38-3 and is declared using the ProgressView without including a value binding to indicate progress:
ProgressView()
If required, text may be assigned to appear alongside the view:
Progress("Working...")
38.6 ProgressView Customization
The appearance of a ProgressView may be changed by declaring a structure conforming to the ProgressViewStyle protocol and passing an instance through to the progressViewStyle() modifier.
To conform with the ProgressViewStyle protocol, the style declaration must be structured as follows:
struct MyCustomProgressViewStyle: ProgressViewStyle {
func makeBody(configuration: Configuration) -> some View {
ProgressView(configuration)
// Modifiers here to customize view
}
}
The structure contains a makeBody() method which is passed the configuration information for the ProgressView on which the custom style is being applied. One option is to simply return a modified ProgressView instance. The following style, for example, applies accent color and shadow effects to the...
The SwiftUI ProgressView provides a way for apps to visually convey to the user the progress of a long running task such as a large download transaction. ProgressView instances may be configured to display progress either as a straight bar or using a circular style, while the indeterminate style displays a spinning icon which indicates the task is running but without providing progress information. The prevailing style is assigned using the progressViewStyle() modifier which may be applied either to individual ProgressView instances, or to all of the instances within a container view such as a VStack
By adopting the ProgressViewStyle protocol, custom progress view designs of almost any level of complexity can be created.
© 2021 Packt Publishing Limited All Rights Reserved
