Multi-Segment Progress Indicator on Swift.

Multi-Segment Progress Indicator on Swift.

On my last project, I had a multi-segment progress indicator challenge. On the first version of the design, this indicator was a half-circle, and I have a half-circle progress indicator post too. UIBezierPath’s way to draw shapes and animations isn’t too easy, and it was interesting for me, to do it in the right way because at first it was hardcoded only on 4 segments. After that design was changed in the third time, and now I need to create a progress indicator with 6 segments, again ????. My previous 4 segment indicator was hardcoded, and that means that I need to build it again. But that’s time I decide to create a multi-segment UI element that will be driven by input data. (Anyway, in the fifth version of design we decided to use simple circle indicator ????, but I hope this UI element can be helpful to someone else).

I want to share my experience in custom progress indicator creation. I will show how to create a custom multi-segment progress indicator drawn with UIBezierPath.

Here on Github, you can find ready to use multi-segment element.

This UI ELement has ANSegmentIndicatorSettings structure and you can easily customize this indicator to your needs.

How to draw segment

At first, I will show you how to draw one segment.

Some important data from this code are visible in the image below. So it is easy to draw one segment if you know its thickness, start and end points (in radians), and radius.

So we need to define all this data for each segment.

How to calculate segment data

The width of the full circle is 2 * pi. Progress Indicator has a static space between segments, and we know a count of segments. For drawing, we need only a segment width.

allSegmentsWidth = fullCircleWidth – countOfSegments * spaceBetweenSegments

segmentWidth = allSegmentsWidth / countOfSegments.

How to calculate startpoint and endpoint of each segment

halfSpace = spaceBetweenSegments / 2

startPoint = segmentWidth * index + halfSpace + 2 * halfSpace * index

endPoint = startPoint + segmentWidth

With these formulas, we can easily draw any segment on any index.

How to customize the indicator

For customization, the indicator has a settings variable. You can select color, width, space, etc.

You can easily copy file ANSegmentIndicator.swift in your project

My Social Media

LinkedIn Twitter Original Blog Github