How to make imageView fixed size and with rounded corners

Question

I'm using Parse.com to build a simple app. I want to know if there is any way to make the imageView size fixed (for example 30x30px) and round the corners of the image?

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    //-------------------------------------------------------------------------------------------------------------------------------------------------
    {
        PFTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
        if (cell == nil) cell = [[PFTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];

        PFUser *user = users[indexPath.row];
        cell.textLabel.text = user[PF_USER_FULLNAME];

        PFImageView *imageView = [[PFImageView alloc]  init];
        [imageView setBackgroundColor:[UIColor clearColor]];
        cell.imageView.image = [UIImage imageNamed:@"tab_profile.png"]; // placeholder image

        cell.imageView.file = (PFFile *)user[PF_USER_THUMBNAIL]; // remote image

        [cell.imageView loadInBackground];

        return cell;
    }

Please help with any advice, I'm new to Xcode and Parse SDK...

1)

2)

Answer 1

This is what I usually use to get a circle on an imageView:

1. Crop (not resize) the image to make it a square. The method below resizes the image to whatever size you pass as a CGSize:

    (UIImage *)squareImageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize { double ratio; double delta; CGPoint offset; //make a new square size, that is the resized imaged width CGSize sz = CGSizeMake(newSize.width, newSize.width); //figure out if the picture is landscape or portrait, then //calculate scale factor and offset if (image.size.width > image.size.height) { ratio = newSize.width / image.size.width; delta = (ratio*image.size.width - ratio*image.size.height); offset = CGPointMake(delta/2, 0); } else { ratio = newSize.width / image.size.height; delta = (ratio*image.size.height - ratio*image.size.width); offset = CGPointMake(0, delta/2); } //make the final clipping rect based on the calculated values CGRect clipRect = CGRectMake(-offset.x, -offset.y, (ratio * image.size.width) + delta, (ratio * image.size.height) + delta); //start a new context, with scale factor 0.0 so retina displays get //high quality image if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) { UIGraphicsBeginImageContextWithOptions(sz, YES, 0.0); } else { UIGraphicsBeginImageContext(sz); } UIRectClip(clipRect); [image drawInRect:clipRect]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } 

Then, call the method just created, and apply the corner radius (in this case it will be a circle):

imageView.image = [self squareImageWithImage:imageNormal scaledToSize:CGSizeMake(50, 50)]; // assuming you want a 50x50px image
// convert imageview to circle
imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2;
imageView.clipsToBounds = YES;

You can reduce the amount of the cornerRadius to something else with this same call.

Answer 2

This is how I do it:

Image with fix size

If it's possible use Storyboard and create 2 size constraints for the PFImageView with the 30 px value, but if the project doesn't uses size classes it should work without constraints, just set the proper size for the image. If you experience shape changes you could play with View Mode also.

TooManyEduardos's solution for the rounded image is correct, if you don't want circle just play with the numbers.

//1
imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2;
//2
imageView.layer.cornerRadius = cell.imageView.frame.size.width / 4;
//3
imageView.layer.cornerRadius = cell.imageView.frame.size.width / 6;
//4    
imageView.layer.cornerRadius = cell.imageView.frame.size.width / 8;