Draw a custom ticket view in Swift 5 with CAShapeLayer

Last few days ago, I tried to draw a ticket shape custom view in UIKit. It’s pretty fun to do so why don’t I share it with you.

Initial set up:

1. Create an ordinary UIKit project in XCode.
2. Create a UIView class named ‘TicketView’.

We’ll add that ticket view inside our ViewController class. Firstly, we should give some background colour to the ticket view to make sure it’s working. Plus, let’s round the layer’s corner by setting its radius to 18 points.

Then, add ticket view inside our ViewController and run your code.

You should see something similar to figure 1.

Creating a shape layer

Starting from now, our focus is on drawing the actual ticket shape. Create a func called drawTicket and call it inside the layoutSubviews() lifecycle method.

Every UIView has a layer called CALayer which is the fundamental drawing unit in the world of iOS. The shape of a view always depends on its layer’s shape. What we’re interested in is the CAShapeLayer, one of the subclasses of CALayer, which provides powerful facilities for drawing 2D shapes. We are going to work on that CAShapeLayer to draw the ticket shape and add it as the sub-layer of our TicketView. Set the fill colour to red so that you can see it. Run your code again. You will not see any difference in design.

This is because CAShapeLayer has a property called path which is used to render the shape of the layer. Since we still haven’t initialized the path yet, it can’t render the shape. So, let’s draw a UIBezierPath. Your drawTicket() func should now look something like this. Run it again. You will now see a rounded red rectangle with the same size as your shape layer as shown in figure 2.

Now, what I want to do is add an arc to the ticket shape path so that we can imitate the ticket’s side cutting parts.

Create a UIBezierPath object called topLeftArcPath with the init(arcCenter:radius:startAngle:endAngle:clockwise) initializer. I won’t tell much detail on how UIBezierPath works nor how to draw an arc in this article. Let’s draw an arc with a radius of 18 points and centre at (x: 0, y: 0), append the topLeftArcPath to our ticketShapePath and run the code again. You will see a partially blue arc at the top leading side as shown in figure 3. Remember, we set our view’s background colour to systemBlue at the beginning.

Let’s put the arc centre 100 points away from the top and change the ticket view’s background colour to .clear or .systemBackground inside init(frame:) callback. There you have it. If you run now, you’ll see a first cutting arc on the left. Your code should look something similar to this.

It’s time to draw the topRightArcPath. The process is very similar to what we did previously. Tweak the x coordinate to the view’s width, the y coordinate is the same but draw in a clockwise direction. UIBezierPath has a useful method called reversing() which will return the reversed contents of the current path. The trick here is using that method when appending the topRightArcPath to the ticketShapePath. Run your code again. You’ll see another cutting path on the right side as shown in figure 5.

Now, you get the idea. Draw bottomLeft and bottomRight arc as we did above. The key point here is calculating coordinates and where you want them to display. After adding some final adjustments, you have your super fancy DIY custom shape ticket view like figure 6 and 7.

If you enjoy this, please follow me on Medium (if you haven’t already) for future articles. It motivates me to create more contents.

Thank you for reading till the end 🙏🏻

The full source code for this article is here.