如何使用自动布局缩放所有屏幕尺寸的视图？

Question

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

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

这就是iphone 5上的视图。

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

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

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

Answer 1

我做了一些修补，我相信我找到了解决方案。我将演示如何在视图中间大致为两个较大的方块进行操作。

以下是参考图片：

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

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

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

Answer 2

派对有点晚了，但我猜这将有助于将来的某个人。 这是我认为更好的方法。我将写下我为实现预期结果而采取的步骤。

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

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

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

4 - 现在选择第一个立方体，然后从立方体内部cntrl-拖动到视图控制器。现在从菜单中选择“Equal Widths”。困惑吧？坚持，稍等。

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

6 - 对正确的立方体重复步骤4和5。

7 - 这就是不同尺寸iPhone的结果。 （第一个是4英寸设备，第二个是4.7英寸设备，第三个是3.5英寸设备）。 P.S：底部被裁剪，因为截图来自预览：）

更新（16/01/2018）

在步骤4中，选择'Equals Width'，选择'Aspect Ratio'。在此之后省略第5步。