Rounded images on iOS UITableView

25 Jun, 2015 | General | 0 comments

In iOS it is really easy to achieve that effect with a bit of code. You don’t need to previously edit images on Photoshop, Gimp or wathever. The use of masks provided by the system is the best solution in terms of simplicity, computation and adaptability.

So, let’s go!

Just put the red-marked code inside the method cellForRowAtIndexPath (here is where we define the labels/images for each row, depending of the selected cell style) :

 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];

    …

     // Rounded corners

    cell.imageView.clipsToBounds = YES;

    cell.imageView.layer.borderWidth = 1;

    cell.imageView.layer.borderColor = [UIColor whiteColor].CGColor;

    cell.imageView.layer.backgroundColor = [UIColor blackColor].CGColor;

    cell.imageView.layer.masksToBounds = YES;

    cell.imageView.layer.cornerRadius = 20;

    cell.imageView.image  = [UIImage imageWithData:current.classification.image];

    CGPoint imageOrigin = cell.imageView.frame.origin;

    …

    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;

<p>&nbsp;</p>

 What all that does mean? Blah, blah, blah…

That’s all. Playing a bit with the different parameters you can get rounded corners on your list images, or get something very close to a circle. Now, it’s up to you!