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
:
Is there any way to get this effect? Thanks.
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/
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. :)
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()
}
}