在 UITableViewCell 中的 UIImageView 上使用cornerRadius [英] Using cornerRadius on a UIImageView in a UITableViewCell

问题描述

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

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.

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

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;

我的 tableview 立即下降了大约 5-6 帧，在快速滚动期间限制了大约 56 FPS(这没关系)，但是当我拖动刷新控件时，它有点滞后并下降到大约 40 FPS.如果我删除 cornerRadius 行，一切都很好，没有滞后.已使用 Instruments 在 iPod touch 5G 上进行了测试.

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.

有没有其他方法可以为我的单元格设置一个圆形的 UIImageView 而不会受到性能影响?我已经优化了我的 cellForRowAtIndexPath 并且在没有 cornerRadius 的情况下快速滚动时获得了 56-59 FPS.

Is there any other way I could have a rounded UIImageView for my cells and not suffer a performance hit? I'd already optimized my cellForRowAtIndexPath and I get 56-59 FPS while fast scrolling with no cornerRadius.

推荐答案

是的，那是因为cornerRadius 和clipToBounds 需要离屏渲染，我建议你从我的问题.我还引用了您应该看到的两个 WWDC 会议.
您可以做的最好的事情是在下载图像后立即获取图像，然后在另一个线程上调度一个围绕图像的方法.最好处理图像而不是图像视图.

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

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

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.

这篇关于在 UITableViewCell 中的 UIImageView 上使用cornerRadius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！