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 made several styles of the QuartzCore layer to represent the image, for example:

 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 gray border, but I would like to make it circular, not square. The Hemoglobe application uses circular images in the form of tables and the effect that I would like to achieve. However, I do not want to use cornerRadius , as this degrades my FPS scrolling.

Here Hemoglobe shows the circular UIImageViews :

Is there any way to get this effect? Thank.

Answer 1

Just set cornerRadius to half width or height (assuming your object view is square).

For example, if the width and height of an object’s representation are 50:

 itemImageView.layer.cornerRadius = 25; 

Update. As user atulkhatri points out, it will not work unless you add:

 itemImageView.layer.masksToBounds = YES; 

Answer 2

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; 

Link to this link

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

Answer 3

Use this code .. It will be useful.

  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 great for me. :)

Answer 4

Yes, you can give layer.cornerRadius (you need to add #import <QuartzCore/QuartzCore.h> )
to create a circular any control, but in your case instead of set layer of UIImageView this value is the best way to create your image as a circular and add it to a UIImageView that has backGroundColor has ClearColor .

Also refer to these two sources of code.

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

and

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

This may be useful in your case:

Answer 5

Below is a more modern method with quick use of IBDesignable and IBInspectable for subclassing 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() } } 

Answer 6

Set the height and width of the UIImageView to be the same, for example: Height=60 and Width = 60 , then cornerRadius should be exactly half. I saved it in my case. He worked for me.

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

Answer 7

I use the Round Image View class ... So I just use it instead of the UIImageView and don’t want to customize anything ...

This class also draws an optional border around the circle. Often there is a border around rounded images.

This is not a subclass of UIImageView, since UIImageView has its own rendering engine and does not call the drawRect method.

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 

Answer 8

Useful solution in Swift with extension :

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

Using:

 self.venueImageView.circleMe() 

Answer 9

Creating a circular image, and it's quite simple using the link below SO, just create custom cells for your table view instead of distributing everything in your cellForRowAtIndexPath method.

How to make the button round with the background image in the iPhone?

The link above gives you an example for buttons that just use it to view images.

Answer 10

If you display images on a solid background color, a simple solution would be to use an overlay image with a transparent circle in the middle.

Thus, you can use square images and add a circle image above them to get a circular effect.

If you don’t need to manipulate images or display them on a complex background color, this can be a simple solution without any performance improvement.

Answer 11

In quick , inside your viewDidLoad method, with the output of userImage :

 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; 

Answer 12

In Swift, use this extension for CircularImageView or RoundedImageView:

 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 } } 

Application:

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

Answer 13

If you use some auto-outliers and different cell heights, it’s best to do it like this:

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