How to restore rounded corners for a UITableViewCell filled with an image?

Question

I have a UITableViewCell, and I want to use the image property to fill it with an image. When it is first in a grouped UITableView, I want it to have the standard rounded corners.

Unfortnately, the image fills the rounded corners as well.. Is there any way to retain them without using a transparent image?

Answer 1

You can round the corners of any view programmatically by using its layer property. If you play about with the cornerRadius property of the layer you should be able to achieve the results you want.

#include <QuartzCore/QuartzCore.h>

UIImage *myImage = [UIImage imageNamed:@"image.png"];
UIImageView *imgView = [[UIImageView alloc] initWithImage:myImage];
imgView.layer.cornerRadius = 10.0;

If you just want to round some of the corners, you should look at the UIBezierPath API and use the path to mask your image. This isn't tested but it should point you in the right direction:

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:cell.bounds
                                           byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                 cornerRadii:CGSizeMake(10.0, 10.0)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.frame;
maskLayer.path = path;
imageView.layer.mask = maskLayer;