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

Question

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

Answer 1

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

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

这也是故事板文件：

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

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

Answer 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 之间设置了比率约束，则这是不可能的。