Progress bars or other forms of indicators play a significant position in apps that execute time-consuming duties or operations. It enriches the consumer expertise by displaying a progress indicator, which permits the consumer to trace the progress of the operation and get an thought of how lengthy it is going to take to finish.
In SwiftUI, it comes with a built-in part known as ProgressView for builders to current a progress bar or a round indicator to show the progress of a long-running operation, corresponding to downloading a file or importing information to a server.
The default look of ProgressView is easy and minimalistic, and it may not match the design and theme of your app. That is the place the ProgressViewStyle protocol comes into play. You should utilize the ProgressViewStyle protocol to create customized kinds for the ProgressView part that match the design and theme of your app.
On this tutorial, I’ll stroll you thru the fundamentals of ProgressView and present you customise the look & really feel of the progress view utilizing ProgressViewStyle.
The Primary Implementation of ProgressView
The ProgressView part could be very simply to make use of. In your SwiftUI apps, you possibly can create a progress indicator by writing the next line of code:
Optionally, you possibly can add a label to show the standing message like this:
|
ProgressView() { Textual content(“Loading…”) } |
On iOS, the progress view is displayed as a round indicator.
Indeterminate Progress vs Determineate Progress
The ProgressView part offers two kinds of progress indicator to point indeterminate progress and determineate progress. What we simply demonstrated within the earlier part is an indeterminate progress indicator. For duties which have an unknown period, corresponding to loading or syncing advanced information, we use indeterminate progress indicators, which is displayed as a round exercise indicator.
When doable, use a determinate progress indicator. An indeterminate progress indicator exhibits {that a} course of is going on, nevertheless it doesn’t assist individuals estimate how lengthy a activity will take. A determinate progress indicator might help individuals resolve whether or not to do one thing else whereas ready for the duty to finish, restart the duty at a distinct time, or abandon the duty.
For a determinate progress indicator, it’s used for duties with a well-defined period corresponding to file downloads. On iOS, a determinate progress indicator is introduced within the type of a progress bar. To implement it, you simply have to instantiate a ProgressView with the present worth of the progress. Right here is an instance:
By default, the overall worth is 1.0. You’ll be able to present a worth between 0.0 and 1.0 the place 1.0 means 100% full. If you need to use a distinct vary with a distinct whole, you possibly can write the code by utilizing one other initializer:
|
ProgressView(worth: 30, whole: 100) |
Each strains of the codes current the identical progress indicator that exhibits 30% full.
Optionally, you possibly can add some labels to show the standing message and present progress by utilizing the label and currentValueLabel parameters:
|
ProgressView(worth: 0.3, label: { Textual content(“Processing…”) }, currentValueLabel: { Textual content(“30%”) }) |
As a way to replace the worth of the progress, you often create a state variable to carry the present worth of the progress. Here’s a pattern code snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
struct ContentView: View {
@State personal var progress = 0.1
var physique: some View { ProgressView(worth: progress, label: { Textual content(“Processing…”) }, currentValueLabel: { Textual content(progress.formatted(.p.c.precision(.fractionLength(0)))) }) .padding() .activity { Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
self.progress += 0.1
if self.progress > 1.0 { self.progress = 0.0 } } } } } |
Altering the Progress View’s Coloration and Fashion
The default progress indicator has a easy design with restricted customization choices. Nonetheless, it’s doable to switch the colour of the progress bar by making use of the tint modifier:
|
ProgressView(worth: 0.3) .tint(.purple) |
A determinate progress indicator is often displayed as a progress bar. For those who want to modify its look, you need to use the progressViewStyle modifier. As an example, you possibly can change from the default linear type to a round type, like so:
|
ProgressView(worth: 0.3, label: { Textual content(“Processing…”) }, currentValueLabel: { Textual content(“30%”) }) .progressViewStyle(.round) |
This transforms the progress bar right into a round indicator.
Utilizing ProgressViewStyle for Superior Customizations
Though the default type of the progress view is adequate for many purposes, you might need to create distinctive and visually interesting progress bars that match their app’s design and theme. If you wish to create a personalized progress bar that aligns along with your app’s aesthetic, you need to use the ProgressViewStyle protocol in SwiftUI.
ProgressViewStyle is a robust device for creating personalized progress indicators in SwiftUI. With ProgressViewStyle, you possibly can create distinctive and visually interesting progress bars that completely match the design and theme of your app. There are a number of built-in kinds obtainable, corresponding to CircularProgressViewStyle and LinearProgressViewStyle. By conforming to the ProgressViewStyle protocol, you possibly can create your personal kinds and apply them to the ProgressView part. This permits for superior customizations that transcend altering the colour of the progress bar.
To provide you a greater thought about ProgressViewStyle, let’s construct a customized progress bar just like the one proven above. What it’s good to do is to create a brand new struct that conforms to the ProgressViewStyle protocol and implement the next required methodology:
|
@ViewBuilder func makeBody(configuration: Self.Configuration) –> Self.Physique |
When you have expertise with ButtonStyle, the implementation of ProgressViewStyle could be very comparable because it follows the identical sample.
Let’s create a brand new type named BarProgressStyle like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
struct BarProgressStyle: ProgressViewStyle {
var shade: Coloration = .purple var peak: Double = 20.0 var labelFontStyle: Font = .physique
func makeBody(configuration: Configuration) –> some View {
let progress = configuration.fractionCompleted ?? 0.0
GeometryReader { geometry in
VStack(alignment: .main) {
configuration.label .font(labelFontStyle)
RoundedRectangle(cornerRadius: 10.0) .fill(Coloration(uiColor: .systemGray5)) .body(peak: peak) .body(width: geometry.measurement.width) .overlay(alignment: .main) { RoundedRectangle(cornerRadius: 10.0) .fill(shade) .body(width: geometry.measurement.width * progress) .overlay { if let currentValueLabel = configuration.currentValueLabel {
currentValueLabel .font(.headline) .foregroundColor(.white) } } }
}
} } } |
This practice type takes in three parameters for configuring the bar shade, peak, and font type. I’m not going to elucidate the code within the makeBody methodology line by line. Briefly, we implement our personal progress bar type by overlaying a purple RoundedRectangle view on prime of one other RoundedRectangle view in mild grey.
The configuration parameter offers you with the frequent properties of a progress view together with:
fractionCompleted– The finished fraction of the duty represented by the progress view, from0.0(not but began) to1.0(absolutely full).label– The standing label.currentValueLabel– the label that exhibits the present progress.
Now that we’ve created our personal type, you possibly can apply it by attaching the progressViewStyle modifier to the progress view:
|
ProgressView(worth: 0.3, label: { Textual content(“Processing…”) }, currentValueLabel: { Textual content(“30%”) }) .progressViewStyle(BarProgressStyle(peak: 100.0)) |
Train
After gaining an understanding of ProgressViewStyle, it’s time to place that information into follow and create a brand new customized type. You’ll be able to problem your self by making an attempt to construct a mode that resembles the one proven within the picture beneath. This is not going to solely aid you reinforce what you might have realized but in addition push you to assume creatively about obtain your required feel and look. Don’t be afraid to experiment and have enjoyable with it!
Abstract
All through this tutorial, we’ve lined the basics of utilizing ProgressView to show the progress of time-consuming duties or operations in your app. It’s endorsed to make use of a determinate progress indicator at any time when doable, because it offers customers with a extra correct understanding of the progress being made.
Whereas the default progress view is ample for many purposes, we’ve additionally explored create a personalized progress view utilizing the ProgressViewStyle protocol. By following the steps outlined on this tutorial, you must now have a stable understanding of create your personal distinctive type of progress view that aligns with the design and theme of your app.
