In iOS applications, the ProgressView is used to display the progress of the task over time. The ProgressView is the instance of UIProgressView, which inherits the UIView class.
The ProgressView displays the progress bar where we can use the methods and properties of the UIProgressView class to manage its style. We can get and set the values that are pinned to the progress of a task.
Properties and methods
||Property or method
||var progress: Float
||It represents the current progress shown by the progress bar.
||func setProgress(Float, animated: Bool)
||This method is used to set the progress of the progress bar. We can optionally pass a Boolean value to determine whether the animation would be on or off.
||var observedProgress: Progress?
||It is the progress object which is used to update the progress view.
||var progressViewStyle: UIProgressView.Style
||It represents the current graphical style of the progress view.
||var progressTintColor: UIColor?
||It is the color that is displayed for the portion of the progress bar that is filled or completed.
||var progressImage: UIImage?
||By using this property, we can set the image for the portion of the progress bar that is filled.
||var trackTintColor: UIColor?
||It is the color that is displayed for the portion of the progress bar; this is not filled or not completed.
||var trackImage: UIImage?
||It is the image that can be displayed for the portion of the progress bar that is not filled.
Adding ProgressView to the Interface Builder.
- To add the ProgressView to the storyboard, search for the UIProgressView in the object library and drag the result to the storyboard, as shown in the following image.
- Define the auto-layout rules for the progress view to govern its position and sizes for different screen sizes.
- Set the appropriate properties of UIProgressView to govern the progress of the progress view over time.
In this example, we will simulate the sign-up example in which we will prompt the user to register in the application by filling the name, email id, and password. When the user taps the submit button, we will show a progress bar to the user, which indicates that the user data is being saved in the database.
To create the interface for the project, we will add four text fields with the sign-up label, and a submit button to the storyboard and define the auto-layout rules for them to govern their position and sizes as shown in the following image.
Now, let's add the progress view and a label to indicate the progress to the interface, as shown in the following image.
When the user taps on the submit button, we will execute a timer to represent the progress of the progress view.