Rounded Corner images

Question

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:

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.

Answer 1

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.

Answer 2

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];

Answer 3

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; CGFloat maxSize = imWidth > imHeight ? imWidth : imHeight; if you want another effect.

Answer 4

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;

Answer 5

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;