How to use autolayout to scale view for all screen sizes?

Question

The main navigation view of my app uses UIButtons with background images. I\'m using autolayout in IB to lay out the view.

I want the view to look the same (or simil

Answer 1

A little late to the party but I guess this will help someone in the future. Here is what I think is a better way to do it. I will write the steps I followed to achieve the desired result.

1 - Add both the squares in the view controller as below.

2 - Now select the first cube, and select the Pin menu from the bottom of the screen. Add the top and left constraints.

3 - Now select the second cube, the one on the right and add right and top constraints to it from the Pin menu.

4 - Now select the first cube, and cntrl-drag from inside of the cube to the view controller. Now select 'Equal Widths' from the menu. Confused huh ? Hold on.

5 - Now double click on the 'Equal Widths' constraint line and a menu will pop up. In the 'Multiplier' field change the value to 0.4

6 - Repeat step 4 and 5 for the right cube.

7 - This is how the result will look like in different sizes of iPhone. (The first one is a 4-inch device, the second is a 4.7-inch device and the third is a 3.5-inch device). P.S: The bottoms are cropped because the screenshot is from preview :)

UPDATE (16/01/2018)

In step 4, intead of selecting 'Equals Width', select 'Aspect Ratio'. Omit step 5 after this.