在UITableView中循环的UIImageView没有性能冲击?

I have a UIImageView on each of my UITableView cells, that display a remote image (using SDWebImage). I've done some QuartzCore layer styling to the image view, as such:

我在每个UITableView单元上都有一个UIImageView，它显示一个远程图像(使用SDWebImage)。我已经对图像视图做了一些QuartzCore层样式，如下:

UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100];
    itemImageView.layer.borderWidth = 1.0f;
    itemImageView.layer.borderColor = [UIColor concreteColor].CGColor;
    itemImageView.layer.masksToBounds = NO;
    itemImageView.clipsToBounds = YES;

So now I have a 50x50 square with a faint grey border, but I'd like to make it circular instead of squared. The app Hemoglobe uses circular images in table views, and that's the effect I'd like to achieve. However, I don't want to use cornerRadius, as that degrades my scrolling FPS.

现在我有一个50x50的正方形有一个模糊的灰色边框，但是我想把它变成圆形而不是正方形。应用血红蛋白在表格视图中使用圆形图像，这就是我想要达到的效果。但是，我不想使用cornerRadius，因为这会降低我的滚动FPS。

Here's Hemoglobe showing circular UIImageViews:

这是血红蛋白显示圆形UIImageViews:

Is there any way to get this effect? Thanks.

有什么方法可以达到这个效果吗?谢谢。

13 个解决方案

#1

Simply set the cornerRadius to half of the width or height (assuming your object's view is square).

只需将拐角半径设置为宽度或高度的一半(假设对象的视图是正方形的)。

For example, if your object's view's width and height are both 50:

例如，如果你的对象的视图的宽度和高度都是50:

itemImageView.layer.cornerRadius = 25;

Update - As user atulkhatri points out, it won't work if you don't add:

更新——正如用户atulkhatri所指出的，如果不添加:

itemImageView.layer.masksToBounds = YES;

#2

To Add border

添加边界

self.ImageView.layer.borderWidth = 3.0f;

self.ImageView.layer.borderColor = [UIColor whiteColor].CGColor;

For Circular Shape

为圆形

self.ImageView.layer.cornerRadius = self.ImageView.frame.size.width / 2;
self.ImageView.clipsToBounds = YES;

Refer this link

请参考这个链接

http://www.appcoda.com/ios-programming-circular-image-calayer/

http://www.appcoda.com/ios-programming-circular-image-calayer/

#3

Use this code.. This will be helpful..

使用这个代码. .这将是有益的。

    UIImage* image = ...;
    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:50.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();

It works fine for me. :)

对我来说很好。:)

#4

Yes, it is possible to give layer.cornerRadius (need to add #import <QuartzCore/QuartzCore.h>)
for create circular any control but in your case instead of set layer of UIImageView it is The Best Way to Create Your Image as circular and add it on UIImageView Which have backGroundColor is ClearColor.

是的，可以给图层。cornerRadius(需要添加#import )用于创建任何圆形控件，但是在你的例子中，不是设置UIImageView的图层，而是将你的图像创建为圆形，并将其添加到UIImageView中，它的背景颜色是ClearColor。

Also refer this Two Source of code.

还要参考这两个源代码。

https://www.cocoacontrols.com/controls/circleview

https://www.cocoacontrols.com/controls/circleview

and

和

https://www.cocoacontrols.com/controls/mhlazytableimages

https://www.cocoacontrols.com/controls/mhlazytableimages

This might be helpful in your case:

这可能对你的情况有帮助:

#5

Here is a more up to date method in swift using IBDesignable and IBInspectable to subclass UIImageView

这里有一个最新的方法，使用IBDesignable和IBInspectable来子类化UIImageView

@IBDesignable class RoundableUIImageView: UIImageView {
    private var _round = false
    @IBInspectable var round: Bool {
        set {
            _round = newValue
            makeRound()
        }
        get {
            return self._round
        }
    }
    override internal var frame: CGRect {
        set {
            super.frame = newValue
            makeRound()
        }
        get {
            return super.frame
        }

    }

    private func makeRound() {
        if self.round == true {
            self.clipsToBounds = true
            self.layer.cornerRadius = (self.frame.width + self.frame.height) / 4
        } else {
            self.layer.cornerRadius = 0
        }
    }

    override func layoutSubviews() {
            makeRound()
    }
}

#6

Set the height & width of the of the UIImageView to be the same e.g.:Height=60 & Width = 60, then the cornerRadius should be exactly the half.I have kept it 30 in my case.It worked for me.

将UIImageView的高度和宽度设置为相同的，例如:height =60, width =60，那么拐角半径应该正好为半。我把它保存在我的箱子里。它为我工作。

 self.imageView.layer.cornerRadius = 30;
 self.imageView.layer.borderWidth = 3;
 self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
 self.imageView.layer.masksToBounds = YES;

#7

I use a Round Image View class… So I just use it instead of UIImageView, and have nothing to tweak…

我使用一个圆形的图像视图类，所以我只使用它而不是UIImageView，没有什么好调整的…

This class also draws an optional border around the circle. There is often a border around rounded pictures.

这个类还在圆周围画一个可选的边框。圆形的图片周围通常有边框。

It is not a UIImageView subclass because UIImageView has its own rendering mechanism, and does not call the drawRect method..

它不是一个UIImageView子类，因为UIImageView有自己的渲染机制，不调用drawRect方法。

Interface :

接口:

#import <UIKit/UIKit.h>

@interface MFRoundImageView : UIView

@property(nonatomic,strong) UIImage* image;

@property(nonatomic,strong) UIColor* strokeColor;
@property(nonatomic,assign) CGFloat strokeWidth;

@end

Implementation :

实现:

#import "MFRoundImageView.h"


@implementation MFRoundImageView

-(void)setImage:(UIImage *)image
{
    _image = image;
    [self setNeedsDisplay];
}

-(void)setStrokeColor:(UIColor *)strokeColor
{
    _strokeColor = strokeColor;
    [self setNeedsDisplay];
}

-(void)setStrokeWidth:(CGFloat)strokeWidth
{
    _strokeWidth = strokeWidth;
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGPathRef path = CGPathCreateWithEllipseInRect(self.bounds, NULL);
    CGContextAddPath(ctx, path);
    CGContextClip(ctx);
    [self.image drawInRect:rect];

    if ( ( _strokeWidth > 0.0f ) && _strokeColor ) {
        CGContextSetLineWidth(ctx, _strokeWidth*2); // Half border is clipped
        [_strokeColor setStroke];
        CGContextAddPath(ctx, path);
        CGContextStrokePath(ctx);
    }
    CGPathRelease(path);
}

@end

#8

Usable solution in Swift using extension:

Swift使用扩展的可用解决方案:

extension UIView{
  func circleMe(){
      let radius = CGRectGetWidth(self.bounds) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
  }
}

Usage:

用法:

self.venueImageView.circleMe()

#9

If use some autolayout and different cells heights, u better do it this way:

如果使用一些autolayout和不同的细胞高度，你最好这样做:

   override func layoutSubviews() {
        super.layoutSubviews()
        logo.layer.cornerRadius = logo.frame.size.height / 2;
        logo.clipsToBounds      = true;
    }

#10

Creating circular image view and thats quite easy with the below SO link, just have custom cells for your table view instead of allocating every thing in your cellForRowAtIndexPath method.

创建循环图像视图和下面的链接非常简单，只需要为表视图定制单元格，而不是在cellForRowAtIndexPath方法中分配所有东西。

how to make button round with image background in IPhone?

如何在IPhone中使用图像背景进行圆形按钮?

The above link gives you example for buttons just use it for your image views.

上面的链接为您提供了按钮的示例，只需将其用于图像视图。

#11

If you showing the images over a solid background color, an easy solution could be to use an overlay image with a transparent circle in the middle.

如果你在一个坚实的背景色上显示图像，一个简单的解决方案可能是在中间使用一个透明圆形的覆盖图像。

This way you can still use square images and add the circle image above them to get the circular effect.

这样你仍然可以使用正方形的图片，并在上面添加圆形的图片来获得圆形的效果。

If you don't need to manipulate your images or show them on a complex background color, this can be a simple solution with no performance hit.

如果您不需要操作图像或在复杂的背景色上显示它们，这可以是一个简单的解决方案，不会影响性能。

#12

In swift, inside your viewDidLoad method, with the userImage outlet:

在swift中，在viewDidLoad方法中，使用userImage outlet:

self.userImage.layer.borderWidth = 1;
self.userImage.layer.borderColor = UIColor.whiteColor().CGColor;
self.userImage.layer.cornerRadius = self.userImage.frame.size.width / 2;
self.userImage.clipsToBounds = true;

#13

In Swift use this Extension for CircularImageView or RoundedImageView :

在Swift中使用此扩展用于循环图像视图或圆形视图:

extension UIView {

    func circular(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

    func roundedCorner(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius / 5
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

}

Usage:

用法:

self.ImageView.circular()
self.ImageView.roundedCorner()