如何使用自动布局来布局三个项目水平相等

Posted 2023-03-12

【中文标题】如何使用自动布局来布局三个项目水平相等

【英文标题】：How to Use auto layout to layout three item horizontal equal

【发布时间】：2015-11-18 08:34:48

【问题描述】：

正如您在下面的屏幕截图中看到的，我有一个包含三个 UIImageView 的静态表格视图单元格。

我希望项目之间的间距是屏幕边缘和外部项目之间间距的两倍。

间距应根据屏幕宽度动态变化（项目大小是静态的）。

如何使用自动布局来实现这一点？

提前感谢您的帮助。

【问题讨论】：

是静态的还是动态变化的？

空间根据屏幕宽度动态变化，但项目大小是静态的

在三个 UIImageView 之间添加 6 个 UIView，设置所有 item 宽度相同的约束，并将前导和尾随空格链接为零。还设置所有 9 个项目垂直居中对齐。为了保持图标的图形，你还可以限制三个 UIImageView 的纵横比。

【参考方案1】：

创建三个持有人视图，每个项目一个，它们应该与width constraint = superview.width / 3 + 0 并排放置。然后在这三个持有人视图中添加您的项目并将其centerY/centerX 设置为持有人视图的centerY/centerX

这样他们就会有你想要的完全相同的布局。

【讨论】：

如何在 Storyboard 中设置持有者视图宽度约束 = superview.width/3 + 0？谢谢@Usama

附加图像显示了各自的约束，您必须在 HolderView 和 SuperView 之间添加纵横比约束以获得附加的屏幕截图，然后按照图片所示进行修改

如果您仍然遇到问题，请在某处上传一个测试项目，我将对其进行编辑并附上此答案的解决方案。

感谢热心帮助。我在任何尺寸的设备上都能得到我想要的东西 :)

【参考方案2】：

根据我上面的评论，这是限制显示。您可以在 XIB 编辑器中指定限制。

在三个UIImageView之间添加6个UIView，设置约束表示

所有 9 个项目的宽度相同 并将前导和尾随空格链接为零 所有 9 项垂直居中对齐 设置三个UIImageView的纵横比。

在下面的屏幕快照中，我为那些 UIWebView 添加了 bg 颜色以显示它们的存在。

【讨论】：

当您可以在没有任何视图的情况下添加额外视图时，为什么要添加额外视图？

无需程序代码的自动布局和 UIImage 的大小也会根据屏幕大小调整大小。现在我从上面的答案中学习如何使用乘数。但我不知道 UIImage 在 6+ 屏幕和 iPad 上是否会变大。