How to create a view with transparent half-circles in it, and add shadow

Question

I need to create a ticket in an app, like the image that I've attached. My problem is, that I can't seem to find a solution to make the transparent half-circle-holes, meanwhile making the shadows follow the hole.

The ticketview is going to used in a tableview cell.

My first thought was to make two views, one white, and one green, and then add some background-coloured circular views on the green part - but then the shadow won't look right.

Then I thought about adding it as an image, but I just think this solution is wrong, and not very iOS-developer-ish.. Also this won't scale right on different devices, and I won't be able to align text to the green part etc.

So I'm a little lost - how to fix this job?

Answer 1

Please follow the steps to solved your problem:

1. Take on UIView in you cell - Green view in your case
2. Add two subviews into it
3. One on top right and other on bottom right (Add Only half view in top right - remaining half portion of view must be out of your green view)

4. Add below code to set make it semi circular...

   firstCircleView.layer.cornerRadius = firstCircleView.frame.size.width + 2
   firstCircleView.clipsToBounds = true
   firstCircleView.layoutIfNeeded()
   
   secondCircleView.layer.cornerRadius = secondCircleView.frame.size.width + 2
   secondCircleView.clipsToBounds = true
   secondCircleView.layoutIfNeeded()
   

Notes : You need to create out of both of views.

Prefer Screenshot :

Output:

Note1 : i have added it in UIView instead of it you can add it in UITableViewCell . I have used gray background color in first screenshot for understanding purpose. Please make it to white while running app.