UITableViewCell has a square corner with an image

Question

I have a grouped UITableViewone that contains several cells (only standard UITableViewCells), all of which have a style UITableViewCellStyleSubtitle. Bueno. However, when I insert images into them (using the provided property imageView), the corners on the left side become square.

Example image http://files.lithiumcube.com/tableView.png

Code used to assign values ​​in a cell:

cell.textLabel.text = currentArticle.descriptorAndTypeAndDifferentiator;
cell.detailTextLabel.text = currentArticle.stateAndDaysWorn;
cell.imageView.image = currentArticle.picture;

and currentArticle.picture- this UIImage(also images, as you can see, are only displayed perfectly, except for square corners).

It displays the same on my iPhone 3G, in the iPhone 4 simulator and in the iPad simulator.

What I'm going to look like the UITableViewCellone Apple uses in its iTunes app.

Any ideas on what I'm doing wrong?

Thanks,
-Aaron

Answer 1

cell.imageView.layer.cornerRadius = 16; // 16 is just a guess
cell.imageView.clipsToBounds = YES;

This will be around the UIImageView so that it does not draw by cell. It will also cover all angles of all your images, but that might be ok.

Otherwise, you will need to add your own image, which will only be around one corner. You can do this by setting the clip area in drawRect: before calling super. Or just add your own image, which is not so close to the left edge.

Answer 2

You can add a category to UIImage and enable this method:

// Return the image, but with rounded corners. Useful for masking an image
// being used in a UITableView which has grouped style
- (UIImage *)imageWithRoundedCorners:(UIRectCorner)corners radius:(CGFloat)radius {

    // We need to create a CGPath to set a clipping context
    CGRect aRect = CGRectMake(0.f, 0.f, self.size.width, self.size.height);
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:aRect byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)].CGPath;

    // Begin drawing
    // Start a context with a scale of 0.0 uses the current device scale so that this doesn't unnecessarily drop resolution on a retina display.
    // Use `UIGraphicsBeginImageContextWithOptions(aRect.size)` instead for pre-iOS 4 compatibility.
    UIGraphicsBeginImageContextWithOptions(aRect.size, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddPath(context, clippingPath);
    CGContextClip(context);
    [self drawInRect:aRect];
    UIImage *croppedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return croppedImage;
}

Then, when you set up your cells, in a table view controller, call something like:

if ( *SINGLE_ROW* ) {
    // We need to clip to both corners
    cell.imageView.image = [image imageWithRoundedCorners:(UIRectCornerTopLeft | UIRectCornerBottomLeft) radius:radius];
} else if (indexPath.row == 0) {
    cell.imageView.image = [image imageWithRoundedCorners:UIRectCornerTopLeft radius:radius];   
} else if (indexPath.row == *NUMBER_OF_ITEMS* - 1) {
    cell.imageView.image = [image imageWithRoundedCorners:UIRectCornerBottomLeft radius:radius];
} else {
    cell.imageView.image = image;
}

SINGLE_ROW .. , , . , (), 12, , iPhone. . 30 iPhone 4 ( , , , , , ). , ...

CGFloat radius = GroupStyleTableCellCornerRadius;
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2){
    // iPhone 4
    radius = GroupStyleTableCellCornerRadiusForRetina;
}

, .