Rounded Corners only on Top of a UIView

Question

Hi i am searching a clean solution without overwriting drawRect or stuff like that to create a UIView with Rounded corners on the Top of the View. My main problem here is to create variable solution if the view is getting resized or something like that. Is there a clean solution? Apple is this doing too on the first table item. it can't be so hard to do this.

Answer 1

You can do this by setting a mask on your view's layer:

CAShapeLayer * maskLayer = [CAShapeLayer layer]; maskLayer.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds byRoundingCorners: UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii: (CGSize){10.0, 10.}].CGPath;  self.layer.mask = maskLayer; 

IMPORTANT: You should do this in your view's layoutSubviews() method, so the view has already been resized from the storyboard

---

In Swift <= 1.2

let maskLayer = CAShapeLayer() maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: .TopLeft | .TopRight, cornerRadii: CGSize(width: 10.0, height: 10.0)).CGPath  layer.mask = maskLayer 

---

Swift 2.x

let maskLayer = CAShapeLayer() maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: UIRectCorner.TopLeft.union(.TopRight), cornerRadii: CGSizeMake(10, 10)).CGPath layer.mask = maskLayer 

---

Swift 3.x

let maskLayer = CAShapeLayer() maskLayer.path = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10, height: 10)).cgPath layer.mask = maskLayer 

Answer 2

Just tried with Swift 3.0 , Xcode 8.0:

REMEMBER to set your button in viewDidLayoutSubviews() or layoutSubViews as @rob described here .

And when you wanna change your button background, you just need to call:

yourButton.backgroundColor = UIColor.someColour 

Source:

override func viewDidLayoutSubviews() {     super.viewDidLayoutSubviews()      yourButton.layer.masksToBounds = true     yourButton.roundCorners(corners: [.topLeft,.topRight], radius: 5) }  extension UIButton {     func roundCorners(corners:UIRectCorner, radius: CGFloat)     {         let maskLayer = CAShapeLayer()         maskLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath         self.layer.mask = maskLayer     } } 

• Here is the result:

Default state:

Seleted state:

Hope this help!!