Adding circular corner only on the top of the view

Question

I'm trying to achieve a view like this:

I've been trying using this piece of code let maskPath = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topRight, .topLeft], cornerRadii: CGSize(width: 140, height: 140))

But all I got is something like this:

I've already tried to change width and height values, but the view seems to not change at all, so how do I draw a view which contains that rounded top as shown in the first image?

Thanks for suggesting a solution , but as I said above, I can set the corners rounded, I can't make only the top of my view circular, so this is a different question.

Possible duplicate of [how to set cornerRadius for only top-left and top-right corner of a UIView?](http://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview) — , May 11 '17 at 18:13
Actually it's not duplicated because I can make the corners rounded, what I want is to make them circular, just like I show in the first image — Renan Camaforte, May 11 '17 at 18:18

score 0 · Accepted Answer · answered May 11 '17 at 18:05

You could try using a circular UIBezierPath and adjusting its radius. This way, as long as your view doesn't extend indefinitely (like a UIScrollView could), you'll get the effect you want.

let radiusRatio = CGFloat(2 / 3)

let screenRect = UIScreen.main.bounds
let screenHeight = screenRect.height
let screenWidth = screenRect.width
let circleCenter = CGPoint(x: screenWidth / 2, y: screenHeight / ((1/radiusRatio) * 2))

let maskPath = UIBezierPath(arcCenter: circleCenter,
                            radius: screenHeight * radiusRatio,
                            startAngle: 0, 
                            endAngle: CGFloat.pi,
                            clockwise: true)

The radiusRatio variable controls how much of the screen's height the circle's radius takes, or in other terms, how down low your circle's center is. Adjusting the radiusRatio should eventually give you what you want.

I tried to add the code above to my view: `let maskLayer = CAShapeLayer() maskLayer.frame = circularView.bounds maskLayer.path = maskPath.cgPath circularView.layer.mask = maskLayer`, but nothing happened, I think I might be doing something wrong. — Renan Camaforte, May 11 '17 at 18:53

Adding circular corner only on the top of the view

1 Answers1