居中4张带约束自动布局的图像

我是新来的自动布局，我很困难如何将这4个图像集中在所有不同的设备，如它看起来在图像上。 我试图应用自动configuration的约束，但它会有这样的距离，并不适合所有设备。 所以我的问题是，我需要在所有不同的图像上应用哪些约束条件才能使所有图像以相同的距离居中？

这是我在storyBoard中的单元格的样子：

图像1上约束选项的图像：

模拟器中的图像：

/// MY TRY ////

在这里你可以看到我添加的约束和结果？

结果：

Answer 1

你的方法几乎是正确的，它只是缺乏图像的大小限制。

如果要dynamic调整图像大小并保持它们之间的空间不变，请将图像上的宽度约束设置为>=20 （或其他任何值，取决于您的需要）以及保持宽高比的限制。 然后从UIImageView1拖动到UIImageView2并设置一个约束相等的宽度 。 重复从UIImageView1到UIImageView3和从UIImageView1到UIImageView4 。

---

如果您希望图像始终保持其固定大小和dynamic大小的空间，则需要另一种方法：

这里的技巧是在UIImageView之间放置3个空的UIViews，看起来像这样：

• 将约束设置为所有视图的顶部
• 为UIImageView1和4设置左右限制
• 将所有UIImageViews的约束设置为相同的宽度
• 将UIImageView之间的所有UIView的约束设置为相同的宽度
• 将视图间所有距离的约束设置为0
• 将UIViews的宽度约束设置为>= 0

这种方式使UIImageViews之间的空UIViewsdynamicresize和宽度。

我希望你明白这个主意。

Answer 2

对于第一张图片，将超前空间添加到超级查看中，对于最后一张图片，向超级查看添加拖尾空间，并在第一和第二，第二和第三，第三和第四之间添加垂直间距，并将容器内的水平中心设置为每个图像

Answer 3

故事板上的对象每个对象至less需要4个约束 。

当UIImageView对象周围出现橙色的线条，就像你的问题出现的那样，这意味着缺less一个约束，或者是冲突，通常意味着图像在运行时不会像你期望的那样显示出来。

在第一种情况下，我build议您select所有对象和“清除约束”，然后重新开始。

虽然不完全一样，但是这里是链接到一个答案，更详细地解释了自动布局约束。 一旦你了解它，自动布局可以非常强大。

>>链接到类似的自动布局问题 – iOS CustomTableViewCell：元素没有正确alignment<<

我希望这有帮助

Answer 4

如果你想让图像始终保持它们的固定大小和dynamic大小的空间，那么最简单的方法就是先拖动四个UIView到你的StoryBoard中，为所有的UIViews设置约束左上angular和右下angular的高度，并给所有的UIViews赋予相同的宽度（从一个UIView拖到另一个，并设置其相同的宽度重复这个工作的所有UIViews）。

关于布局的图像

其次你必须拖动你的图像设置在这些UIViews中，并设置它们的约束高度的宽度和中心水平的容器和垂直中心容器。

在最后设置的所有UIViews默认（白色）的背景颜色，你会得到的结果，它将工作….我保证。

Xcode的屏幕截图