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

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

Answer 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

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

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

Answer 5

SWIFT 3.x Just change your imageView custom class with this and enjoy.

@IBDesignable class RoundedImageView:UIImageView {
    @IBInspectable var borderColor:UIColor = UIColor.white {
        willSet {
            layer.borderColor = newValue.cgColor
        }
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = frame.height/2
        layer.masksToBounds = true
        layer.borderWidth = 1
        layer.borderColor = borderColor.cgColor
    }
}

Answer 6

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.

Answer 7

In storyboard i have set the image to "Scale to fit" mode

But that's a problem, isn't it? It means: "Stretch the image so that it matches the way the image view is stretched." If that isn't what you want, don't say that! Use Centered, or at least use one of the content modes with "Aspect" in its name so that your image is not stretched.

As for the circle itself, setting the cornerRadius is no way to make a circle. The way to create a circular boundary around an image is to mask the image. You can redraw the image with the circular mask as a clipping boundary, or you can apply the circular mask to the image view. (See, for example, my answer here: https://stackoverflow.com/a/16475824/341994.)

It is true that your image view is also being stretched, because you gave it constraints to both sides of the superview. You can prevent that by giving it a width constraint instead; now its width will be absolute. But you should still do the right thing on the other two issues.