具有固定大小视图和自动调整大小的表格视图的自动布局

Posted 2023-02-27

【中文标题】具有固定大小视图和自动调整大小的表格视图的自动布局

【英文标题】：Autolayout with fixed size view and auto-resizing table view

【发布时间】：2014-07-15 16:23:58

【问题描述】：

我有一个视图，我想要一个“标题”类型块（UIView 内的一堆标签），然后是下面的表格视图。标题是固定大小的，表格视图应该根据应用程序运行的设备展开到视图的底部。

整个事情都在标签栏控制器中，我已经尝试（我认为）Interface Builder 中几乎所有可能的约束来尝试将标题固定在顶部，并让表格视图适合其余部分视图，在 3.5" 或 4" 设备上。

发生的情况是标题正确修复并且表格视图下降到标签栏下方，或者标题在顶部导航栏下方滑动，表格下降到标签栏下方，以及获得大量约束错误。

【问题讨论】：

首先，你是想让你的表头随着你的tableView滚动而滚动，还是你想让它固定在顶部，让tableView在这个表头下面单独滚动？

我希望标题固定在顶部，并且 TableView 单独滚动到标题下方。

您可以使用 Stack Overflow 的图片上传器来截屏，只是不能内联图片。如果您发布链接，我或其他成员可以为您编辑。

【参考方案1】：

第一步

在 viewController 的视图顶部添加一个 UIView。将其top、trailing 和leading constraints 设置为0，并将其height 设置为您想要的任何值。 这样做会以恒定的高度将其固定在顶部。

第 2 步

在蓝色 UIView 下方的 viewController 视图中添加一个 UITableView。将其leading、bottom 和trailing constraints 设置为0。如果可以，也将其top contraint 设置为0。就我而言，我并没有完全坚持我的蓝图。它低于 8 点，但没关系，我会在第 3 步解决这个问题。

第三步

现在我选择top constraint 并设置它的常量0 而不是8。您应该会看到 tableView 改变了它的高度以适应蓝色视图下方的空间。

第四步

如果您的蓝色视图位于导航栏下方，您必须将其top constraints 更改为84。这是因为状态栏height 是20 而导航栏height 是64。

【讨论】：

谢谢！回顾我的项目，我错过的部分是在顶视图上设置高度限制......你的描述非常好......再次感谢！

这正是我一直在寻找的东西，让我看到了约束是如何工作的，谢谢 bud！

【参考方案2】：

没有屏幕截图，这有点棘手，但这里有一些可能会有所帮助。

1.您的两个视图在界面生成器中具有相同的超级视图。 2.您的标题视图应该将superview的前导约束设置为0，将superview的尾随约束设置为0，将superview的顶部约束设置为0，并将固定高度约束设置为您喜欢的任何内容> 0。 3.您的 TableView 应该将 superview 的前导约束设置为 0，将 superview 的尾随约束设置为 0，将 header 与其自身之间的垂直约束设置为零，并将 superview 的底部约束设置为零。

如果设置了这些，您就无法获得想要的效果。确保视图是您认为的大小，即将 TableView 背景设置为粉红色，以确保它不仅仅是位于错误位置的单元格而不是 tableview。

希望这会有所帮助。

【讨论】：

谢谢...我的问题原来是我的顶部“标题”视图没有设置高度约束，这导致 2 个视图最终出现在我不想要的位置它们在运行时出现在 superview 上。