Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Workaround for rounded corners of grouped UITableView, iOS7 [duplicate]

Since the introduction of iOS7, rounded corners for the cells of UITableView with grouped style is removed by Apple (confirmed here). Still, I am sure there are smart people out there who have built workarounds for this.

Please, to help me and a lot of other fellow iOS programmers, post your workarounds to get rounded corners for the cells in a UITableViewStyleGrouped in iOS7 in this thread. It will be much appreciated!

like image 859
OscarWyck Avatar asked Oct 04 '13 08:10

OscarWyck


1 Answers

Considering you can have multiple groups in your table, some cells are rounding in just in the top corners, other just in the bottom, and others are not rounded. So I created here really fast a subclass (that can be really shortened) of UITableViewCell with the following methods:

A property that you can call anything you want, I called top and bottom:

@property(nonatomic,assign) BOOL top,bottom;

The implementation:

- (void)layoutSubviews
{
    [super layoutSubviews];

    if(self.top && self.bottom)
    {
        self.layer.cornerRadius = 10;
        self.layer.masksToBounds = YES;
        return;
    }

    if (self.top)
    {
        CAShapeLayer *shape = [[CAShapeLayer alloc] init];
        shape.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)].CGPath;
        self.layer.mask = shape;
        self.layer.masksToBounds = YES;
        return;
    }

    if (self.bottom)
    {
        CAShapeLayer *shape = [[CAShapeLayer alloc] init];
        shape.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)].CGPath;
        self.layer.mask = shape;
        self.layer.masksToBounds = YES;
    }
}

In Swift 4.2:

class MyCell: UITableViewCell {

var top = false
var bottom = false

override func layoutSubviews() {
    super.layoutSubviews()

    if top && bottom {
        layer.cornerRadius = 10
        layer.masksToBounds = true
        return
    }

    let shape = CAShapeLayer()
    let rect = CGRect(x: 0, y: 0, width: bounds.width, height: bounds.size.height)
    let corners: UIRectCorner = self.top ? [.topLeft, .topRight] : [.bottomRight, .bottomLeft]

    shape.path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: 10, height: 10)).cgPath
    layer.mask = shape
    layer.masksToBounds = true
  }
}

To use is simple, if your cell is the first of a group, set top = True, if it is the last cell, bottom = true, if the cell is the only on the group set both to true.

If you want more or less rounded, just change the radios from 10 to another value.

like image 164
Roberto Ferraz Avatar answered Oct 19 '22 23:10

Roberto Ferraz