UITableViewCell rounded imageView

Question

I'm trying to make an app that has images in a rounded imageView but with images of different and varying sizes. My goal is to have a small piece of the image appear if the image is too big (so the image doesn't look distorted).

I'm able to get rounded imageView but it's alway different sizes for different images--which is not what I want. I read the posts here:

UIImage with rounded corners

Using cornerRadius on a UIImageView in a UITableViewCell

Some of my code is here for the UITableViewCell (which I subclassed):

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
//        [self.imageView setContentMode:UIViewContentModeScaleAspectFill];

        self.imageView.contentMode = UIViewContentModeScaleAspectFit;
        self.imageView.bounds = CGRectMake(0, 0, 44,44);
        self.imageView.frame = CGRectMake(5, 10, 44, 44);

        CGRect frame = self.imageView.frame;
        self.imageView.layer.cornerRadius = 15;
        [self.imageView.layer setMasksToBounds:YES];
        self.imageView.clipsToBounds = YES;
    }
    return self;
}

I'm using SDWebImage to load the image. Is there anything else i'm missing here?

possible duplicate of [iOS rounded corner UIImage with border](http://stackoverflow.com/questions/17959931/ios-rounded-corner-uiimage-with-border) — Pavan, Jan 26 '14 at 00:51

Jim Tierney · Answer 1 · 2014-01-26T01:25:17.727

If you make the corner radius figure proportional to the width, or height etc, then this will give you a constant roundness for the image. Here I've suggested div by 3, as an example.

self.imageview.layer.cornerRadius = self.imageview.frame.size.width/3;

Hope this is what you're looking for.

Cheers, Jim

EDIT -

I see you commented out the aspectFill, though this WITH the clipToBounds, or MaskToBounds should provide what you're looking for. so by changing

self.imageView.contentMode = UIViewContentModeScaleAspectFit;

Change to

self.imageView.contentMode = UIViewContentModeScaleAspectFill;

and keeping the self.image.clipToBounds line, this should be it.

Cheers

Doesn't seem to work. My issue is that with varying sizes for the images, I want it to not distort the imageview, and its always doing just that. — KVISH, Jan 26 '14 at 01:15

score 0 · Answer 2 · answered Jan 26 '14 at 00:57

Hi this is the best solution and very fast:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        CALayer * l = [self layer];
        [l setMasksToBounds:YES];
        [l setCornerRadius:10.0];

        // You can even add a border
        [l setBorderWidth:self.frame.size.width/IMG_PROFILE_BORDER_SCALE];
        [l setBorderColor:[[UIColor grayColor] CGColor]];
    }
    return self;
}

And obviously don't forget to import QuartzCore framework:

#import <QuartzCore/QuartzCore.h>

But, if you are interested, i also created an object available on GitHub to create path colored around the image. This solution use the CoreGraphics and i think that it's slower than the other one above:

GBPathImageView

score 0 · Answer 3 · answered Jan 26 '14 at 01:27

UIViewContentModeScaleAspectFill is better suited for your need because it scales the image to fill the size of the imageView without changing the apsect ratio.

but don't forget to set clipsToBounds to YES for the imageView in order to remove the remaining parts out of the view bounds:

 [self.imageView setClipsToBounds:YES];

score 0 · Accepted Answer · answered Jan 26 '14 at 04:50

I found a solution to my problem.

For some strange reason...I was not able to use varied images for the imageView on the UITableViewCell. I ended up putting a placeholder image in the imageView (transparent png) and then I put my own UIImageView with the same code in my question and it worked fine. Something strange is being done with how the imageView is calculated.

UITableViewCell rounded imageView

4 Answers4