CODEWITHSUNDEEP
iosobjective-cuiimageviewuiimage
taskiner
taskiner

Reputation: 531

Rounded Corner images

I've been trying to do perfectly shaped circular images with non-square images. I tried to make it with 

[self.photoView.layer setCornerRadius:50.0f];
[self.photoView.layer setMasksToBounds:YES];

It becomes something like this:

Not so perfectly rounded

I want to make it full perfect circular.

PhotoView's content mode is setted to Aspect Fill, It's height and width fixed to 80x80 with autolayout. I could not figure it out.

I made circular images with cropping and scaling them, but also want to add a border to it, in this way i need to recreate new uiimage to draw borders in it. It's expensive thing. I want to use photoView's layer to do this.

Any help is appreciated.

Upvotes: 1

Views: 299

Answers (5)

Iyyappan Ravi
Iyyappan Ravi

Reputation: 3245

try this code,

swift code:

declare 

@IBOutlet weak var circleView: UIView!

viewDidLoad or any method:

circleView.layer.cornerRadius = circleView.frame.width/2
circleView.layer.borderWidth = 10
circleView.layer.borderColor = UIColor.blackColor().CGColor

objective-C code:

declare UIImageView

@property (weak, nonatomic) IBOutlet UIImageView *myimageview;

viewDidLoad or any method,

myimageview.layer.cornerRadius = myimageview.frame.size.width/2;
myimageview.layer.masksToBounds = YES;
myimageview.layer.borderWidth = 2.0;
myimageview.layer.borderColor = [UIColor blackColor].CGColor;

Upvotes: 1

Sudhin Davis
Sudhin Davis

Reputation: 2020

Try this code, corner radius should be half of the width or height of the provided photo view and it must be square in shape.

So the code go like this:

[self.photoView.layer setCornerRadius:CGRectGetHeight(self.photoView.frame)/2];
[self.photoView.layer setMasksToBounds:YES];

Upvotes: 4

ChintaN -Maddy- Ramani
ChintaN -Maddy- Ramani

Reputation: 5164

You have to set corner radius is half of width/height (for square object only) so it will create round view.

[self.photoView.layer setCornerRadius:self.photoView.frame.size.height/2];

or set it to 40.0f because your height and width is 40x40.

Upvotes: 4

Sport
Sport

Reputation: 8985

try this Import the QuartzCore #import <QuartzCore/QuartzCore.h> header and play with the layer property of the UIImageView.

self.photoView.layer.cornerRadius = self.photoView.frame.size.height/2;
self.photoView.clipsToBounds = YES;

Upvotes: 1

Y.Bonafons
Y.Bonafons

Reputation: 2349

You can achieve this by using layer and mask:

CGFloat imWidth = photoView.frame.size.width;
CGFloat imHeight = photoView.frame.size.height;
CGFloat minSize = imWidth < imHeight ? imWidth : imHeight;
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = CGRectMake(imWidth * 0.5f - minSize * 0.5f, imHeight * 0.5f - minSize * 0.5f, minSize, minSize);
maskLayer.path = CGPathCreateWithEllipseInRect(CGRectMake(0, 0, minSize, minSize), nil);
photoView.layer.mask = maskLayer;

This crop the photoview according to a circle inside the photoview.frame. You can change minSize to:CGFloat maxSize = imWidth > imHeight ? imWidth : imHeight; if you want another effect.

Upvotes: 2

Related Questions