Autolayout设置六个方形图像

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

现在可以通过设置＆＃34;相等宽度＆＃34;的乘数值来设置方块之间的比率。约束。让我们使用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之间设置了比率约束，那么这是不可能的。