How can you make a UIView with rounded top corners and square bottom corners

Question

I am trying to get a view with rounded top corners and square bottom corners similar to the top row of a grouped UITableViewCell.

Does anyone know an easy way to draw it and not use a background image?

Answer 1

I read this post a while ago:

Only two rounded corners?

as well as this follow-up message:

Two rounds in a UIView

I think they should answer your question.

Answer 2

Swift 4: for iOS 11 and above

override func viewDidLoad() { super.viewDidLoad() if #available(iOS 11.0, *) { self.viewToRound.clipsToBounds = true viewToRound.layer.cornerRadius = 20 viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] } else { // Fallback on earlier versions } } 

Previous iOS versions

 override func viewDidLayoutSubviews() { self.viewToRound.clipsToBounds = true let path = UIBezierPath(roundedRect: viewToRound.bounds, byRoundingCorners: [.topRight, .topLeft], cornerRadii: CGSize(width: 20, height: 20)) let maskLayer = CAShapeLayer() maskLayer.path = path.cgPath viewToRound.layer.mask = maskLayer } 

Answer 3

IOS 11 introduced a new structure called CACornerMask .

Using this structure, you can make changes to the corners: upper, upper, lower left, lower right.

Swift sample :

 myView.clipsToBounds = true myView.layer.cornerRadius = 10 myView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner] 

Objective-C Sample

 self.view.clipsToBounds = YES; self.view.layer.cornerRadius = 10; self.view.layer.maskedCorners = kCALayerMinXMinYCorner | kCALayerMaxXMinYCorner;