自动布局设置六个方形图像

Posted 2023-03-15

【中文标题】自动布局设置六个方形图像

【英文标题】：Autolayout to set six square images

【发布时间】：2015-12-15 12:52:10

【问题描述】：

我想实现自动布局以设置六个方形图像，即使屏幕尺寸发生变化，它们也始终是方形的。 我尝试了太多的变化，但没有这样做。 在附图中，我分享了将应用自动布局的示例视图。

【问题讨论】：

左上角的正方形和其他正方形之间是否有特定的比例？

是的，它是 3（左上）:1（其他）。

您尝试了什么，有什么问题？有很多方法可以实现这一点...

【参考方案1】：

您不需要任何视图包装器或其他有趣的业务，您可以完全在每个项目之间的 IB 或 AL 约束内完成。 “诀窍”是考虑每个项目之间的关系并同时使用常数和乘数。

这里的每个方块都是 1:1 的比例。 橙色方块与第一个黄色方块的比例为 2:1，加上 8 用于填充。 橙色方块固定在左侧，第一个黄色方块固定在右侧。 所有其他黄色方块都是第一个的相对宽度。

这也是故事板文件：

https://www.dropbox.com/s/pk8iwj1beamkxtp/SO_Solution-20151215_2.storyboard?dl=0

根据评论，我添加了一个包装器视图，以便在您希望整个事物始终可见时轻松应用尺寸类。 （也可以更轻松地放入另一个故事板）。

【讨论】：

当比率不为 2 且设备处于横向时，此解决方案会导致一些问题：底部的方块在视图之外。

没有看到保持所有方块都可见的条件，但也可以添加。 2:1 以外的比率在这里也可以使用，但需要在我的示例中设置一些不同的约束。如果没有 2:1，您将需要更多的右侧和底部方格。

@MichaëlAzevedo 小改动以支持两种布局，以及一些有趣的动画 gif。 :)

展示它的最佳方式适用于各种屏幕尺寸和方向 ;)

【参考方案2】：

好的，我会给你一个简单的方法来实现这一点，但这是我的实现，我很确定有很多更简单的实现。

首先，创建一个空的子视图，并添加约束，使视图始终是左上角的正方形：

Trailing Space to superview >= 0
Trailing Space to superview = 0 @750
Top Space to superview = 0
Left Space to superview = 0
Bottom Space to superview = 0 @750
Bottom Space to superview >= 0
Aspect ratio : 1

现在在这个正方形中添加左上角的正方形和 topRightView ：

// TopLeftView constraints :
Leading Space to superview = 20
Top Space to superview = 20
Aspect ratio : 1

// TopRightView constraints :
Trailing Space to superview = 20

// Contraints between TopRightView and TopLeftView
Align bottom
Align top
Equal Width
Horizontal spacing = 20

您现在可以通过设置“等宽”约束的乘数值来设置正方形之间的比率。让我们使用 1/3 乘数。

现在让我们添加bottomLeftView。为了不过度约束我们的视图，我们不需要在正方形高度和这个视图高度之间设置一个乘数。我们知道绿色方块右边的空间等于它下面的空间，所以我们只使用间距和对齐约束。

// BottomRight constraints:
Bottom Space to superview = 20

// Contraints between BottomLeftView and TopLeftView
Align left
Align right
Vertical spacing = 20

最后一个要添加的视图是 BottomRightView，对齐约束效果很好：

// Contraints between BottomRightView and BottomLeftView
Align top
Align bottom

// Contraints between BottomRightView and TopRightView
Align left
Align right

我们到了。现在您只需要在 TopRightView 的顶部和底部以及 BottomLeftView 的左侧和右侧添加方形子视图。您还可以使用单个变量更改比率，如果您在 TopLeftView 和 BottomLeftView 之间设置了比率约束，则这是不可能的。