CODEWITHSUNDEEP
iosswiftautolayout
BearBearBear
BearBearBear

Reputation: 109

How maintain a circular uiview using auto layout without fixed height and fixed width

I am having issues maintaining a circular uiimageview when using autolayout without fixed height and width.

Example with fixed height / width inside a uiview container that has a fixed height.

storyboard constraints

Circular image

in viewwillayoutsubview

    profileImageView.layoutIfNeeded()
    profileImageView.layer.cornerRadius = profileImageView.frame.size.height / 2
    profileImageView.layer.masksToBounds = true

Example without fixed height / width inside a uiview container that has a fixed height.

Storyboard constraints

Circular image

Goal: What I am trying to achieve is create a circular uiimageview that scales for all device screen sizes. I believe the issue is that without fixed height and width my cornerRadius is not correct for a circle.

What would be the best way to achieve this without setting a fixed width and height as that does not work on all screen sizes.

Upvotes: 0

Views: 231

Answers (1)

Pete Morris
Pete Morris

Reputation: 1562

The first problem is that you’re pinning your view to all the edges of its parent with a fixed margin.

That may well produce a square in your storyboard, but doesn’t necessarily on your device (it depends on if your parent is constrained as a square or not, which I can’t see in your screenshots). If the parent stretches it’s width to fit it’s own superview, but doesn’t adjust its height, then your image is stretched into a rectangle.

That looks like it is the case, as the image appears stretched horizontally.

I’d suggest you remove all constraints from your image view and start again.

Make the image have a width equal to, say, 0.8 of its superview, give it a 1:1 ratio, and center it horizontally and vertically with its parent.

The second problem, is that you may be setting the cornerRadius too early.

When the view is loaded from your Storyboard, its width and height are whatever it was in storyboard.

Once the view has been laid out in its parent, the width/height will be adjusted and you’ll be left with an incorrect cornerRadius.

To solve this, simply make sure you have a 1:1 aspect ratio constraint on the view, and set the cornerRadius in viewDidLayoutSubviews (instead of viewWillLayoutSubviews).

Upvotes: 2

Related Questions