How to corner radius only top left and top right of table view custom cell on Iphone +

Question

How to corner radius only top left and top right of table view custom cell .I write following code and it working fine on iphone 6, 5,7 . but on Iphone 6+, 7+ it look like given screen.

My code is ----

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomeCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomeCell"];
 if (indexPath.row == 0) {        
        UIBezierPath *maskPath = [UIBezierPath
                                  bezierPathWithRoundedRect:cell.contantsView.bounds
                                  byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
                                  cornerRadii:CGSizeMake(4, 4)
                                  ];

        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = cell.bounds;
        maskLayer.path = maskPath.CGPath;
        cell.contantsView.layer.mask = maskLayer;
        cell.contantsView.layer.masksToBounds = YES;

    }


    return cell;
}

And my screen look like --:

it this screen I corner radius of only first and last cell . Center cell are look fine . I want to look all cells width same .

Answer 1

The issue is that when cellForRowAtIndexPath is called, the cell.contentView.bounds (and I assume your contantsView is inside that) is not the same as the cell.bounds . While you're setting the frame of your layer using the bounds of the contantsView , but when creating the UIBezierPath for your mask, you are using the bounds of the cell , itself. These are not the same (at the time of cellForRowAtIndexPath , at least).

So, that suggests a couple of possible fixes:

• The simple fix is to cell.bounds rather than cell.contantsView.bounds when defining the bezier path. You're using one CGRect for the path of the shape layer and another for the frame of that same shape layer. You really should use the same CGRect for both, and cell.bounds doesn't suffer this weird size issue.

• The frame of the contentView of the cell changes after cellForRowAtIndexPath is called. So the above fix just happens to work because cell.bounds doesn't change, whereas the contentView (and thus likely your contantsView ) does.

  The correct fix is that you really should put the masking of the layer in the layoutSubviews for that view that you're masking. (This, by the way, will also make sure that the mask gets set appropriately if you change orientation on the device, as well as anything else that might change the dimensions of the contentView .)

  If you don't want to bother subclassing the contantsView and implementing layoutSubviews for that, you can, theoretically, put the masked background color on the cell itself, rather than on contantsView , and implement layoutSubviews in CustomeCell . (Frankly, that might be the right view to be applying this background to, anyway.) But at whatever view you apply the background color, the masking of the view's corners should really be happening in its layoutSubviews .