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

Question

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

您可以通过将 imageView 和行包装到单独的容器 View 中来实现您想要的目的(请参阅 Attachment )

imageView的步骤:

1. ContainerView1 限制在单元格 View 的顶部和 checkin 按钮的顶部
2. imageView 垂直约束于 ContainerView1 的中心。还可以根据需要将 imageView 前导约束设置为 ContainerView1 前导

行的步骤

1. 将行换行到 ContainerView2 中。 ContainerView2 限制在单元格 View 的顶部和 checkin 按钮的顶部。
2. 将 firstRow 顶部约束到 ContainerView2 顶部。每个后续行都应受到其顶部和前一行底部的约束。将 lastRow 底部约束到 ContainerView2 底部
3. 对于除 firstRow 之外的所有行，拖动“等高”约束使其等于 firstRow 高度

仅此而已!

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