Site icon Ravi Shankar

Swift Demo – Add Progress Bar

In this short tutorial, we will see the steps required to add UIProgressView to a Swift IOS Project.

UIProgressView and UILabel showing the current progress will be added programmatically to the View Controller. Create a Single View Application and navigate to ViewController.swift file.

Add UIProgressView and UILabel

Add the following code snippet below the class definition. This code snippet adds variables for UILabel and UIProgressView.

[code language=”swift”] var progressView: UIProgressView?
var progressLabel: UILabel?
[/code]

Now add the following function which initialises and adds UIProgressView and UILabel to the view.

[code language=”swift”]//MARK:- Controls
func addControls() {
// Create Progress View Control
progressView = UIProgressView(progressViewStyle: UIProgressViewStyle.Default)
progressView?.center = self.view.center
view.addSubview(progressView!)

// Add Label
progressLabel = UILabel()
let frame = CGRectMake(view.center.x – 25, view.center.y – 100, 100, 50)
progressLabel?.frame = frame
view.addSubview(progressLabel!)
}
[/code]

ProgressView style can be set to Default or Bar type. And UILabel needs to be appear just above the ProgressView hence we added an offset from view center.

Add GestureRecogonizers

This demo starts and resets the progress on single and double tap gesture event. The following code snippet adds single and double tap gesture recognisers to the view. This also specifies the function that needs to be called when user does a single or double tap.

[code language=”swift”]func addGestures() {
// Add Single Tap and Doube Tap Gestures
let tap = UITapGestureRecognizer(target: self, action: "handleTap:")
tap.numberOfTapsRequired = 1

let doubleTap = UITapGestureRecognizer(target: self, action: "handleDoubleTap:")
doubleTap.numberOfTapsRequired = 2

view.addGestureRecognizer(tap)
view.addGestureRecognizer(doubleTap)
tap.requireGestureRecognizerToFail(doubleTap)
}
[/code]

Now add the required functions for the gesture recogonizer events.

[code language=”swift”]// Start Progress View
func handleTap(sender: UITapGestureRecognizer) {
if sender.state == .Ended {
timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: "updateProgress", userInfo: nil, repeats: true)
}
}
//MARK:- Double Tap
// Reset Progress View
func handleDoubleTap(sender: UITapGestureRecognizer) {
if sender.state == .Ended {
progressView?.progress = 0.0
progressLabel?.text = "0 %"
timer?.invalidate()
}
}[/code]

Display Progress

The actual progress will be displayed by the following piece of code in the updateProgress function. You can change progress interval by setting appropriate value to progress property of UIProgressView.

[code language=”swift”]//MARK:- Increment Progress
func updateProgress() {
progressView?.progress += 0.05
let progressValue = self.progressView?.progress
progressLabel?.text = "\(progressValue! * 100) %"
}[/code]

Finally we need to add the addControls and addGestures to the viewDidLoad method.

[code language=”swift”]override func viewDidLoad() {
super.viewDidLoad()
addControls()
addGestures()
}[/code]

Download source code from here (SwiftDemo – ProgressView)

Exit mobile version