Auto Layout proportionally Scaling Views

Question

I have already found several questions and answers about this topic but I simply cannot get this to work for me.

The blue rectangle is a UIView which contains the Test Label and Gear image button. The red one is a second UIView.

What I'd like to do is to get the blue bar (which is a UIView) increase in size for larger sized screens, which will result in the scaling of the Label and settings button, while the Red UIView shrink in height so the blue UIView can become larger. So basically the question is, how to proportionally scale the UIViews for different screen sizes.

I have tried using aspect ratio constraints, height constraints (greater than/less than) but I just can't get the desired effect.

Thanks.

Solution 1

Try proportional height and width. You need to make constraints for Equal Heights and/or equal Widths and then you double click on the constraint and change the multiplier for example 0.2 if you wish to make First Item to be 20% of second item in width and 2.0 for 200% (means double) in width. to make it increase or decrease proportionally according to your requirement

Solution 2

You have two ways for do that:

1. Proportional constraints:

but if you set a proportional height for one view means that the view change for every little change in screen size. For example, your view can be a little bigger switching from 4" to 4,7", but does not mean that it is a bad idea.

For use that feature just check the answer by Asadullah Ali :)

2. Use size-classes:

if you using Xcode 6 you can use the size classes and add a constraints just for a screen size; it's not difficult to use, check the Apple Documentation.

For this feature you need to able size classes for your Storyboard:

after that you can set up your view controller like you want and add a rule just for one of the classes:

you can tell to Xcode "ok, if the screen size is an 5,5 at least use this rule".

Remember that for add a constraint for a specific size classes you need first select the size class then add normally your constraint: when a size class is selected (you can check in the size classes control) Xcode add the constraints just for that class.

EDIT 1: If you have some trouble with scaling font & similar you can also use size-classes feature just for scaling a font size in a label for example; you find this option by clicking on this after activated the size classes feature:

---

I prefer tell you everything I know about your problem but in your case personally I would use the first solution: your view can dynamically change whatever is the screen size.

You need just find the best proportional percentage: you can set maybe around 10%, so the 0.1 multiplier with first item your blue view and for second item the red view.