Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

ImageView inside horizontal StackView is not respecting constraint height

I have a horizontal UIStackView: on the left there’s a UIImageView and on the right labels and buttons.

I hardcoded the imageview to be 60×60 (with constraints). However, because the right side needs a bit more vertical space, the total height of the stack becomes 84. Wanting to keep the image centered vertically, I set the imageview’s centerY to equal its superview (the stack). In Interface Builder everything looks as it should.

When I run the app however, the imageview resizes itself to 60×84, completely disregarding the height constraint (or even the 1:1 aspect ratio constraint). I looked at the Debug View Hierarchy and I can see the constraints there, but they’re greyed out.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I tried .aspectFit and even manually adding the height constraint at runtime but nothing changes. Note: aspectFit centers the image and shows it as 60×60, but its frame is still 60×84

Any thoughts?

>Solution :

UIStackView arranges its subviews, based on the setting you give it.

If you tell the stack view to be 84-points tall, and you set its alignment = .fill, its subviews will be 84-points tall.

Couple options:

1 – set .alignment = .center … for a horizontal stack view, that will center the views vertically. You can also use .top or .bottom depending on how you want the views to layout.

2 – embed the image view in a plain (clear) UIView, and constrain it vertically (top / centerY / bottom / as desired) in that view. Then, that view will stretch to 84-points tall, while your image view will retain its own height.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading