Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Round Top Corners of a UIButton in Swift

I know I can round all four corners using:

 myBtn.layer.cornerRadius = 8  myBtn.layer.masksToBounds = true 

Since I only want to round two, I did some research and found this:

extension UIView {     func roundCorners(corners:UIRectCorner, radius: CGFloat) {         let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))         let mask = CAShapeLayer()         mask.path = path.CGPath         self.layer.mask = mask     } } 

Which is called like this:

view.roundCorners([.TopLeft , .TopRight], radius: 10) 

Yet this doesn't work for a UIButton. When I switch the extension to be for type UIButton and pass it a button , the output looks like this:

enter image description here

The question is, how do I adapt this to work on a UIButton?

like image 232
Dave G Avatar asked May 11 '16 13:05

Dave G


People also ask

How do you round UIView corners?

If you start with a regular UIView it has square corners. You can give it round corners by changing the cornerRadius property of the view's layer . and smaller values give less rounded corners. Both clipsToBounds and masksToBounds are equivalent.


2 Answers

Swift 4: For latest iOS 11 onwards

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     } } 

Earlier iOS (10,9 etc) Versions (works for iOS 11 too)

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 } 
like image 60
Naishta Avatar answered Sep 25 '22 04:09

Naishta


Adding Extension of UIButton:

extension UIButton{     func roundedButton(){         let maskPath1 = UIBezierPath(roundedRect: bounds,             byRoundingCorners: [.topLeft , .topRight],             cornerRadii: CGSize(width: 8, height: 8))         let maskLayer1 = CAShapeLayer()         maskLayer1.frame = bounds         maskLayer1.path = maskPath1.cgPath         layer.mask = maskLayer1     } } 

Calling in viewDidAppear/viewDidLayoutSubviews:

btnCorner.roundedButton() 

Button Corner OutPut:

enter image description here

like image 26
Kirit Modi Avatar answered Sep 23 '22 04:09

Kirit Modi