dobiho
dobiho

Reputation: 1035

First and Last cell's round corner of UITableViewCell grouped table

I made custom uiTableViewCell and used it UITableview like screen shot. Problem is first and last cell's round corner on the groupd table. enter image description here

How to make fist and last cell round corner

Upvotes: 2

Views: 5329

Answers (3)

kkodev
kkodev

Reputation: 2607

Add tableView as a property to your cell, and set it in your controller:

@property (nonatomic, weak) UITableView *tableView;

Then you can implement it like this:

- (void)layoutSubviews {
    [super layoutSubviews];

    UIRectCorner rectCorner;
    BOOL roundCorners = YES;
    NSIndexPath *indexPath = [self.tableView indexPathForCell:self];
    NSInteger numberOfRows = [self.tableView numberOfRowsInSection:indexPath.section];

    if (numberOfRows == 1) { // single cell
        rectCorner = UIRectCornerAllCorners;
    } else if (indexPath.row == numberOfRows - 1) { // bottom cell
        rectCorner = UIRectCornerBottomLeft | UIRectCornerBottomRight;
    } if (indexPath.row == 0) { // top cell
        rectCorner = UIRectCornerTopLeft | UIRectCornerTopRight;
    } else {
        roundCorners = NO;
    }

    if (roundCorners) {

        CGFloat cornerRadius = 10.0;
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds
                                                       byRoundingCorners:rectCorner
                                                             cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = self.bounds;
        maskLayer.path = maskPath.CGPath;
        self.layer.mask = maskLayer;
    }
}

You could avoid having tableView on a property by checking for self.superview.superview (iOS7, self.superview before), but I think it's a cleaner and less error-prone way.

Upvotes: 3

Yunus Nedim Mehel
Yunus Nedim Mehel

Reputation: 12389

Try setting the background color of the cells clearColor: Your table seems to have rounded corners, but your cells are overriding it. Another alternative solution might be to change the properties of the view behind the table. Try:

backgroundView.clipsToBounds = YES;

or

tableView.layer.cornerRadius = 5;
tableView.layer.masksToBounds = YES;

You may need to

#import <QuartzCore/QuartzCore.h>

Upvotes: 0

Legolas
Legolas

Reputation: 12345

The trick is to set

view.layer.cornerRadius = 10;

Look at this sample project on this link! .

Upvotes: 0

Related Questions