Storyboard and autolayout: how make a circular image

Question

in storyboard (xcode 6) i want a circular user image profile take from Facebook.

So i have make this interface in storyboard, using auto layout:

Then, using Facebook iOS sdk i take the user profile (using swift):

 var facebookProfileUrl = "http://graph.facebook.com/\(userId!)/picture?type=normal";

In storyboard i have set the image to "Scale to fit" mode. To make the image view circular i use the following code:

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

When i run the code, anyway the image doesn't look circular:

I suppose the problem is auto layout but i'm not sure. How can i make the image perfectly circular??

Solution 1

Two steps:

1. Center the UIImageView by adding a "Horizontal Center In Container" constraint (Editor > Align > Horizontal Center in Container) to the UIImageView.
2. Remove the leading and trailing constraints you currently have set on the UIImageView.

Why? The UIImageView is getting stretched because Auto Layout needs to account for the leading and trailing constraints you set on the UIImageView. To prove my point, set the priority of the leading and trailing constraints to something less than the priority of the height and width constraints. You should see a rounded image like you expect, but it may not be centered.

Solution 2

More steps:

1. Add aspect ratio constraint 1:1
2. mark check clip to bounds attribute in attribute inspector
3. make outlet of your view into you controller class

4. set corner radius to half of either its height or width

   yourImageViewOutlet.layer.cornerRadius = yourImageViewOutlet.frame.size.width / 2.0

Solution 3

I have made the same thing a little time ago and this worked for me

self.imageView.image = [ImageHelper getImage]; //retrieve image
self.imageView.layer.cornerRadius = self.imageView.frame.size.height / 2;
self.imageView.layer.masksToBounds = YES;
self.imageView.layer.borderWidth = 0;
self.imageView.contentMode = UIViewContentModeScaleAspectFill;

Solution 4

When adding the constraint, just make sure that you check the height and width so that it will be fix. At least that what I always do.

Solution 5

You have given leading constraint, trailing constraint and the width constraint. So the image will try to leave 130 pixels before and after the image which will increase the width of the image.

So the solution is, remove either one of the leading or trailing constraint.

The best workaround is, remove both the constraint and add a horizontal centre constraint, that is what you want.

View more solutions

Comments

[rdelmar]

Can you expand on your comment that setting the corner radius is no way to make a circle? I see many people using that technique; it obviously works, so what's wrong with it?

[matt]

@rdelmar You see many people using it, but if you will look you will see just as many people complaining that it has flaws - as in this very question. It's just lazy. If you want rounded corners, and you don't care about accuracy (flat edges) or stretching (as here), fine, round the corners. But if you want a circle, ask for a circle. Common sense, really.