Circular UIImageView in UITableView without performance hit?

Question

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:

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.

Here's Hemoglobe showing circular UIImageViews:

Is there any way to get this effect? Thanks.

Solution 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:

itemImageView.layer.cornerRadius = 25;

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

itemImageView.layer.masksToBounds = YES;

Solution 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/

Solution 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. :)

Solution 4

Here is a more up to date method in swift using IBDesignable and IBInspectable to subclass 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()
    }
}

Solution 5

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.

Also refer this Two Source of code.

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

and

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

This might be helpful in your case:

View more solutions

Comments

[Calin Chitu]

not cornerRadius is impacting the performance, masksToBounds/clipsToBounds is the problem

[swiftcode]

Nope, I don't. It's just simple load, cache automatically (the squared thumbnail), and show.

[Danny Xu]

Why could this be the best answer? Well, I don't think so. Using cornerRadius causes a bad performance in scroll view, especially in iPhone4 devices.

[Danny Xu]

It's really work-out.I used this tricky way before. But It's not suitable for my new version app now.

[Danny Xu]

Finally, I think @iPatel is the only one who cares about the performance here. Be careful with cornerRadius if you want high performance while scroll.

[atulkhatri]

I liked the point 'set the cornerRadius to half of the width or height ' but just dont forget to add 'itemImageView.layer.masksToBounds = YES;' or else it won't work.

[atulkhatri]

By the way as Danny Xu commented, it will decrease the tableview scrolling performance, So should be avoided in tableview cells.

[user717452]

I'm a little confused...why did you post the circle view project link? That has nothing to do with the question, nor the answer you gave.

[hishboy]

this should fix your tableview scrolling performance issue. self.imageView.layer.shouldRasterize = YES; self.imageView.layer.rasterizationScale = [UIScreen mainScreen].scale;

[Anilkumar iOS - ReactNative]

its really very simple using this code!! thanks @Shivam

[trdavidson]

@iPatel - update: the second link has been deprecated by the author and can no longer be downloaded.

[swiftcode]

Wouldn't it be better to apply the extension to UIImageView? This code works, but it makes the extension generic to any UIView objects.

[Hossam Ghareeb]

UIImageView is already extending from UIView. In some cases you may need to circle some UIViews, so this method will work for all.

[Herbert Poul]

I had to add the following code to make it work for me (inside a table view cell): override func layoutSubviews() { makeRound() }

[Abdoelrhman]

+ 1 for @herbert. It totally worked for me when I override layoutSubviews inside the class, you should update the the code

[Loïs Talagrand]

For Swift3: itemImageView.layer.masksToBounds = true;

[John Stewart]

Thank you!! I finally did this (subclass, but in Objective-C) to handle some circular UIImageViews that just would not STAY ROUND.

[Mihir Oza]

Instead of static value we should give dynamic value like self.ImageView.layer.cornerRadius = self.ImageView.frame.size.width / 2;