Autolayout等间距和加权间距

Question

我正在尝试使用autolayout在表格视图中为单元格创建布局。我将附上我想要实现的截图。

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

我尝试了很多方法让它发挥作用。我已经设法让按钮保持在底部根据需要。但是，我正在努力让imageview保持在左边的一个正方形，然后在右边的4行占据剩下的空间。

任何帮助都将不胜感激。

Answer 1

通过将imageView和行包装到单独的容器视图中，您可以实现所需的功能（请参阅 Attachment）

imageView的步骤：

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

行的步骤

1. 将行换行到 ContainerView2 。 ContainerView2 约束在单元格视图的顶部和签入按钮的顶部。
2. 将 firstRow 置于 ContainerView2 的顶部。每个后续行应该被其前一行的顶部约束。将 lastRow 底部约束到 ContainerView2 底部
3. 对于除 firstRow 之外的所有行，拖动＆＃34;相等的高度＆＃34;约束等于 firstRow height

就是这样！

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

Answer 2

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

很难知道你的布局还有什么问题而没有看到你的约束，但为了参考，这就是我如何布置这个视图。