如何在 Xcode Interface Builder 中设置约束，以便视图相应地更改其宽度或高度？答案

【问题标题】：How to set in Xcode Interface Builder constraints so that views change their width or height accordingly?如何在 Xcode Interface Builder 中设置约束，以便视图相应地更改其宽度或高度？
【发布时间】：2014-10-10 19:14:01
【问题描述】：

我正在使用 Xamarin Studio 进行 iOS 开发，而且我刚刚开始使用 Xcode Interface Builder，这让我很头疼。我的 Xcode 版本是 5.1.1(5B1008)，我在 Xamarin Studio 5.5 build 227 上使用 Xamarin.iOS 8.2.0.193 在 Starter Edition 上。

我无法理解如何使用自动布局功能，并且我已经阅读了教程，大多数人说，将元素拖到视图中，单击 Pin 图标，设置约束并完成它。

但是我添加的元素最终看起来不像我想要的那样。

例如，假设我想创建一个包含滚动视图的视图，并在其中显示标签和文本字段，就好像它是一个表单一样，通过拖放元素想象我最终会得到这样的结果：

我希望的布局是每个标签和文本字段与左右相距 11 dps，无论方向如何，也需要彼此相距 11 dps，初始标签为 50 dps除了滚动视图的顶部。

每个元素都应该始终保持相同的高度（20 dps），但它们的宽度必须根据左右约束而变化。

我的布局定义到此结束。

现在让我们开始定义左右约束以及高度。我所做的是选择所有标签和文本字段，我固定左右并将它们的高度设置为相同的值：

但我得到的是这样的：

生成的布局看起来与我想要的完全不同，每个元素的宽度都设置为相同的大小，正确的值没有意义，我说的是 11 dps，但我得到的值是 187、173 和 228。

即使我设置了顶部和底部约束，正确的约束看起来还是一样的：

我该如何解决这个问题？我已经多次删除并从头开始，但我无法理解我做错了什么。有些技术语言有时会给我带来挑战（我不是以英语为母语的人），所以我不知道我是否有不同的解释。

我查看过的一些教程链接是this、this 和this。

【问题讨论】：

仅供参考，UIScrollViews 的自动布局是一个特别棘手的领域。总的来说，这让我非常沮丧，以至于我最终改用了静态UITableViews。 rob 下面的答案是一个很好的通用答案，但我真的发现，滚动视图约束错误经常是一个巨大的痛苦。我要么按照我的意愿展示我的观点，让 Xcode 为我设置我的约束（建议的约束），要么使用静态 UITableViews。

标签： ios xcode xamarin.ios xamarin interface-builder

【解决方案1】：

您需要让 Interface Builder 更新这些元素的框架。所有这些黄线/数字都是当前不满足的约束 - 元素的框架与约束要求的不匹配。

但是，在要求 IB 更新框架之前，通常最好先确保设置好所有约束。

在这里，我已经设置了你描述的所有约束，但我没有要求 IB 更新框架：

在这里，我已经要求 IB 更新顶层视图中所有视图的框架：

如果我选择子视图，我可以看到约束现在显示为蓝色，表示它们已满足：

【讨论】：

我知道我必须在容器中选择更新框架，我在更新框架之前用橙色破折号引导自己进行最终布局，但元素的宽度仍然很小。我所做的是：选择元素，将顶部、左侧、右侧和底部固定为 11，高度为 20 和相等的高度。选择容器中的更新帧，我得到了this result。如您所见，正确的约束不是我想要的 11 dps。
我也运行模拟器，得到this result。蓝色容器是约束设置为 11 的滚动视图。
在所有子视图上创建 height-20 的约束以及创建等高约束是没有意义的。你应该摆脱其中一个。从您的 IB 屏幕截图中，我推断您的尾随（右边缘）约束未设置为 11。您需要编辑每个约束以修复其常量。
这就是I'm setting on the selected elements。每当我将权利设置为 11 时，代表约束的线都是红色的。应用它后，如果我检查元素上的约束，右边说它的值为 245。是因为滚动视图吗？还是我遗漏了什么？请记住，我是使用 Interface Builder 的新手，所以我可能会跳过一些习惯于 iOS 的开发人员。
当您有冲突的约束时，您会得到一条红线。不要添加更多约束。将现有约束上的 245 更改为 11。