How to have true rounded corners on a UITableView?

Question

I say true because while one can do tableView.layer.cornerRadius = 5.0, that method isn't 100%.

It works great when you have enough cells to fill the entire frame of the UITableView, but... if you don't have enough cells to fill it entirely, then you're in a rut because the cells won't be rounded.

I assume the best solution requires rounding the corners of the 1st cell (indexPath.row == 0) and the last cell (indexPath.row == data.count - 1)... but the problematic piece of this is that I need only the top 2 corners of the top cell rounded and the bottom two corners of the bottom cell rounded.

I've thought about using the UIBezierPath/CALayers method, but I don't know how costly it is and further, my cells all have custom heights, so I don't think I can accurately give my cell bounds that the UIBezierPath/CALayers method requires.

How would I achieve this?

@Fogmeister I've tried, but for some reason my cell disappears when I do it. — David, Sep 19 '15 at 10:15

score 0 · Answer 1 · answered Sep 19 '15 at 15:08

The best way to achieve your need is to apply rounded corner to top-left and top-right to first cell and bottom-left and bottom-right to last cell.

Using following code you can apply rounded corner to specific corner of any view.

- (void)applyRoundCornersToView:(UIView *)view withCorners:(UIRectCorner)corners withRadius:(CGFloat)radius {
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;

    view.layer.mask = maskLayer;
}

You can use above function to apply rounded corner to desired corners. To apply top corners rounded

[self applyRoundCornersToView:cell withCorners:UIRectCornerTopRight|UIRectCornerTopLeft withRadius:5.0];

To apply bottom corners rounded

[self applyRoundCornersToView:cell withCorners:UIRectCornerBottomRight|UIRectCornerBottomLeft withRadius:5.0];

I tried this, but for some reason the cell disappears. – David Sep 19 '15 at 17:09 — David, Sep 19 '15 at 17:09

How to have true rounded corners on a UITableView?

1 Answers1