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

我的应用程序的主导航视图使用UIButtons和背景图像。 我在IB中使用autolayout来布局视图。

我希望iphone 4,5,6和6plus上的视图看起来相同(或类似,只是适当缩放)。 我尝试过使用纵向和横向约束,但很难弄清楚如何使用纵横比约束。

这就是iphone 5上的视图。

在iphone5上查看

这是我到目前为止在iphone 6上得到的

在iphone6上查看

这就是我想在iphone 6 / 6plus上看起来的样子。

在iphone6上查看 - 正确布局

如何使用autolayout缩放视图,使其在所有iphone屏幕尺寸上看起来相同或相似?

我做了一些修补,我相信我找到了解决方案。 我将演示如何在视图中间大致为两个较大的正方形做这个。

这是一个参考图像:

在此处输入图像描述

首先,您需要创建一个横跨超视图整个宽度的容器(我的蓝色视图),其高度等于或大于内部正方形(橙色)。
此视图需要以下约束:将中心X与Superview对齐,将中心Y与Superview对齐( OR约束以使其为您所需的Y位置),高度等于:[方形高度],尾随空间到超级视图,前导空间到超级视图。

内部橙色方块必须放在容器内,并且必须给出以下约束:将中心X与超视图对齐,将前导空间与超视图对齐(值=正方形与超视图边缘之间的空间), 尾随空格到[其他视图](值=正方形之间的空间)。 同时选择两个方块,并添加“宽高比”,“等宽”和“等高”约束。
粗体项取决于您选择的方格。 左边的那个应该有超前视图的前导空间和另一个视图的尾随空间,而右边的那个应该交换这些约束。

这可以通过自动布局为您提供所需的效果。

派对有点晚,但我猜这将有助于未来的人。 以下是我认为更好的方法。 我将编写我遵循的步骤以达到预期的结果。

1 – 在视图控制器中添加两个方块,如下所示。

在此处输入图像描述

2 – 现在选择第一个立方体,然后从屏幕底部选择Pin菜单。 添加顶部和左侧约束。

3 – 现在选择第二个立方体,右边的立方体,并从Pin菜单中添加右边和上边的约束。

4 – 现在选择第一个立方体,然后从立方体内部cntrl-拖动到视图控制器。 现在从菜单中选择“Equal Widths”。 困惑吧? 等一下。 在此处输入图像描述

5 – 现在双击“Equal Widths”约束线,弹出一个菜单。 在“乘数”字段中,将值更改为0.4

6 – 对右侧立方体重复步骤4和5。

7 – 这就是不同尺寸iPhone的结果。 (第一个是4英寸设备,第二个是4.7英寸设备,第三个是3.5英寸设备)。 PS:底部被裁剪,因为截图来自预览:)

在此处输入图像描述

更新(16/01/2018)

在步骤4中,选择’Equals Width’,选择’Aspect Ratio’。 在此之后省略步骤5。