使用自动布局调整UIView大小

Question

目前我正在学习自动布局，并且遇到了无法解决的问题。

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

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

我的问题在于，我无法使用约束找到一种方法来实现这一点。

这是我已经拥有的约束：

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

- herd

Answer 1

你需要在绿色视图和黑色视图之间，以及在橙色视图和粉色视图之间设置等高约束。

让我们从头开始构建你的布局。如果您使视图比实际需要更小，并编辑约束常量使其变大，则通常更容易设置约束。因此，我们从五个视图开始：

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

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

选择蓝色。在顶部、前导和尾随边缘上设置常量为0的约束，并设置高度约束：

如果您更新其框架（如对话框中所示），Xcode将对其进行布局：

接下来，选择绿色。在所有四个边缘上设置常量为0的约束。顶部应与蓝色相连，前导应连接到父视图，尾随应连接到橙色，底部应连接到黑色。您可以通过单击披露三角形来检查约束的另一端连接到哪个视图：

不要立即更新绿色的框架！它应该看起来像这样：

接下来，对橙色、黑色和粉色执行相同的操作。

在为所有底部视图创建边缘约束后，选择这四个视图（绿色、橙色、黑色和粉色）。应该看起来像这样：

选择这四个视图后，创建等宽和等高的约束：

请注意，这样做有点过头了。我们不需要在左右列之间创建等高约束，也不需要在上下行之间创建等宽约束。但是这个答案本来就很长，将所有等大小的约束都创建一次会更简短。

现在它看起来更乱了：

选择顶层视图或视图控制器，然后选择“View Controller中更新所有框架”：

Xcode应该会像这样布局视图：

如果您点击表单因素切换按钮，Xcode应该会像这样布局视图：

我已将最终的Storyboard上传到此Gist。

- rob mayoff

---

哇，这就像上了一堂自动布局课。非常感谢您提供的信息！！ - Douglas

我无法形容这个答案有多棒，你太厉害了Rob！！非常感谢，非常有效，现在我要学习并尝试吸收所有的信息 :) - herd

非常棒的答案。谢谢。完美地运作了。 - Ríomhaire

@rob-mayoff，您能否说明一下这个问题的场景：http://stackoverflow.com/questions/34523257/multiple-uiview-autolayout-issue - Ben10