Create a UIView with rounded top edge

Question

I would like to create an UIView with rounded top edge like this image, how can I do it please?

Wanted result

Not wanted result

Answer 1

To repost an answer I posted on a different thread:

I can now confirm that this is a bug introduced after iOS 6. I have an old 4s running iOS 6.1. On that machine, this code:

  path = [UIBezierPath bezierPathWithRoundedRect: bounds
    byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight
   cornerRadii: CGSizeMake(bounds.size.width/2, bounds.size.width/6)
 ];

Creates a rounded rectangle with the corners oval-shaped. The curve is much more gradual on the top part of the curve, and much sharper on the sides, as you would expect:

This is the iOS 6.1 image, with the corners as they should be:

And here is what the same code looks like when run from iOS 8.1.2:

It appears that on iOS >=7.0, it ignores the height of the specified radius and uses the width value for both the height and the width of the corner ovals, which forces them to always be quarter circles.

I've logged a bug on apple's bug reporter system. We'll see what they say. I suggest everybody else who's seeing this problem report a bug also. The more reports they get, the more likely they are to fix it.

(ignore the UISwitch at the bottom. That's left over from a previous test.)

Edit: I've written code that builds a bezier curve that roughly approximates the look of the curve generated by iOS < 7. I just found an article on approximating circles with bezier curves. Using the control points from that article it wouldn't be that hard to build our own equivalent of the bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: method that works on all versions of iOS.