中心4图像与约束自动布局

Question

我是autolayout的新手，我有点不知道如何将这4个图像集中在所有不同的设备中，就像它在图像上看起来一样。我试图应用自动配置的约束，但它将具有该距离，并且不适合所有设备。所以我的问题是我需要在所有不同的图像上应用哪些约束才能使所有图像以相同的距离居中？

以下是storyBoard中我的单元格的样子：

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

模拟器中的

图像：

///我的尝试////

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

结果：

Answer 1

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

如果你想动态调整图像的大小并保持它们之间的空间不变，那么对图像施加约束宽度为>=20（或任何其他值，取决于你的需要）和约束保持纵横比。然后按住Ctrl键从UIImageView1拖动到UIImageView2，并为等宽设置约束。从UIImageView1到UIImageView3以及从UIImageView1到UIImageView4重复此操作。

---

如果您希望图像始终保持固定大小并在它们之间动态调整大小，则需要采用另一种方法：

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

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

这种方式使UIImageViews之间的空UIViews动态调整大小并且宽度相同。

我希望你明白这一点。

Answer 2

对于第一个图像，在superview中添加一个前导空格，为最后一个图像添加一个尾随空间到superview，并在第一个和第二个，第二个和第三个，第三个和第四个之间添加垂直间距，并在容器内设置水平中心到每个图像

Answer 3

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

当问题中出现UIImageView对象周围的橙色线条时，这意味着约束缺失或发生冲突，通常意味着图像不会像您期望的那样在运行时显示。 / p>

首先，我建议您选择所有对象并清除约束，然后重新开始。

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

>>Link to similar auto-layout issue - iOS CustomTableViewCell: elements not aligning correctly<<

我希望这会有所帮助

Answer 4

如果您希望图像始终保持固定大小并在它们之间保持动态大小的空间，那么首先在StoryBoard中拖动四个UIView是非常简单的方法 为所有UIView设置约束左上角和高度，并为所有UIViews提供相同的宽度（从一个UIView拖动到另一个UIView并设置其相同的宽度，为所有UIViews重复此工作）。

Image about layouts

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

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

Screenshot of Xcode