CODEWITHSUNDEEP
iosswiftuibuttonrounded-corners
Dave
Dave

Reputation: 12206

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?

Upvotes: 44

Views: 55606

Answers (10)

Ars
Ars

Reputation: 21

That's what helped me

extension UIView {

   func roundCorners(
      corners: UIRectCorner, 
      radius: CGFloat
   ) {
      let path = UIBezierPath(
         roundedRect: bounds,
         byRoundingCorners: corners,
         cornerRadii: CGSize(
            width: radius, 
            height: radius
         )
      )

      let mask = CAShapeLayer()
      mask.path = path.cgPath
      layer.mask = mask
   }
}

Pay attention to the fact that if you have layout constraints attached to it, you must refresh this as follows in your UIView subclass:

override func viewDidLayoutSubviews() {
   super.viewDidLayoutSubviews()

   yourButtonOutletName.roundCorners(
      corners: [.topLeft, .topRight],
      radius: yourButtonOutletName.frame.height / 2
   )
}

Upvotes: 2

sharath kumar
sharath kumar

Reputation: 21

rounding is applied to corner's of view/Button .. , but coming to border of button , it is not applying correctly. can I have any solution for that? @

Here is the code that I have used , which is working (border) in iOS11.0 and above and not in below versions(<11.0)

if #available(iOS 11.0, *) {
        self.layer.cornerRadius = radius
        self.layer.maskedCorners = maskedCorners
    } else {
        let shapeLayer = CAShapeLayer()
        shapeLayer.position = self.center
        self.layer.masksToBounds = true
        self.clipsToBounds = true
        let bezirePath = UIBezierPath(roundedRect: self.bounds,
                                      byRoundingCorners: corners,
                                      cornerRadii: CGSize(width: radius, height: radius))
        shapeLayer.bounds = frame
        shapeLayer.path = bezirePath.cgPath

        self.layer.mask = shapeLayer

Upvotes: 0

Scott
Scott

Reputation: 1342

For swift 5 and the most flexibility

Define an extension with a roundCorners function

extension UIButton {
    func roundCorners(corners: UIRectCorner, radius: Int = 8) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: corners,
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

Call the roundCorners function

myButton.roundCorners(corners: [.topLeft, .topRight])

enter image description here

Or with a specific radius

myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)

enter image description here

Upvotes: 9

Kirit Modi
Kirit Modi

Reputation: 23407

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

Upvotes: 59

Naishta
Naishta

Reputation: 12353

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
}

Upvotes: 65

dsunku
dsunku

Reputation: 513

iOS 11 has made it really easy to round corners. The code below rounds the top left and bottom right corners.

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

Upvotes: 12

Hossam Ghareeb
Hossam Ghareeb

Reputation: 7113

Update you extension to be like 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()
    let rect = self.bounds
    mask.frame = rect
    mask.path = path.cgPath
    self.layer.mask = mask
}
}

The shape layer (mask) needs to know the frame

Upvotes: 6

C. Kontos
C. Kontos

Reputation: 1258

For swift 3 Kirit Modi's answer is changed to:

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

At the start of the extension's file don't forget to add: 

import UIKit

If you want an extension for a UIView with the option of rounding top or bottom corners you can use: 

extension UIView {
   func roundedCorners(top: Bool){
       let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])        
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

Which is called for a button as:

myButton.roundedCorners(top: true)

Upvotes: 20

return true
return true

Reputation: 7916

You forgot to set the frame of your shape layer:

mask.frame = layer.bounds

Upvotes: 0

Iyyappan Ravi
Iyyappan Ravi

Reputation: 3245

Use this Code,

let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.CGPath
viewTo.layer.mask = maskLayer

hope its helpful

Upvotes: 2

Related Questions