Summary

This article provides a tutorial on creating a custom pie chart using the UIBezierPath class in Swift, with a focus on drawing the chart's geometry and managing its segments.

Abstract

The article titled "What is a UIBezierPath in Swift? And how to create your own pie chart" is a step-by-step guide aimed at developers who want to create a pie chart UI element for their applications. The author, Zafar Ivaev, demonstrates how to subclass UIView to create a PieChartView and utilize the UIBezierPath class to draw the pie chart's segments. The tutorial emphasizes the importance of the @IBDesignable attribute for easy debugging and introduces a Segment struct with a didSet observer for managing the pie chart's data. The core of the tutorial covers the mathematical calculations and Swift code required to draw the segments, including finding the center and radius of the pie chart and calculating the starting and ending angles for each segment. The article concludes with the final implementation of the pie chart and instructions on how to debug it using a .xib file, along with a link to the complete source code on GitHub.

Opinions

The author believes that creating custom geometries is made easier with the UIBezierPath class.
The use of @IBDesignable is highly recommended by the author for its benefits in visualizing custom views within Interface Builder.
The author values the reusability of the pie chart component in future Swift applications.
The article suggests that understanding UIBezierPath is crucial for Swift developers who want to create complex custom UI elements.
The author emphasizes the importance of the Comparable protocol for the Segment struct to determine the relative sizes of the segments.
The step-by-step approach and the provision of the complete source code indicate the author's commitment to making the tutorial accessible and practical for developers.

What is a UIBezierPath in Swift?

And how to create your own pie chart

In this article, we will create a pie chart using the UIBezierPath class that helps us create custom geometries.

In just 100 lines of code, we will create our own UI element that you can reuse in your future applications.

The source code of the project is available at the bottom of the article.

Let’s Start

First, let’s create a UIView subclass called PieChartView:

We mark it as @IBDesignable to be able to easily debug it without needing to build and run the project. If you are not familiar with the declaration, feel free to quickly familiarize yourself with it in my article “What are @IBDesignable and @IBInspectable in Swift?”

Our pie chart will have colored segments, so we need to create a property to manage them:

Here we have the Segment struct conforming to Comparable. (We will want to figure out later which segment takes a higher percentage of the available space.) We also define the segments property as having a didSet property observer to trigger updates whenever the property changes.

Let’s now jump straight into the core of this tutorial: drawing the pie chart’s geometry:

We do two things here:

Create the drawSegments(_ segments:) method that calculates the starting and ending angle of all segments and draws each one sequentially
Override the draw(_ rect:) method and call the drawSegments(_ segments:) method

Let’s take a closer look at the drawSegments(_ segments:) method implementation:

To draw a segment, we need the following things:

Center of the pie chart
Radius of the pie chart
The starting angle (in radians) of the segment
The ending angle (in radians) of the segment

We can see how we easily obtain the center and the radius. The starting and ending angles are, however, more tricky.

This is our logic for finding angles of each segment:

Start with 3 * .pi / 2 angle. This is going to be the beginning of the first segment.
Iterate over segments.
Calculate the ending angle of each segment, taking into account the ratio of the segment.
Draw the current segment using the obtained properties.
Set the startAngle property to the endAngle of the last-drawn segment.
Repeat from step 3 until all segments are drawn.

It’s time to create the method that will create a UIBezierPath and draw a particular segment:

Create a path for our segment.
Close the segment with a line.
Prepare the provided color to fill our segment.
Fill the segment with the color.

The finishing step is to include that method inside the drawSegments(_ segments:) method. Now the final implementation looks like this:

The pie chart is done! We can now easily debug it using a .xib file:

Resources

Download the completed project on GitHub.

Thanks for reading!