Creating Custom Progress Bar in iOS using Swift

Ashika Kasiviswanathan
3 min readJan 5, 2018

As I started developing my own iOS app, often I faced the need to customize certain built-in UI elements to suit the application’s requirements. One such for me was to customize a progress bar.

In this article, I will go through the basics of building a custom progress bar. First, understanding of the built-in UIProgressView helped. When I say understanding, I mean just the key properties such as Progress tint, Track tint and Progress value shown in the Attributes inspector of XCode.

  • Progress tint — used in the foreground layer to show the progress.
  • Track tint — used in the background layer to show the outline of the progress bar.
  • Progress value — a pointer value that maintains the current state of progress

Lets get into building the custom progress bar part. The requirement is to create a circular progress bar.

Custom Progress Bar

3 steps to create the custom progress bar

  • Creating a path using UIBezierPath() in a custom view.
  • Creating two CAShapeLayer — one for foreground and another for background.
  • Setting the progress by manipulating the StrokeEnd value.

The class declaration would look like:

class ProgressBarView: UIView { 
var bgPath: UIBezierPath!
var shapeLayer: CAShapeLayer!
var progressLayer: CAShapeLayer!
}

Step 1:

UIBeizerPath lets you create anything from simple paths to complex polygons by adding a set of lines, arcs, curves and rendering it into a custom view. So first define the path of the progress bar you need using this. For our example, I have created a circular path.

private func createCirclePath() { 
let x = self.frame.width/2
let y = self.frame.height/2
let center = CGPoint(x: x, y: y)
bgPath.addArc(withCenter: center, radius: x/CGFloat(2), startAngle: CGFloat(0), endAngle: CGFloat(6.28), clockwise: true) bgPath.close()
}

I have used addArc() method to draw a circle for which startAngle and endAngle parameter are specified as radians. Other methods like addLine()

--

--

Ashika Kasiviswanathan

Software developer — Web and Mobile — ReactJS & Swift — In Love with building apps.