Drawing a rectangle with only two rounded corners using Bezier Path and Storyboarding in Swift 2.3

Question

I have Table View with 5 cells as described below. The intent is to have a topRoundedBorderCell with a white fill and just the TopLeft and TopRight borders rounded, then have the flexibility to add as many cells as needed with the white fill and squared corners for as many options as desired, lastly the bottomRoundedCornerCell will have the white fill with just the BottomLeft and BottomRight corners rounded. Creating the illusion of one long white box with rounded corners that fits all of the options pertaining to one group. Shown below.

Storyboard cells breakdown:

When I run the app:

However, as you can see in the 2nd image, only the TopLeft border is rounded, the rest remain squared.

I am using the Bezier Path roundedRect method in 2 separate classes of type UIView which I assign to the respective views through my Storyboard.

Top Rounded Borders View:

class TopRectangleRoundedCornersView: UIView {

    override func awakeFromNib() {

        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [UIRectCorner.TopLeft , UIRectCorner.TopRight], cornerRadii: CGSize(width:10.0, height:10.0))
        let mask = CAShapeLayer()
        mask.path = path.CGPath
        self.layer.mask = mask
        self.layer.backgroundColor = UIColor.whiteColor().CGColor //white fill
    }

}

Bottom Rounded Borders View:

class BottomRectangleRoundedCornersView: UIView {

    override func awakeFromNib() {
        let path = UIBezierPath(roundedRect: self.bounds,
                                byRoundingCorners: [UIRectCorner.BottomLeft, UIRectCorner.BottomRight], cornerRadii: CGSize(width: 10.0, height: 10.0))
        let mask = CAShapeLayer()
        mask.path = path.CGPath
        self.layer.mask = mask
        self.layer.backgroundColor = UIColor.whiteColor().CGColor //white fill
    }
}

Since the bounds.origin is always 0,0 and your upper left corner is the only one being rounded it makes me think maybe the size of your view isn't set until after awakeFromNib is called. I'm not sure about that, but I'd put a breakpoint in there and see if there's truth to that. You also need to call `super.awakeFromNib()` — creeperspeak, Mar 03 '17 at 23:34
If those views are being resized (auto-resized?) then you would need to recreate the path. — Gary Makin, Mar 03 '17 at 23:39
yes, the views are auto resized, does that mean that I should be doing this in my Table View Controller at the time the cell is gets rendered? — Jace, Mar 03 '17 at 23:47
It would be best in an override of UIView's `layoutSubviews` in your classes. — Gary Makin, Mar 04 '17 at 00:12

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

You need to adjust your path when the views are being resized. See the answers in to question Is there a UIView resize event? for some good advice.

My favourite would be the one suggesting adding a didSet() to the bounds property of the views.

edited May 23 '17 at 12:32

Community

1
1

answered Mar 04 '17 at 00:24

Gary Makin

3,109
1
19
27

1

Thank you so much! That's exactly what I needed. – Jace Mar 04 '17 at 00:30
class BottomRectangleRoundedCornersView: UIView { override var bounds: CGRect { didSet { let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [UIRectCorner.BottomLeft, UIRectCorner.BottomRight], cornerRadii: CGSize(width: 10.0, height: 10.0)) let mask = CAShapeLayer() mask.path = path.CGPath self.layer.mask = mask self.layer.backgroundColor = UIColor.whiteColor().CGColor //white fill } } } – Jace Mar 04 '17 at 00:31
as you suggested I moved my code to override var bounds: CGRect { didSet { // Do stuff here } } instead of using awakeFromNib. Works beautifully now! – Jace Mar 04 '17 at 00:32
Happy to be of assistance :) – Gary Makin Mar 04 '17 at 00:32

Drawing a rectangle with only two rounded corners using Bezier Path and Storyboarding in Swift 2.3

1 Answers1