Progress Bar iOS also known as Progress View

2 years ago

Liam

4 minutes

In this lesson, we will talk about the UIProgressView element and build a progress bar for our iOS App.

Progress bar on iOS – UIProgressView

The ProgressView is a crucial user interface element used to display the progress of any lengthy activity such as downloading, uploading, or waiting for a response from a web service. Its absence could lead users to believe that the application is unresponsive. To add the UIProgressView to our Main.storyboard in XCode, we need to launch a Single View iOS Application. The ProgressView’s value can range from 0.0 to 1.0 and is represented by the color blue. Values outside this range will be rounded to the nearest value depending on whether they are greater than 1.0 or less than 0.0.

Properties of the iOS Progress View

ProgressView has the subsequent characteristics:

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.

We can start executing our plan now. In our Main.storyboard, there is a button that controls the ProgressView, allowing us to start or stop it. Below is the code for the ViewController.swift class.

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)
        }
    }
}

By connecting the views in the Main.storyboard to the Swift file, IBOutlet and IBActions are generated. When the Button is pressed, a Timer is initiated, which modifies the progress bar using the selector function called updateProgressView. Each alternate timer changes the style of the ProgressView. The outcome of running the aforementioned application on the simulator is displayed below.

Raising the ProgressView’s height

To modify the ProgressView’s height, we can proceed as follows:

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

This changes the height by a factor of 8. Let’s observe its appearance in the simulator. Additionally, you have the option to modify the height from the storyboard using the constraints. The second method is preferable because the first one could potentially result in pixelation of the ProgressView when altering the edges.

Progress bar with curved corners.

Insert the given code within the viewDidLoad() method.

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 have adjusted the corner radius of the ProgressView to be equal to half of its height. Here is the result of the application after implementing the modified code. This concludes the tutorial, and you can obtain the project by clicking on the provided link.

ProgressView for iOS