Image for post
Image for post
Diego Cavalcante Costa | Solutions Specific Knowledge Analyst, Technology | everis Brazil

A Little More about UIBezierPath with Swift

Today, we are going to talk a little more about UIBezierPath. You have probably heard of it, or maybe even used it. The idea is to explain how the logic behind UIBezierPath works, how we create points, and how a point creates a line.

Definition

If you want to take a look at the definition and methods available, here is the link: https://developer.apple.com/documentation/uikit/uibezierpath

In this example, we will draw the arrow shown below. It looks simple, but it is not that easy when you are learning to draw your first paths. So, let’s get to it.

Image for post
Image for post

Here, you may be wondering why you would do something harder than just importing an image to your project and using that. Well, the answer is simple. With UIBezierPath and CABasicAnimation/UIViewAnimation you can create incredible animations by using these two powerful APIs together, making your application more interesting and user-friendly. The next step is to design the arrow using UIBezierPath.

Image for post
Image for post

· //1 The class is inherited from CAShapeLayer to make life easier, but it could also be a UIView.

· //2 We are stating that the initialization/instance signature is to input a CGRect (position x size).

· //3 This class does not support use by Interface Builder, so it cannot be used via Xib or Storyboard.

· //4 A basic setup, simply to give the visual characteristics of our UIShapeLayer.

· //5 Giving color and shape.

· //6 Line color.

· //7 Line width.

Image for post
Image for post

· //1 We take the view height and width, and divide by 2, to provide the center point.

· //2 View height and width, to help create the lines/points.

· //3 We create the UIBezierPath.

Image for post
Image for post
complete UIBezierPath

It is easier to understand if you create your UIBezierPaths, you always look at it as a point, rather than a line. I believe this confusion is due to the name of the method (addLine:to:). Above, an image of all the points drawn, for clarity.

Image for post
Image for post
path.move(to: CGPoint(x: center.x, y: 0)) //4

In line 4, we are telling the Bezier that we will begin our points from the center of the view at the top. This informs the UIBezierPath that it should begin from these points. For example, because we have set the center of the view as the starting point, we need to think of the next point being near the starting point. You can see in line 5 that I went right, but nothing prevents me from going left instead. However, it would not work to skip directly to step 7 or a later step, because UIBezierPath will always try to connect the lines, which is why I do not think this would work very well.

Image for post
Image for post
path.addLine(to: CGPoint(x: size.width, y: 60)) //5

5) We add another point, at the end of the view area on the x-axis, and 60 up the y-axis.

Image for post
Image for post
path.addLine(to: CGPoint(x: size.width — 20, y: 60)) //6

6) We can assume the next point will have the same height on the y-axis, and a small difference on the x-axis.

Image for post
Image for post
path.addLine(to: CGPoint(x: size.width — 20, y: size.height)) //7

7) At this point, our goal is to create the shaft of the arrow. It is easy to make, just use the same x-value as before and apply the height of the view for the y-value. This means the shaft will be as tall as the view.

Image for post
Image for post
path.addLine(to: CGPoint(x: 20, y: size.height)) //8

8) Now we will talk about the view width. To do so, we will adjust the x-axis. The trick here is to input the same value we used to make the change in step 6, which is (size.width — 20). We take the difference, which in this case is 20, and apply it to the x-axis, because the y-value remains in the same position as the previous point.

Image for post
Image for post
path.addLine(to: CGPoint(x: 20, y: 60)) //9

9) In this step, we will use the same x-value as the previous point, and change the y-axis. The y-value will be the same as step 6, keeping the height of the two points equal.

Image for post
Image for post
path.addLine(to: CGPoint(x: 0, y: 60)) //10

10) On this step, we will retain the same y-value as the previous step, and will change only the x-value. This is the opposite of step 5, where we input the width of the view. In this case, we can input the value 0.

Image for post
Image for post
path.addLine(to: CGPoint(x: center.x, y: 0)) //11

11) Finally, we will input the final point, which is the center of the view on the x-axis, and will not have a height on the y-axis. These are the same coordinates as step 4, except that in this case it is optional, because UIBezierPath will always look for a way to find the next line, based on the previous points and the starting point.

12) We complete our UIBezierPath, then move on to UIShapeLayer to render the points.

There is no limit to what you can create using UIBezierPath. Use your imagination and have fun creating.

I reviewed a lot of material online about how UIBezierPath works, but did not find much. All I found was codes, with meaningless explanations. With a lot of research, I found the underlying logic. From that moment, everything made sense, so I am sharing this content in hopes that it helps others.

Exponential intelligence for exponential companies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store