In this tutorial, we’ll be discussing the UIProgressView component and create a progress bar in our iOS Application.
ProgressView is used to display the progress of any long running activity such as downloading/uploading/waiting for a response from web service to the user. This is a vital UI element which when absent could give the users an impression that the application is not responding. Launch XCode Single View iOS Application. Let’s add the UIProgressView in our Main.storyboard ProgressView can have a value between 0.0 and 1.0 and would be indicated by the blue color. Values outside this interval would be rounded off to either of them depending on whether it’s greater than 1.0 or less than 0.0.
ProgressView has the following properties:
progressTintColor
- Used to change the UIColor of the progress part i.e. the filled part in the ProgressView.trackTintColor
- Used to change the UIColor of the track i.e. the unfilled part of the ProgressView.ProgressBarStyle
- There are two styles: default and bar. The bar style has a transparent track.trackImage
- Here an image is used instead of color for the unfilled part.progressImage
- Image is used to show the progress.Let’s begin our implementation. Our Main.storyboard
contains a button to start/stop the ProgressView. The code for the ViewController.swift class is given below:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var btn: UIButton!
var isRed = false
var progressBarTimer: Timer!
var isRunning = false
@IBAction func btnStart(_ sender: Any) {
if(isRunning){
progressBarTimer.invalidate()
btn.setTitle("Start", for: .normal)
}
else{
btn.setTitle("Stop", for: .normal)
progressView.progress = 0.0
self.progressBarTimer = Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(ViewController.updateProgressView), userInfo: nil, repeats: true)
if(isRed){
progressView.progressTintColor = UIColor.blue
progressView.progressViewStyle = .default
}
else{
progressView.progressTintColor = UIColor.red
progressView.progressViewStyle = .bar
}
isRed = !isRed
}
isRunning = !isRunning
}
@IBOutlet weak var progressView: UIProgressView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
progressView.progress = 0.0
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@objc func updateProgressView(){
progressView.progress += 0.1
progressView.setProgress(progressView.progress, animated: true)
if(progressView.progress == 1.0)
{
progressBarTimer.invalidate()
isRunning = false
btn.setTitle("Start", for: .normal)
}
}
}
IBOutlet and IBActions are created by linking the Main.storyboard
views to the Swift file. We start a Timer when the Button is clicked which updates the progress bar through the selector function passed: updateProgressView. Every alternate timer would toggle the style of the ProgressView. The output of the above application when run on the simulator is given below:
We can change the height of the ProgressView in the following way:
progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)
This transforms the height by 8 times. Let’s see how it looks in the simulator. You can also change the height from the storyboard in the constraints: The second approach is better since the first one might pixelate the ProgressView if we try to shape the edges.
Add the following code in the viewDidLoad() function.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
progressView.progress = 0.0
progressView.layer.cornerRadius = 10
progressView.clipsToBounds = true
progressView.layer.sublayers![1].cornerRadius = 10
progressView.subviews[1].clipsToBounds = true
}
We set the corner radius to half of the height of the ProgressView. Following is the output of the application with the updated code. This brings an end to this tutorial. You can download the project from the link below:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
offscreen rendering
- songxing
Can i get the IOSProgressView code in Objective-c
- Saran