如何正确设置水平图像视图的自动布局约束？

Posted 2023-03-12

【中文标题】如何正确设置水平图像视图的自动布局约束？

【英文标题】：How to properly set constrains for Auto layout for horizontal image views?

【发布时间】：2016-08-13 08:03:06

【问题描述】：

我遇到了自动布局问题。更具体地说，当您有一个相当复杂（或可能紧凑）的布局时，我对自动布局的工作方式感到困惑。当我尝试进行水平布局时，我什至从未成功过。比如我之前尝试在storyboard中横向设置两个标签，不管我做什么，在实际设备上查看时都一团糟。

所以这一次，我的噩梦又来了。这里的截图是我在故事板中设置的视图。我正在使用自动布局，所以我必须添加约束，我首先要做的是为第一个图像视图（左上角）添加一个顶部空间约束，它告诉我视图是模棱两可的。这似乎不对，因为在这样的情况下，Xcode 总是告诉我图像视图需要一个 x 位置。但这一次是“模棱两可”。而且我尝试了很多东西，无论如何它都没有锻炼。我放弃了手动设置，而是让 Xcode 为我做这件事，我点击“重置为建议的约束”，然后设置相等的宽度和高度，然后将图像视图设置为 1:1 宽高比。但是在预览的时候，还是一团糟。

显然，无论是我还是 Xcode 都无法按预期设置布局。这就是为什么我来这里问你们，让我为你们分解一下我的担忧： 1. 我应该为所有图像视图设置什么约束？ 2.我应该为“主题”设置什么约束？ 3. 我应该为标签设置什么约束（主题下方的描述）？

提前致谢。

【问题讨论】：

您也可以将UIStackViews 用于这样的布局。

【参考方案1】：

问题是你什么时候开始

我正在使用自动布局，所以我必须添加约束，我首先做的是 为第一个图像视图（左上）添加一个顶部空间约束，它 告诉我意见模棱两可。

因此，当您设置顶部和左侧时，您的视图知道 x 和 y，但它仍然不知道需要为自己设置的宽度和高度。这是您下一步应该做的事情。找出一种方法，以便约束可以确定高度和宽度。一个一般的例子会给出一个底部和右侧，固定的宽度和高度等等，可以是 n 个案例。

设置相等的宽度和高度，然后将图像视图设置为 1:1 纵横比 收音机

您已将约束设置为宽度和高度以及某些纵横比。此时，图像视图仍然不知道宽度或高度是多少，因为您从未告诉任何视图它们应该自行扩展多少。

在为您的视图设置约束时，您需要确保至少一个视图知道它应该扩展和收缩多少，以便其他视图可以解决这个问题。

现在让我们告诉你如何解决这个问题：

设置相等的宽度和高度以及 1:1 的纵横比。 将所有的 ImageView 都用一个顶部粘贴。 为左边和右边的 ImageViews 附近的边距附近的视图分配左边和右边 设置垂直和水平中心。 为左上角设置底部和右侧约束，为右下角设置顶部和左侧约束。

现在您应该已经设置了所有约束并且一切顺利，因为其余的 ImageView 将从您添加的约束中推断出它们自己。