自动布局 – 中央有5个button

我正在尝试进入自动布局业务，但我觉得很难。

我试图让5个图像视图显示在视图的中心彼此相邻。 他们需要调整自己的身高来扩大身高。

这就是它在IB中的样子（以及它在运行应用时需要看的样子）：

所以我有以下约束：

• 增加了1：1的长宽比，以便它们总是平方
• 第一个button是“拥抱”视图的左侧，所以它会显示在旁边。
• 以下4个button与它们旁边的button之间具有水平间距
• 每个button对屏幕的顶部和底部都有一个限制，所以如果调整屏幕大小，它们会变大。

但是，当我运行它，它看起来像这样：

而我只是有点难倒在这里。 我究竟做错了什么？

在此先感谢，最好的问候 – / JBJ

**编辑**我添加了最后一个button尾随约束。 这确保了它们都在屏幕内，但是在考虑它的大小的时候有点问题，所以也没有解决它。

*编辑编辑*试图消除顶部和底部约束，因为他们是迫使大小。 为他们全部添加了垂直中心约束。 这也不行。 显示他们非常小（排队很好，但太小），还带有警告：

Answer 1

好的，这里是…

1. 将5个button添加到视图中…没有约束。

2. 在它们之间添加水平空间限制。 还要将第一个和最后一个视图的约束添加到超级视图。 我也将最后一个约束更改为0（注意+306告诉我它现在不合适）。

3. select所有的button和（使用添加约束button） 为他们添加“等宽”。 注意橙色虚线轮廓告诉我，他们现在都将有相同的宽度。

4. 现在用这个button将它们alignment在视图的垂直中心。

5. 最后要做的是去每一个，并添加1：1的长宽比。 您需要添加约束，然后将其编辑为1的比例。

一旦完成重新定位button到他们的新约束，请确保更新帧…

预览屏幕显示了这个工作在所有不同的大小…

Answer 2

把它们放在屏幕的中央垂直使用

NSLayoutConstraint *constraintHorizontal = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.superview attribute:attribute multiplier:1.0f constant:0.0f]; 

button宽度=（屏幕宽度） – （button间距尺寸） – （左侧距离） – （右侧距离）/ 5;

高度相同。 第一个图像视图的初始左边限制是左边的距离。

Answer 3

在这种情况下，我总是这么做，只是简单的思考。 我需要多less约束来100％定义devise？ 我应该写什么来告诉电话中的人看起来像什么？

在你的情况下，这是以下限制（希望我不会忘记一个）

• 他们都是正方形（宽度相等，不是数值）
• 它们具有相同的大小，只是将其设置为相等，而不是一个值
• 元素和边之间的水平间距，将其设置为固定大小
• 垂直居中

Answer 4

1. 在UIView中垂直和水平放置5个button

2. select所有这些并将它们embedded到堆栈视图中

3. 改变分布以平等地填充。

4. 在属性检查器中调整间距以在button之间留出空间。

5. 将前导和尾随空间和高度约束添加到堆栈视图。 也垂直alignment它。