在UITableViewCell中的UIImageView上使用cornerRadius

Question

我使用的是UIImageView我的每个中UITableViewCells,为缩略图.我的代码用来SDWebImage从我的后端异步抓取这些图像并加载它们,然后缓存它们.这工作正常.

我UIImageView是一个50x50的正方形,在Interface Builder中创建.它的背景是不透明的,白色(与我的UITableViewCell背景颜色相同,用于表现).但是,我想使用光滑的角落来获得更好的美感.如果我这样做:

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

我的tableview立即下降5-6帧,在快速滚动期间约为56 FPS(这是可以的),但是当我拖动并拉动刷新控件时,它会稍微滞后并下降到40 FPS左右.如果我删除该cornerRadius行,一切都很好,没有滞后.这已在使用Instruments的iPod touch 5G上进行了测试.

有没有其他方法可以让UIImageView我的细胞四舍五入并且不受性能影响？我已经优化了我cellForRowAtIndexPath,我得到56-59 FPS而快速滚动没有cornerRadius.

Answer 1

是的,那是因为cornerRadius和clipToBounds需要屏幕外渲染,我建议你从我的一个问题中读出这些答案.我还引用了你应该看到的两个WWDC会话.
您可以做的最好的事情是在下载后立即抓取图像,并在另一个线程上发送一个围绕图像的方法.最好是处理图像而不是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();

此处抓取的方法 您还可以子类化tableviewcell并覆盖drawRect方法.
肮脏但非常有效的方法是在photoshop中使用内部alpha和单元格背景的匹配颜色绘制一个遮罩,并在带有图像的一个上添加另一个imageView,而不是具有清晰背景颜色的不透明.

Answer 2

还有另一个很好的解决方案.我在我的项目中做了几次.如果您想要创建圆角或其他东西,您可以在主图像前使用封面图像.

例如,您想要制作圆角.在这种情况下,您需要一个方形图像层,中间有一个切出的圆圈.

通过使用此方法,您将在内部滚动UITableView或获得60fps UICollectionView.因为这种方法不需要在屏幕外渲染以进行自定义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);
            }
        });
    });
}