How to make top edges of a UIbutton square in swift3 ios

Question

@IBOutlet weak var button: UIButton!
    override func viewDidLoad() {

        button.layer.borderWidth = 0.5
        button.layer.cornerRadius = 10
        button.layer.masksToBounds = true
        button.layoutMargins.left = 5
        //roundCorners(corners: [.bottomLeft, .bottomRight], radius: button.cornerRadius)
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

I have a button with cornerRadius=10. But i need to show the top edges of the button in square shape. how can I achieve this?

Please share exactly the button image so i will let you know — Rahul Anand, Jul 19 '17 at 06:04
Possible duplicate of [Round Top Corners of a UIButton in Swift](https://stackoverflow.com/questions/37163850/round-top-corners-of-a-uibutton-in-swift) — jegadeesh, Jul 19 '17 at 06:11
https://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview — Lalit kumar, Jul 19 '17 at 06:13
@RahulAnand : he want just put `cornerRadius` just by rounding Rect of Bottom Left and Bottom Right . :p — Dhiru, Jul 19 '17 at 06:18
Don't forget to app Swift / Objetivc-c Tag in your Question , @Rakesh — Dhiru, Jul 19 '17 at 06:20

score 0 · Answer 1 · answered Jul 19 '17 at 06:06

0

You can achieve this by Using UIBezierPath

let path = UIBezierPath(button.bounds,
                    byRoundingCorners:[.bottomRight, .bottomLeft],
                    cornerRadii: CGSize(width: 10, height:  10))

let maskLayer = CAShapeLayer()

maskLayer.path = path.cgPath
button.layer.mask = maskLayer

answered Jul 19 '17 at 06:06

Ashish Rupareliya

76
4

But the top edges are not connected. It is disconected from the edges. – Rakesh Jul 19 '17 at 06:13
@Rakesh didn't get you exactly what you want? – Ashish Rupareliya Jul 19 '17 at 06:26
I need to show the top edges of a button in square shape while the bottom edges remain in rounded corners – Rakesh Jul 19 '17 at 06:46
@Rakesh Above code give Corner radius to bottom and top edges remain same – Ashish Rupareliya Jul 19 '17 at 06:53

score 0 · Answer 2 · answered Jul 19 '17 at 06:09

You may create an extension of UIView like:

public extension UIView {

    /// Set some or all corners radiuses of view.
    ///
    /// - Parameters:
    ///   - corners: array of corners to change (example: [.bottomLeft, .topRight]).
    ///   - radius: radius for selected corners.
    public func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let maskPath = UIBezierPath(roundedRect: bounds,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        let shape = CAShapeLayer()
        shape.path = maskPath.cgPath
        layer.mask = shape
    }

}

And then use this to round your button like:

yourBtn.round([.bottomLeft, .bottomRight], radius: 10)

Where should i give this code? : yourBtn.round([.bottomLeft, .bottomRight], radius: 10) — Rakesh, Jul 19 '17 at 06:21

score 0 · Answer 3 · answered Jul 19 '17 at 07:21

In swift 3.0, you can try this code in your view controller's viewDidload method

let rectShape = CAShapeLayer()
rectShape.bounds = self.yourBtnName.frame
rectShape.position = self.yourBtnName.center
rectShape.path = UIBezierPath(roundedRect: self.yourBtnName.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 10, height: 10)).cgPath

//Here I'm masking the textView's layer with rectShape layer
self.yourBtnName.layer.mask = rectShape

Your button look's like

score 0 · Answer 4 · answered Jul 22 '17 at 06:15

0

button.layer.cornerRadius = 2;
button.layer.borderWidth = 1;
button.layer.borderColor = UIColor.whiteColor().CGColor

and also set button height and width (10,10)

answered Jul 22 '17 at 06:15

ronak patel

400
5
17

How to make top edges of a UIbutton square in swift3 ios

4 Answers4