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