Autoresizing UI components using Autolayout iOS8

Question

I have designed a screen for a portrait only iPhone app. I have applied Autolayout so that the view horizontally fits all the screen sizes. The problem is, for smaller screen sizes, the content is truncated vertically. I tried not to set a fix height of components but it breaks all the alignment of the components. Please see the image for reference;

Any quick suggestion for what I'm missing... Thanks

Answer 1

If I were you I would would follow one of two approach -

1. you can use spacer views for spacing between components so that will adjust spacing on the basis of screen height

2.or if your content is bigger than iphone screen then you can always opt for scroll view.(I prefer pure layout approach)

Answer 2

Set vertical spacing between components. Don't fix width and height of components. set aspect ratio constraint for every component.

Answer 3

Like many of the comments and answers above, there are many ways to solve this problem. The decision for you to take is which is more suitable

1. Aspect Ratio Scaling : One of the common ways to retain the same UI across all form factors is to use the aspect scaling techniques in which constraints are given to mimic the aspect scaling.
2. Flexible Spacing and Sizing rules : Another way to design the layout is to design the layout to have different types of spacing based on the form-factor of the device. This way layouts may not to be consistent across.
3. Using Size classes for iOS8 and Above these can be used maintain various layouts for all the form-factors.
4. Use of ScrollView scrollView can be used if you want to retain the original layout and have scroll to view the layouts that are out of bounds.