blog posts

Learn iOS progress bar (progress view) in simple language

We will learn the iOS progress bar or ui (progress-view ui) or iOS progress indicators in Swift with examples and learn how to use the iOS progress bar / progress view in Swift to progress in Let us illustrate a task with an example.

IOS progress bar (progress view)

In iOS, tokens or progress bars are used to indicate the progress of a task or process in an application, and people no longer need to stare at a still, still page during long operations of an application.

Using iOS progress symbols or bars, we can let people know how long it will take for the process to complete while running. The following is an example toolbar:

iOS Progress Bar or Progress View or Progress Indicator Sample Example

(Download 30 of 108)

By adding a UIProgressView class reference to our applications; We can use progress view indicators in our iOS apps.

Create an iOS progress bar app in Xcode

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

C: \ Users \ mohammad \ Desktop \ open-xcode-to-create-new-ios-app-using-xcode (1) .png

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, in the iOS progress bar, we have the most basic pattern of the app, which is “demo only”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “Image View in iOS”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier

This section is automatically generated based on the phrases we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

Create ios progress bar application using xcode

When we click the Next button;

A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

C: \ Users \ mohammad \ Desktop \ save-xcode-new-project-in-application-folder-in-ios-swift (1) .png

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

ios progress bar application storyboard file in xcode

Now select the ViewContriller.swift file in your project as shown below.

ios progress bar viewcontroller file in xcode

Add ioS UI controls to the screen in Swift

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

Filter section

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file. Now look for Progress View in the Objects Library in the Filter box, then drag Progress View into ViewController in Main.storyboard; Likewise similar to the following; We need to add label and toolbar controls to ViewController.

Here we have changed the size of the iPhone to “3.5 inch iPhone” to have a better view, if you are satisfied with the size of your simulator; Drop this option.

iOS progress bar xcode view with ui controls

Relate UI controls to Swift language codes

We now communicate between the controls and the ViewController.Swift code. To do this, click on the Assistant button, which looks like two intertwined circles. This icon is located in the Xcod toolbar, as you can see below, in the right corner.

To map controls; Hold down the Ctrl key on the keyboard and as you can see below; Then drag the progress bar, toolbar, and controls from the interface and drop them into the ViewController.swift file.

ios progress bar map controls to code in xcode

Once we have added the controls to ViewController.swift, we then write the custom code to show or stop the progress bar when we click the buttons.

When we write all the functions, the code of the ViewController.swift file should look like the following:

Import UIkit

class ViewController: UIViewController {

// timer – used to increment progress

Var myTimer: NSTimer?

// outlet – progress view

@IBOutlet var progressView1: UIProgressView!

// outlet – progress label

@IBOutlet var progressLabel: UILabel!

// action & outlet: play button

@IBOutlet var playButton: UIBarButtonItem!

@IBAction func playButtonAction (sender: UIBarButtonItem) {

// it progress reach 1 then reset it to 0.0

Ifself.progressView1.progress> = 1 {

self.progressView1.progress = 0.0

}

// schedule timer

Self.myTimer = NSTimer.scheduledTimerWithTimeInterval (0.5, target: self, selector: #selector (ViewController.updateProgress), userInfo: nil, repeats: true) // enable: true)

// enable / disable button

self.playButton.enabled = false

self.resetButton.enabled = false

self.pauseButton.enabled = true

}

// action & outlet: reset button

@IBOutlet var resetButton: UIBarButtonItem!

@IBAction func resetButtonAction (sender: UIBarButtonItem) {

// reset.progressiv view

self.progresslabel.text = ”0 ″

// enable / disable button

self.playbutton.enabled = true

self.resetButton.enabled = true

self.pauseButton.enabled = false

}

// action & outlet: pause button

@IBOutlet var pausebutton: UIBarButtonItem!

@IBAction func pauseButtonAction (sender: UIBarButtonItem) {

// invalidate timer

self.myTimer? .invalidate ()

// enable / disable button

self.playButton.enabled = true

self.resetButton.enabled = true

self.pauseButton.enabled = false

}

// Mark: – View functions

Override func viewDidLoad () {

Seuper.viewDidLoad ()

// Do any additional setup after loading the view, typically form a nib.

// creat timer

self.myTimer = NSTimer ()

// set progress view default value and label

Self.progressView1.progress = 0.0

Let proressValue – Int (self.progressView1.progress * 100)

// set progress value count

self.progressLablel.text = “\ (proressValue)”

// enable play button

self.playButton.enabled = true

// enable reset button

self.resetButton.enabled = false

// disable pause button

self.pauseButton.enabled = false

}

Override func didRecieveMemoryWarning () {

Super.didReciveMemoryWarning ()

// Dispose of any resources that can be recreated.

}

// Mark: – Utility function

// update progress view

Func updateProgress value

self.progressView1.progress + = 0.01

// set label for progress value

self.progressLabel.text = “\ (Int (self.progressView1.progress * 100))”

// ifself.progressView1.progress> = 1 {

// invalidate timer

self.playButton.enabled = true

self.resetButton.enabled = true

self.pauseButton.enabled = false

Now run the program and check its output. To run the program; Select the required emulator (in this section we have selected iPhone Six S Plus) and click the Play button; Which is similar to the following figure; At the top left is the Xcode toolbar.

IOS progress bar app output

Below you can see the result of the iOS progress bar app. Now click on the play button to start your progress view and the time will be shown on the label.

Now click on the stop button as below to stop the progress bar.

This is how we can use the iOS progress bar or progress view or progress indicator in our quick apps to show the progress of the work according to our needs.