Circular UIImageView in UITableView without performance hit?

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:

enter image description here

Is there any way to get this effect? Thanks.

67240 次浏览
小开

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:

小开

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.

how to make button round with image background in IPhone?

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

小开

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

小开

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.

小开
最佳答案

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;
小开

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/

小开

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.

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

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()
}
}
小开

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

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

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
小开

In swift, inside your viewDidLoad method, with the 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;
小开

Usable solution in Swift using extension:

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

Usage:

self.venueImageView.circleMe()
小开

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
}


}

Usage:

self.ImageView.circular()
self.ImageView.roundedCorner()
小开

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

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

For circular imageview, use the below code.

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = true

Don't forget to change the cornerRadius in viewDidLayoutSubviews method of your UIView.

Example:

override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = true
}

提交答案