Circular progress view
Designing circular progress view
- 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
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