Dynamically make rounded corners in UITableViewCell while supporting edit mode

Question

I've a table, with one section (which is default behaviour). It has 5 rows by default, and can have rows < 5 or rows > 5 rows based on some user interaction with the app.

I want to make first and last cell to be rounded from top left/ right and bottom left/ right respectively.

I'm able to do it by UIBezierPath and CAShapeLayer. But the problem is comes when number of rows will get increase/ decrease. I'm not sure how to reset previously rounded cells and update a new one with particular case?

Another problem occurs when I put table in edit mode, when a delete button will be visible, it'll not show for the first and last cells. Its there, but not visible.

Here's the screenshot from the app.

The blue border is a table view.

enter image description here

Table without border looks like this, note rounded corners in first and last row.

enter image description here

If I wants to delete first and last cell then it'll look like below images,

enter image description here

For other cells, it'll look like this,

enter image description here

Can any one tell me, what I'm doing wrong here?

Here's my code:

- (void) roundCornersAtTopInView:(UIView *)view withRadius:(float)radius withSize:(CGSize)size {
    UIRectCorner corner = (UIRectCornerTopLeft | UIRectCornerTopRight);
    UIView *roundedView = view;
    CGRect actualRect = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, size.width, size.height);
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:actualRect byRoundingCorners:corner cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = actualRect;
    maskLayer.path = maskPath.CGPath;
    roundedView.layer.mask = maskLayer;
    roundedView.layer.masksToBounds = YES;
}

- (void) roundCornersAtBottomInView:(UIView *)view withRadius:(float)radius withSize:(CGSize)size {
    UIRectCorner corner = (UIRectCornerBottomLeft | UIRectCornerBottomRight);
    UIView *roundedView = view;
    CGRect actualRect = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, size.width, size.height);
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:actualRect byRoundingCorners:corner cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = actualRect;
    maskLayer.path = maskPath.CGPath;
    roundedView.layer.mask = maskLayer;
    roundedView.layer.masksToBounds = YES;
}

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

Use Grouped TableView This will help you out to achieve your goal.

Workaround for rounded corners of grouped UITableView, iOS7

edited May 23 '17 at 11:59

Community

1
1

answered Mar 11 '15 at 05:43

riyaz

1,093
1
8
21

I'm not using a group table. Instead, I'm able to show rounded corners on a simple table.. the problem comes when table goes into edit mode and a delete button will not visible on the table. – Hemang Mar 11 '15 at 05:55
My suggestion is to use Grouped tableView, Which is a common solution. Regarding the disappearance of the delete button, you need to publish your code here to debug. – riyaz Mar 11 '15 at 05:58

Dynamically make rounded corners in UITableViewCell while supporting edit mode

1 Answers1