Using cornerRadius on a UIImageView in a UITableViewCell

Question

I'm using a `UIImageView` for each of my `UITableViewCells`, as thumbnails. My code uses `SDWebImage` to asynchronously grab those images from my backend and load them in, and then caching them. This is working fine. My `UIImageView` is a 50x50 square, created in Interface Builder. Its background is opaque, white color (same as my `UITableViewCell` background color, for performance). However, I'd like to use smooth corners for better aesthetics. If I do this: ``` UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100]; itemImageView.layer.cornerRadius = 2.5f; itemImageView.layer.masksToBounds = NO; itemImageView.clipsToBounds = YES; ``` My tableview drops around 5-6 frames immediately, capping about 56 FPS during fast scrolling (which is okay), but when I drag and pull the refresh control, it lags a bit and drops to around 40 FPS. If I remove the `cornerRadius` line, all is fine and no lag. This has been tested on an iPod touch 5G using Instruments. Is there any other way I…

Accepted Answer

Yes, that's because cornerRadius and clipToBounds requires offscreen rendering, I suggest you to read these answer from one of my question. I also quote two WWDC session thatyou should see. The best thing you can do is grab the image right after is downloaded and on another thread dispatch a method that round the images. Is preferable that you work on the image instead of the imageview.

```
// Get your image somehow
UIImage *image = [UIImage imageNamed:@"image.jpg"];

// Begin a new image that will be the new image with the rounded corners 
// (here with the size of an UIImageView)
 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);

// Add a clip before drawing anything, in the shape of an rounded rect
  [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds 
                        cornerRadius:10.0] addClip];
 // Draw your image
[image drawInRect:imageView.bounds];

// Get the image, here setting the UIImageView image
  imageView.image = UIGraphicsGetImageFromCurrentImageContext();

// Lets forget about that we were drawing
  UIGraphicsEndImageContext();
```

Method grabbed here You can also subclass the tableviewcell and override the drawRect method. The dirty but very effective way is draw a mask in photoshop with inside alpha and around the matching color of the background of the cell and add another imageView, not opaque with clear background color, on the one with images.

Using cornerRadius on a UIImageView in a UITableViewCell

Solution

Problem

Related problems