ios - 当 UITableView 和 UIImageView 出现在同一 View Controller 上时如何正确使用约束

Question

假设我有以下 View Controller ，这是我希望在所有 iPhone 上看到它的方式:

如果我在 iPhone 6 上运行它，它的外观如下:

在这里您可以注意到 UITableView 没有适合整个屏幕，UIImageView 没有放在屏幕底部。

如何通过 XCode 6 中的约束实现所需的行为？我认为我需要以下约束:

• UITableView 容器边距的前导空间和顶部空间
• UIImageView 容器边距的底部空间和尾部空间
• UITableView 和 UIImageView 之间的垂直间距>

但即使在自动解决约束问题后，它也无法按预期工作:

提前致谢。

Answer 1

好的，这里有几件事:

• 每个 View 都需要足够的约束来明确定义它的 x 和 y 位置，以及它的宽度和高度。首先，返回到 Interface builder 并删除所有约束并按照您希望的方式布置 View 。您想要控制添加的每个约束，不要让 IB 自动解决问题，因为在很可能的情况下它不会做您想要的。

• 在考虑了@2x、@3x 等因素后，您的图像是否符合您希望在屏幕上显示的大小？如果是这样，那么您的工作会更容易，因为 ImageView 的宽度和高度可以由图像的宽度和高度(即 ImageView 的固有内容大小)定义。

• 为了有效地使用 Autolayout，您需要从整体上考虑您的 View ，并考虑当屏幕尺寸发生变化时您希望您的 View 如何表现，在您的头脑中清楚该行为。

为了实现您想要的布局，我将执行以下操作:

1. 将 tableview 的前缘、顶部和后缘约束到父 View ，恒定值为 0。这意味着它可以随着设备变得更宽或更薄，它会水平拉伸(stretch)，但始终保持在顶部。这已经定义了 tableview 的 x 和 y 位置，以及它的宽度(高度还有待调整，但请继续阅读……)

2. 约束 ImageView 以匹配其父 View 的水平中心(定义的 x 位置)并将其底部边缘约束到父 View 的底部边缘(定义的 y 位置)。如果您有合适大小的 Assets ，那么它也会处理宽度和高度。如果没有，您可以继续给它明确的宽度和高度限制。

3. 现在我们可以将表格 View 的底部边缘限制在 ImageView 的顶部，常数为 0(即接触)。请注意，我们没有给表格 View 明确的高度限制，因此随着设备屏幕垂直增长，表格 View 将垂直拉伸(stretch)。

Autolayout 一开始很难。我建议大量阅读以克服最初的困难，真正了解约束的作用、限制以及系统解析约束以将其转换为框架的方式。这本书真的很好，真的帮助我学习:

http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194

祝你好运