Progress View iOS Tutorial

With a progress view the progress of a task can be displayed. In this tutorial we will simulate the progress of a specific task. This tutorial is made with Xcode 10 and built for iOS 12.

Project Setup

Open Xcode and create a new Single View App.

For product name, use IOSProgressViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Storyboard Setup

Go to the Storyboard. Drag a button and a label to the main view. Give the button a name of "Start" and the label a name of "0 %". We will dynamically update this label later. Also drag a Progress View to the main view. The main View should look like this.

Outlet and Action Connections

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl-click and drag from the Label to the ViewController class in the ViewController.swift file and create the following outlet

Ctrl-click and drag from the Progress View to the ViewController class in the ViewController.swift file and create the following outlet

Next, Ctrl-click and drag from the start button to the ViewController class and create the following action

Code Implementation

Go to ViewController.swift and add the following property

let progress = Progress(totalUnitCount: 10)

The Progress object is used to keep track of the progress. This will be divided into 10 units, since we will update the bar with 10% until it reaches 100%. Next, implement the startCount(_:) method

@IBAction func startCount(sender: UIButton) {
    // 1
    progressView.progress = 0.0
    progress.completedUnitCount = 0

    // 2
    Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (timer) in
        guard self.progress.isFinished == false else {
            timer.invalidate()
            return
        }
        
        // 3
        self.progress.completedUnitCount += 1
        self.progressView.setProgress(Float(self.progress.fractionCompleted), animated: true)

        self.progressLabel.text = "\(Int(self.progress.fractionCompleted * 100)) %"
    }
}
  1. When the start button is clicked. the progress bar is reset to 0

  2. Every second the progress bar will be updated, when finished the method returns

  3. The progress bar will be incremented with 1 and the label will be incremented by 10%

Run Project

Build and Run the project, press the Start button and the progress view will animate till it reaches 100%.

You can download the source code of the iOSProgressViewTutorial at the ioscreator repository on github.

Related Articles