使用自动布局调整Uiview的大小

Question

现在我正在研究汽车布局，我遇到了一个无法解决的问题。

我有一个视图，可以在4英寸设备中正确加载（左视图），我试图将其调整为3.5英寸设备，使其与图像上的右视图完全相同：

唯一的区别是绿色，橙色，黑色和粉红色的视图应该缩小一点，以保持上述两个视图的相同大小。

我的问题是，我无法找到使用约束来实现这一目标的方法。

这就是我已经拥有的约束所发生的事情：

我已经尝试将底部空间固定为黑色和粉红色视图的超视图，以便视图缩小以适应屏幕，但是这不起作用并且在Xcode上给了我很多警告。

Answer 1

绿色和黑色视图之间以及橙色和粉红色视图之间需要等高约束。

让我们从头开始构建您的布局。如果使视图小于您想要的值，通常更容易设置约束，并编辑约束常量以对其进行调整大小。所以我们从五个观点开始：

这里的观点布局很重要！请注意，橙色视图例如严格位于绿色视图的右侧。这意味着如果我要求Xcode从绿色视图的后边缘到其最近邻居创建约束，则该邻居是橙色视图，而不是超级视图。

在文档大纲中命名视图很有帮助。要命名一个，请在大纲中单击其条目，按Return键，然后键入名称：

选择蓝色。在顶部，前导和后缘以及高度约束上给它约束，常数为0：

如果你更新它的框架（正如我在对话框中所做的那样），Xcode会像这样将它展开：

接下来，选择绿色。在所有四条边上给它约束，常数为0。顶部应该去蓝色，领先应该去superview，尾随应该去橙色，底部应该去黑色。您可以通过单击显示三角形来检查约束另一端的视图：

不要更新Green的框架了！它应该是这样的：

接下来，为橙色，黑色和粉红色做同样的事。

为所有四个底部视图创建边缘约束后，选择所有四个视图（绿色，橙色，黑色和粉红色）。它应该是这样的：

选择全部四个，创建等宽和等高约束：

请注意，这太过分了。我们并不需要左右列之间的等高约束，我们也不需要在顶行和底行之间使用等宽约束。但是这个答案已经有一英里长，并且在一个动作中创建所有相等大小的约束要短得多。

现在看起来应该更加混乱：

选择顶级视图或视图控制器，然后选择“在视图控制器中更新所有帧”：

Xcode应该像这样布置视图：

如果单击形状因子切换按钮，Xcode应该布置如下视图：

我已将最终的故事板上传到this gist。