How to scale height of views and postion of the views relative to the screen size using AutoLayout

Question

Using Autolayout what is the best way to keep a view's relative position and scale to each screen size? For example there are drastic differences between the 4s and iPad Pro. What type of constraints and thought processes should I be using?

The views being scaled may each have varying height and take up a different proportions of the screen. I know there are many methods to tackle this but what are the best ways.

Can the answer attach pictures so that I might clearly understand the process?

Thank u very much,

Answer 1

This is a pretty in depth question but to scale a view to the size of the parent and on down you need to use

Equal Width Constraints

Equal Height Constraints

Aspect Ratio Constraints

I use these very often. Here is a quick example

Suppose we want to divide the screen into 3 views. All with equal widths to the main controller view and we want the top to take up maybe 40% the 2nd view to take up 30% and the bottom to take up 20%. We can use equal heights constraints to the superview and edit and adjust the multiplier 0.2=20%.

To set a equal height constraint drag from the view to the parent view in storyboard and let go(you can also do this in the view hierarchy to the left Ex.Picture included).

You will see this menu.

Choose Equal heights and Repeated for equal widths. The width is fine in this example as I want it to be the width of the main view but we need to alter the multiplier on the height or each view will be the height of the main view.

Find the constraint in the size inspector and locate the constraint that says equal heights to superview(image below). Double click or click edit and bring up the menu in the image above. In this case I am setting the multiplier to 0.3 which is 30% of the parent. Now proceed to do this for all the views setting the percentage you desire.

OTHER Examples of Control Dragging to Parent Below:

I pinned all my views together.Meaning the top and bottom constraints are 0 between the views. I hope understanding these types of constraints and this is not an issue.

Example Picture of the pin menu. You can change these to 0 or whatever and quickly add Top,Bottom,Leading and Trailing for Any View

You can also use center horizontally and vertically and you can use a multiplier to keep relative position to parent view as well.

Now as to adding subviews to these views and having them scale proportionately. The process works the same way. See my final 3 big views and I am adding a smaller view to the top view I had just added that is taking up the majority of our screen. I want this new view to be like an avatar in a design.

I put it inside the top view and I am control dragging inside the small view without leaving it to get an option to add aspect ratio(notice I set the width and height equal in the size inspector before I did this step 90x90).

Let go you you will see this menu. This constraint means the view will always be square. It only needs to know its width or height and will solve for the other. Note:make sure the view is the ratio you want before control dragging in storyboard. See next image.

Now I add a top constraint of say 10 and a left of 15 to the view holding this avatar small view using the pin menu. Autolayout is still mad but all I have to do is add a width or a height since the aspect ratio constraint will solve the one we do not provide. I control drag from the small view to it's parent(anywhere outside the small view). I choose equal heights. I locate that in the size inspector to the right and change the multiplier from 1 to maybe 0.4. Now Autolayout is happy again as the small view knows how wide and tall it should be since we gave it a equal heights constraint and it knows that is supposed to stay square it solves its width.

Side Note: If I don't want to use fixed top, bottom,trailing,leading you can adjust multipliers for align vertically and horizontally to work the same as equal widths and keep relative position.

I update the views and I can continue adding views. Here is what the result would be in Preview.