Change UImageView size using Autolayout

Question

I have a imageview at the start and below there are series of buttons placed vertically one below the other. So, while designing the screen, I placed all the views in the view controller and added to vertical stack. Centred stack view horizontally and vertically. For all the buttons, I have set equal width. And in stack view, I have given equal spacing. In all iPhones, it is working correctly with ui elements arranged correctly with equal spaces except iPhone4. In iPhone 4 it is all touching each other. Please find the attachment. What constraint am I missing here?

Answer 1

It's because the screen size for iPhone 4 is 480. Your UI seems to be higher than 480. So only the constraints adjusted according to screen height.

Just add height constraint to all button and remove height constraint for image view if added.

Add Height and margin constraints for Buttons and only margin constraints to image view. It will resize according to screen size.

Hope it helps.

Answer 2

The problem is the content cannot be fitted in given height.

Let me explain. Assume small device has height of 480. UIImageView height(intrinsic ) is say 200. You have 4 UIButton of height say 80. UILabel of height say 100. So that sums up to 620.

Views of height 620 cannot fit(all visible without clipping) on a view of height 480.

You need.

1. Scrollview(To show more content than the available width and/or height)
2. Reduce the size of you content to fit in 480. To do this you can pin the height of any/some/all to make this height sum less than or equal to 480.