Sunday, 16 July 2017

Create UIProgressView in swift

UIProgressView Swift Tutorial

Introduction to UIProgressView:

                 UIProgressView is the control used in iOS apps to show the progress of a particular task of the app and how much it's remain in order to complete the task. One can think of an example, like we when we install a particular software on desktop. During installation process we see a progress bar that tells how much the software is pending. In the same when we have to show progress of a particular task in iOS app we can use or we will use UIProgressView to full-fill our need. In this tutorial, you will learn how to create UIProgressView in swift.

In this tutorial we will, only covered basic functionality of UIProgressView in swift. Some of the important properties of UIProgressView are 
  1. trackTintColor  = Change color of UIProgressView track i.e. unfilled part of UIprogressView
  2. progressTintColor = Change color of UIProgressView progress o.e. filled part of UIProgressView
  3. trackImage = An image to use for the portion of the track that is not filled.
  4. progressImage =  An image to use for the portion of the progress bar that is filled.

Steps to create UIProgressView in swift:

Step 1: Create a new Xcode project, select template "Single View Application". Give product name "UIProgressViewTutorialSwift", set language to "Swift". Same is shown in the picture below

Creating new project - UIProgressview tutorial in swift

Step2: Open "Main.storyboard", drag "UIProgressView" control from object library to ViewController's view.

Selecting UIProgressView control from object library in Main.storyboard

Step3: Add constraints to the UIProgressView as shown in below picture.

Adding constraints to UIProgressView that we dragged to View of UIViewController

 After adding constraints, check for them that they were added correctly as shown in the image below

Added constraints to UIProgressView
Step4: Open "ViewController.swift" and add given below code to as shown

In above code, we created IBOutlet for UIProgressView, so that we can connect it in "Main.storyboard" and created a variable "progressValue"(this variable will get increased after 0.2 seconds). Then we created a function "updateProgress" that will increase the progress of UIProgressView  as per "progressValue". The function "updateProgress"will continuously gets called until our "progressValue" reach at 1.0. UIProgressView has minimum value = 0.0 and maximum value = 1.0

Step5: Open Main.storyboard and connect IBOultlet to UIProgressView as shown below

Showing all IBOutlet we created in ViewController.swift

Connecting IBOutlet to UIProgressView

Step6: Run the app and you will see the UIProgressView will gets updated and blue bar fills up grey one.

Where to go from here:

 In this tutorial, we learn how to create and use UIProgressView in swift. We only covered basic functionality of UIProgressView. Hope you enjoyed the tutorial. Stay tuned for more tutorial on swift.
Get source code from

No comments:
Write comments