UITableViewCell has square corner with image

Question

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

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

The code being used to assign the values into the cell is:

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

and currentArticle.picture is a UIImage (also the pictures, as you can see, display just fine with the exception of the square corners).

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

What I'm going for is something similar to the UITableViewCells that Apple uses in its iTunes app.

Any ideas about what I'm doing wrong?

Thanks,
-Aaron

score 2 · Accepted Answer · answered Jun 26 '10 at 04:53

2

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

This will round the UIImageView so it does not draw over the cell. It will also round all the corners of all your images, but that may be OK.

Otherwise, you will have to add your own image view that will just round the one corner. You can do that by setting up a clip region in drawRect: before calling super. Or just add your own image view that is not so close to the left edge.

answered Jun 26 '10 at 04:53

drawnonward

53,459
16
107
112

As you said, it rounded the images, themselves, which was not particularly helpful, but it did make the corners round ;) As I was too lazy to set up my own clip region, I just made it a "plain" table. It's slightly less attractive than the grouped, but it works fine – Aaron Rennow Jun 27 '10 at 18:22

score 1 · Answer 2 · edited Jul 12 '12 at 10:36

You can add a category on UIImage and include 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're configuring your cells, in the 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;
}

but replace the SINGLE_ROW etc with real logic to determine whether you've got a single row in a section, or it's the last row. One thing to note here, is that I've found (experimentally) that the radius for a group style table is 12, which works perfectly in the simulator, but not on an iPhone. I've not been able to test it on a non-retina device. A radius of 30 looks good on the iPhone 4 (so I'm wondering if this is an image scale thing, as the images I'm using are from the AddressBook, so don't have an implied scale factor). Therefore, I've got some code before this that modifies the radius...

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

hope that helps.

I actually do this in a slightly different way now, see http://stackoverflow.com/questions/2171506/add-rounded-corners-to-uiimageview/10515546#10515546 and it's even better to put this category on UIView, which then lets you round rect anything. — Daniel Thorpe, Jul 12 '12 at 10:41

UITableViewCell has square corner with image

2 Answers2

Linked