Create circular progress view in swift – Tutorial

Circular progress view

In this tutorial, we will learn how to create our own circular progress view or bar in swift. Though, a number of open source libraries are available for the circular progress view written in swift, but this tutorial demonstrate that how you can create circular progress view of your own thus removing the code or library dependencies. So, let us start the tutorial

Project setup

Step 1: Create a new project using “Single View App” template and name it ‘CircularProgress-Tutorial’.

Creating new project using Single View App - CircularProgress swift

Step 2: Press ⌘ + N, select “Cocoa touch class” from file wizard. Press Next.

Select Cocoa Touch Class - CircularView swift

Step 3: Change subclass to type “UIView” and name it ‘CircularProgress’. Language will be swift. Click finish and then save it your disk and click create.

Change subclass to UIView - Circularprogress view swift

Designing circular progress view

Step 4: Open CircularProgress.swift, here we will add two methods

override init(frame: CGRect)
required init?(coder aDecoder: NSCoder)

Step 5: A circular progress has two thing, one is track layer and other is progress layer(shows the progress), so we need to create two object of CAShapeLayer class to draw track and progress.

Here we gave access as fileprivate as we don’t want these object outside of our class.

Step 6: To change the color of track and progress, we will create two setter’s named ‘progressColor’ and ‘trackColor’, so that we can set different color to track layer and progress layer of our circularprogress view.

Step 7: Now we will create a function also with fileprivate access, this function will make our UIView class as circular and also add the above two layer to it. Finally we call it from the initWithframe function and initWithCoder function.

In the above function, we set our circularprogress view color to clear color and then made this view a
circular view by dividing its width by 2.
Then, we created a circlePath using UIBezierPath class method named arcCenter. Assigned the circlePath to both layers (track layer and progress layer). Assign values to different properties of track layer and progress layer.
Finally, added these two layer’s to our circularProgress view layer.

NOTE:- In order to change width of circularProgress view, change value of lineWidth property as per your requirement.

Animating progress layer of CircularProgress View

Step 8: To animate progress layer, we will create a function named ‘setProgressWithAnimation’ accepting two parameters

duration – duration of animation
value – the value of progress (0.0 to 1.0)

How to use CircularProgress in ViewController

Step 9: Open ViewController.swift and add below code

Output

Circular progress showing 80% progress - CorcularProgressView swift

Where to go from here

In this tutorial, we learned how to create a circular progress view in swift. If you have any question related to this tutorial, please feel free to comment. I hope you enjoyed this tutorial and your feedback is highly appreciated. Download the source code from http://bit.ly/2IpRmtP