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
Step 1: Create a new project using “Single View App” template and name it ‘CircularProgress-Tutorial’.
Step 2: Press ⌘ + N, select “Cocoa touch class” from file wizard. Press Next.
Change subclass to type “UIView”
and name it ‘CircularProgress’
. Language will be swift. Click finish and then save it your disk and click create.
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
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