自动布局等间距和加权间距

Posted 2023-03-15

【中文标题】自动布局等间距和加权间距

【英文标题】：Autolayout equal spacing and weighted spacing

【发布时间】：2017-12-03 12:45:37

【问题描述】：

我正在尝试使用自动布局为表格视图中的单元格创建布局。我将附上我正在尝试实现的屏幕截图。

主要规则是底部的按钮必须是单元格的宽度。然后左边的图像应该紧靠左边，但正好在整个视图的顶部和底部按钮的顶部之间。然后我需要左边的 4 行位于视图顶部和按钮顶部之间。并让他们像他们一样显示在列表中，并带有一个小的图像和文本标签。

我已经尝试了很多方法来让它发挥作用。我设法让按钮按要求保持在底部。但是，我正在努力让 imageview 在左侧保持为正方形，然后在右侧保持 4 行以占据其余空间。

任何帮助将不胜感激。

【问题讨论】：

看看我对这个问题的回答（以及用 Swift 3 编写的 repo）：***.com/questions/42860324/…。它可能会回答您的部分问题 - 它会在情节提要中创建一个 centered 方形视图。出于多种原因，我更喜欢在代码中进行约束，所以这可能没有多大帮助，但此链接讨论了 UILayoutGuides 等间距：useyourloaf.com/blog/goodbye-spacer-views-hello-layout-guides

图片是否显示了您希望的外观？它似乎与您的描述不符......“位置和时间之间的空间”不应该与图像视图的中心对齐吗？你说“左边的图像应该紧靠左边” ...但你的图像显示它的每一侧都有不确定数量的“填充”？

【参考方案1】：

您可以通过将 imageView 和 rows 包装到单独的容器视图中来实现您想要的（请参阅 Attachment)

imageView的步骤：

ContainerView1 被限制在单元格视图的顶部和签入按钮的顶部 imageView 垂直约束到 ContainerView1 的中心。还可以根据需要将 imageView 前导约束设置为 ContainerView1 前导

行的步骤

将行包装到 ContainerView2。 ContainerView2 被限制在单元格视图的顶部和签入按钮的顶部。 将 firstRow 约束到 ContainerView2 的顶部。每个后续行都应受其顶部和前一行底部的约束。将 lastRow 底部约束到 ContainerView2 底部 对于除 firstRow 之外的所有行，拖动“等高”约束使其等于 firstRow 高度

就是这样！

附：如果您的应用程序从 ios 9.0 开始工作，您可以使用 UIStackView 而不是在单元格中手动设置约束

【参考方案2】：

要使图像保持正方形，您需要 1:1 宽高比约束。

如果没有看到您的约束，很难知道您的布局还有什么问题，但作为参考，这是我布置此视图的方式。