在UITableViewCell中的UIImageView上使用cornerRadius

Question

我为我的每个UITableViewCells都使用了一个UIImageView，作为缩略图。我的代码使用SDWebImage异步地从我的后端获取这些图像，并加载它们，然后缓存它们。这工作得很好。

我的UIImageView是一个50x50的正方形，在界面生成器中创建。它的背景是不透明的白色(与我的UITableViewCell背景颜色相同，以提高性能)。然而，为了更好的美观，我想使用平滑的边角。如果我这样做：

UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100];
    itemImageView.layer.cornerRadius = 2.5f;
    itemImageView.layer.masksToBounds = NO;
    itemImageView.clipsToBounds = YES;

我的tableview立即下降了大约5-6帧，在快速滚动时达到了56FPS(这是可以的)，但当我拖拽刷新控件时，它有点滞后，下降到40FPS左右。如果我删除cornerRadius行，一切都是正常的，没有延迟。这已经在使用仪器的iPod touch 5G上进行了测试。

有没有其他方法可以让我的计算单元有一个四舍五入的UIImageView，而不会影响性能？我已经优化了我的cellForRowAtIndexPath，我得到了56-59FPS，而没有cornerRadius的快速滚动。

Answer 1

是的，这是因为cornerRadius和clipToBounds需要屏幕外渲染，我建议你从我的question中阅读这些答案。我还引用了您应该看到的两个WWDC会话。

你能做的最好的事情就是在下载后立即抓取图像，然后在另一个线程上调度一个对图像进行轮换的方法。最好在图像上工作，而不是在图像视图上工作。

// 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();

方法获取了here，也可以子类化tableviewcell并覆盖drawRect方法。

一个肮脏但非常有效的方法是在photoshop中绘制一个带有内部alpha的蒙版，并在单元格背景的匹配颜色周围添加另一个imageView，不是不透明的，具有清晰的背景色，在带有图像的蒙版上。

Answer 2

对于这一点，还有另一个很好的解决方案。我在我的项目中做了几次。如果你想创建一个圆角或其他东西，你可以只使用封面图像在你的主图像的前面。

例如，您想要创建圆角。在这种情况下，你需要一个正方形的图像层，中间有一个切出的圆圈。

通过使用此方法，在UITableView或UICollectionView中滚动时，您将获得60fps。因为该方法不需要屏幕外渲染来定制UIImageView(如化身等)。

Answer 3

非阻塞解决方案

作为Andrea响应的后续，这里有一个将在后台运行他的代码的函数。

+ (void)roundedImage:(UIImage *)image
          completion:(void (^)(UIImage *image))completion {
    dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        // Begin a new image that will be the new image with the rounded corners
        // (here with the size of an UIImageView)
        UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
        CGRect rect = CGRectMake(0, 0, image.size.width,image.size.height);

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

        // Get the image, here setting the UIImageView image
        UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();

        // Lets forget about that we were drawing
        UIGraphicsEndImageContext();
        dispatch_async( dispatch_get_main_queue(), ^{
            if (completion) {
                completion(roundedImage);
            }
        });
    });
}