Grouped UITableViews and Image Masking

So with a grouped UITableView I expect an image placed in UITableViewCell's imageView in the top row to look like this (from the iTunes app):

Instead I get this:

The section doesn't appear to mask the cell's image view. Why not? I've tried everything I can think of. A开发者_运维知识库s far as I can tell, this is a bog-standard set up. The UITableView is part of a UITableViewController, no custom UITableViewCell.

Has anyone else run into this? Is there a simple way to achieve this without custom UITableViewCells? I tried Matt Gallagher's code but he's not masking the image in the top (and bottom) rows.

This is similar to Adam Eberbach's answer, but slightly different (and worked for me on iOS 5):

#import <QuartzCore/QuartzCore.h>
...
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.contentView.layer.masksToBounds = YES;
    cell.contentView.layer.cornerRadius = 9.0f;
}

I just added that to my UITableView delegate, and the grouped cells clipped the subviews which ran outside their bounds.

Hope I'm not being obvious - but did you try setting imageView.clipsToBounds?

(it's not that, I just tried it.)

Here's the hard way...

#import <QuartzCore/QuartzCore.h>


cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 9.0;

(at least it's 9.0 on my simulator set to "retina".)

That leaves you with an image with four rounded corners which is not exactly what you want but is halfway. Now if you clipped the image and then did a two-stage replacement, first replacing the right edge of the image with a rect (top and bottom right corners) and then a small rect for the bottom left corner you would have what you want. Fussy I know but I don't think there is an easy answer.

I think the most right thing to do might be to composite this into a UIImage where the corner you need is transparent, then in cellForRowAtIndexPath just apply the special UIImage rather than the normal image if it is a group-first or group-last cell.

CGContextClipToMask looks like the one to use.

There better solutions that only round the top-left and/or the bottom-left corner in the following stackoverflow answers:

https://stackoverflow.com/a/10515546/32749

and

https://stackoverflow.com/a/5567613/32749