中心 4 个带有约束自动布局的图像答案

【问题标题】：Center 4 images with constraints autolayout中心 4 个带有约束自动布局的图像
【发布时间】：2014-12-13 10:35:55
【问题描述】：

我是自动布局的新手，我有点纠结于如何将这 4 个图像在所有不同的设备中居中，就像它在图像上的样子一样。我试图应用自动配置的约束，但它会有那个距离并且不适合所有设备。所以我的问题是我需要对所有不同的图像应用什么约束才能使所有图像以相同的距离居中？

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

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

模拟器中的图片：

/// 我的尝试////

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

结果：

【问题讨论】：

一个建议是为您的图像视图创建一个容器视图。然后在视图控制器的视图中居中该容器视图。

标签： ios objective-c iphone swift autolayout

【解决方案1】：

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

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

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

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

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

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

希望你能明白。

【讨论】：

嘿，谢谢您的宝贵时间。我可以看到你已经做了一个演示项目。出于展示目的。我一直在挣扎，但似乎仍然没有结果。你能和我分享这个项目吗？提前谢谢你
我已经编辑了我的答案，请检查是否能解决您的问题。
谢谢，我现在就去看看！最好的问候
如果我选择第一种方法，我想我需要使单元格高度动态化。这怎么可能？
这个技巧真的解决了我的问题。令人难以置信的是，对于基本问题，自动布局有时非常困难（或至少不是微不足道的）。

【解决方案2】：

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

【讨论】：

我已经尝试完全按照你所说的去做。在底部查看我的问题。

【解决方案3】：

情节提要上的对象需要每个对象至少有 4 个约束。

当 UIImageView 对象周围出现橙色线时，如您的问题中所示，这意味着缺少约束或存在冲突，并且通常意味着图像在运行时不会像您预期的那样显示。

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

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

希望对你有帮助

【讨论】：

【解决方案4】：

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

Image about layouts

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

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

Screenshot of Xcode

【讨论】：