Storyboard and self-timer: how to make a circular image

Question

in the storyboard (xcode 6) I want the user’s circular profile image to exit Facebook.

So, I made this interface in a storyboard using an automaton:

Then, using Facebook iOS sdk, I take the user profile (using fast):

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

In the storyboard, I set the image to Zoom In Fit. Use the following code to make a circular overview of the image:

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

When I run the code, in any case, the image does not look circular:

I assume the problem is the automatic layout, but I'm not sure. How can I make the image completely round?

Answer 1

Two steps:

• Center the UIImageView by adding the Horizontal Center in Container constraint (Editor> Align> Horizontal Center in Container) to the UIImageView.
• Remove the main and final restrictions that you set in UIImageView.

Why? UIImageView becomes stretched because Auto Layout must consider the main and final restrictions set in UIImageView. To prove your point, set the priority of the leading and final constraints to something less than the priority of the height and width constraints. You should see a rounded image as you expect, but it cannot be focused.

Answer 2

Additional steps:

• Add 1: 1 aspect ratio limitation
• mark control click on bounds attribute in attribute inspector
• draw your view into the controller class.

• set the radius of the corner to half its height or width

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

Answer 3

I did the same a little back, and it 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 a constraint, just make sure you check the height and width so that they are fixed. At least this is what I always do.

Answer 5

You have specified leading constraint, trailing constraint and width constraint. . Thus, 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 to remove the constraints and add the horizontal center constraint you want.

Answer 6

SWIFT 3.x Just change your custom imageView class 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 7

In the storyboard, I set the image to Zoom In

But this is a problem, isn't it? This means: "Stretch the image so that it matches the way the image is stretched." If this is not what you want, do not talk about it! Use Centered, or at least use one of the Aspect content modes in your name so that your image does not stretch.

As for the circle itself, setting cornerRadius not a way to make a circle. A way to create a circular border around an image is to mask the image. You can redraw the image using the circular mask as the clipping border, or you can apply the circular mask to the image representation. (See, for example, my answer is here: https://stackoverflow.com/a/167189/) .

It is true that your image is also stretched because you gave it restrictions for both sides of the supervisor. You can prevent this by specifying a width limit instead; now its width will be absolute. But you must still do the right thing on two other issues.