如何使用autolayout缩放所有屏幕尺寸的视图？

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 similar, just scaled appropriately) on iphone 4, 5, 6, and 6plus. I have tried using vertical and horizontal constraints but have trouble figuring out how to use the aspect ratio constraint.

This is what the view looks like on an iphone 5.

Here is what I've got so far on an iphone 6

This is what I want it to look like on an iphone 6/6plus.

How do I use autolayout to scale the view so that it looks the same or similar for all iphone screen sizes?

Answer 1

I've done some tinkering and I believe I've found a solution. I will demonstrate how to do it for the two larger squares roughly in the middle of your view.

Here is a reference image:

First, you need to create a container (my blue view) that spans the entire width of the superview, and has a height the same or larger than your inner squares (orange).
This view needs the following constraints: Align Center X to Superview, Align Center Y to Superview ( OR constraints to give it the Y position you desire), Height Equals: [square height], Trailing Space to Superview, Leading Space to Superview.

The inner orange squares must be placed inside the container, and must be given the following constraints: Align Center X to Superview, Leading Space to Superview (value = space between square and edge of superview), Trailing Space to [other view] (value = space between squares). Select the two squares together, and add Aspect Ratio, Equal Width and Equal Height constraints.
The items in bold depend on which square you're selecting. The left one should have leading space to superview and trailing space to the other view, and the right one should have these constraints swapped.

This should give you your desired effect with autolayout.

Answer 2

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). PS: 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.