UIImage - decide which corners that should be rounded

Question

I know this is a usual problem, but I haven't seen any solution to this, hence this thread.

We've all create a grouped UITableView and tried to set the cell.imageView to a image. But what happends? The first and the last cell gets ugly because they're rectangular.

What we want to do is to only round the top left corner of the image in the first row and bottom left of the image in the last row.

A method like this:

cell.imageView.image = [image setCornerRadiusLeftTop: 10.0 rightTop: 0 leftBottom: 0 rightBottom: 0];`

Is there anybody out there that has done something similar?

Answer 1

One solution would be to use a layer mask :

cell.imageView.layer.mask = layerMask;

You would need two masks: one for the top, one for the bottom cells. You can use a CAShapeLayer to create such a mask.

Answer 2

Solution:

+ (CAShapeLayer *) roundedCornerOnImage: (UIImageView *)imageView onCorner: (UIRectCorner)rectCorner
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(10.0, 10.0)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = imageView.bounds;
    maskLayer.path = maskPath.CGPath;

    return maskLayer;
}

Example of usage on a imageview in a UITableViewCell:

if (indexPath.row == 0)
    cell.imageView.layer.mask = [Helper roundedCornerOnImage:cell.imageView onCorner:UIRectCornerTopLeft];
else if (indexPath.row == self.arrayPeople.count - 1)
    cell.imageView.layer.mask = [Helper roundedCornerOnImage:cell.imageView onCorner:UIRectCornerBottomLeft];