clipsToBounds and masksToBounds in grouped UITableViewCell

Question

I'm trying to get my UITextView's corners to be masked by the rounded corners of the grouped UITableViewCell that contains it. Here's a screenshot of the cell as it currently stands

Here's some of the code I'm using to try to prevent the corners from overlapping my cells borders. I tried both

cell.contentView.layer.masksToBounds = YES;
cell.layer.masksToBounds = YES;  //tried this as a test, still doesn't work
detailTextView.clipsToBounds = YES;
[cell.contentView addSubview:detailTextView];

and

cell.layer.masksToBounds = YES;
cell.contentView.layer.masksToBounds = YES;
detailTextView.clipsToBounds = YES;
[cell addSubview:detailTextView];

This is obviously not working, what am I missing?

Peritoneum

have you tried cell.clipsToBounds = YES;? – Engraft

Yes but that's not what I need anyway. clipsToBounds means that the cell would hide parts of it's layer that are outside it's parents. I want the UITextView to hide the parts of its layer outside its parent (the cells contentView/the cell itself) – Peritoneum

the bounds of your contentView are bigger than the bounds of your cell so clipping the contentview will not solve your problem - you have to clip to the cell – Benzoyl

Are you using storyboards? I think you can just check Clip Subviews on the cell but I am not sure how to do this in code. – Engraft

Pfitz, masking at the cell or cell.contentView level makes no difference. Neither does adding the detailTextView as a subview of one or other. – Peritoneum

I'm beginning to think that the rounded corners in the grouped UITableViewCell aren't actually bounds but just bitmaps that make the cell look pretty. – Peritoneum

Or at least they aren't a value that you can access via the contentView and are part of some subview of contentView – Peritoneum

A couple ideas - have you tried cell.contentView.clipsToBounds = YES;? I'm guessing you have, but I don't see it in the code anywhere. You might have to create a mask layer based on cell.backgroundView. Be careful with that approach though, as it will probably reduce your frame rate, particularly while scrolling. – Telex

Answer 1

I'm pretty sure that you can't mask the corners this way. The cell's backgroundView is an image for a grouped UITableView so there's no sense of masking.

A possible solution to the problem would be to round the corners yourself. This is a little tricky since you only want to round the top corners of the top cell and the bottom corners of the bottom cell. Fortunately, @lomanf posted a great solution to rounding arbitrary corners here: Round two corners in UIView. Using his MTDContextCreateRoundedMask method, we can achieve our goal.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // Other cell instantiation

    // First cell in section
    if (indexPath.row == 0) {
        [self roundTopOrBottomCornersOfCell:cell top:YES];       
    }
    // Last cell in section
    else if (indexPath.row == tableView.numberOfRowsInSection:indexPath.section-1) {
        [self roundTopOrBottomCornersOfCell:cell top:NO];
    }
}

// Modified from the second part of @lomanf's Solution 1
- (void)roundTopOrBottomCornersOfCell:(UITableViewCell*)cell top:(BOOL)top {
        // Set constant radius
        CGFloat radius = 5.0;

        // Create the mask image you need calling @lomanf's function
        UIImage* mask;
        if (top) {
            mask = MTDContextCreateRoundedMask(self.view.bounds, radius, radius, 0.0, 0.0);
        }
        else {
            mask = MTDContextCreateRoundedMask(self.view.bounds, 0.0, 0.0, radius, radius);
        }

        // Create a new layer that will work as a mask
        CALayer* layerMask = [CALayer layer];            
        layerMask.frame = cell.bounds;

        // Put the mask image as content of the layer
        layerMask.contents = (id)mask.CGImage;

        // Set the mask layer as mask of the view layer
        cell.layer.mask = layerMask;
}        

Coltish

Answer 2

Same problem occurred to me

The difference is that i'm using the plain style and I'm trying to make every cell with rounded corner. Finally, i made it,here is my way:

1. put this code in your custom tableViewCell's awakeFromNib method

    [cell.layer setMasksToBounds:YES];
    [cell.layer setCornerRadius:5.0];

2. set your custom TableViewCell's contentview's backGround color to white color,then set your tableView's backgroung color to clear color. That's all.

Cockfight