Tutorial

iOS Progress Bar (Progress View)

Published on August 3, 2022
Default avatar

By Anupam Chugh

iOS Progress Bar (Progress View)

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.

In this tutorial, we’ll be discussing the UIProgressView component and create a progress bar in our iOS Application.

iOS Progress Bar - UIProgressView

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 ios progressview add to 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.

iOS Progress View Properties

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. ios progressview main storyboard 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: ios progressview output

Increasing the Height of the ProgressView

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. ios progressview change height You can also change the height from the storyboard in the constraints: ios progressview change height constraint The second approach is better since the first one might pixelate the ProgressView if we try to shape the edges.

Rounded Corners ProgressBar

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. ios rounded progress bar This brings an end to this tutorial. You can download the project from the link below:

iOSProgressView

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Anupam Chugh

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
February 15, 2022

offscreen rendering

- songxing

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    August 24, 2019

    Can i get the IOSProgressView code in Objective-c

    - Saran

      Try DigitalOcean for free

      Click below to sign up and get $200 of credit to try our products over 60 days!

      Sign up

      Join the Tech Talk
      Success! Thank you! Please check your email for further details.

      Please complete your information!

      Get our biweekly newsletter

      Sign up for Infrastructure as a Newsletter.

      Hollie's Hub for Good

      Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

      Become a contributor

      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

      Welcome to the developer cloud

      DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

      Learn more
      DigitalOcean Cloud Control Panel