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.
According to Apple, we can use UIBezierPath to define geometric shapes, such as rectangles, circles, curves, and polygons, among others. In other words, you can do whatever you want, the possibilities are endless.
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.
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.
· //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.
· //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.
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.
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.
5) We add another point, at the end of the view area on the x-axis, and 60 up the y-axis.
6) We can assume the next point will have the same height on the y-axis, and a small difference on the x-axis.
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.
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.
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.
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.
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.