自动布局 - 中央有5个按钮

Question

我正试图进入自动布局业务，但我发现它有点难。

我想让5个图像视图在视图中心彼此相邻显示。他们需要调整自己的大小以扩大他们的身高/宽度。

这是它在IB中的样子（有点像运行应用程序时需要的样子）：

所以我有以下限制：

• 添加1：1的宽高比，以便它们始终为平方
• 第一个按钮是＆＃34;拥抱＆＃34;视图的左侧，因此它将显示在侧面。
• 以下4个按钮与其旁边的按钮具有水平间距
• 每个按钮都有一个屏幕顶部和底部的约束，因此如果您调整屏幕大小，它们会变大。

然而，当我运行它时，它看起来像这样：

我只是有点难过。我做错了什么？

提前致谢， 最诚挚的问候 - / JBJ

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

*编辑编辑* 尝试删除顶部和底部约束，因为它们是强制大小的。为它们添加了垂直中心约束。这也不会奏效。显示它们非常小（排列很好，但是太小）并且还带有警告：

Answer 1

好的，这里......

1. 向视图添加5个按钮...无约束。



1. 在它们之间添加水平空间约束。还要将第一个和最后一个视图中的约束添加到superview。我还将最后一个约束更改为0（注意+306告诉我它当前不合适。）



1. 选择所有按钮并（使用添加约束按钮）为它们添加“等宽”。请注意橙色虚线轮廓告诉我他们现在都将具有相同的宽度。



1. 现在使用此按钮将它们对齐到视图的垂直中心......





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



确保在完成按钮重新定位到新约束后更新帧...



预览屏幕显示这种工作方式各种不同......

Answer 2

将它们垂直放置在屏幕中央

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

将它们水平放置 按钮宽度=（屏幕宽度） - （按钮间距尺寸） - （左边距离） - （右边距离）/ 5;

高度相同。 第一个图像视图的初始左约束将是左距离。

Answer 3

在这种情况下我总是做的只是简单地思考。 100％定义设计需要多少约束？我应该写些什么来告诉某人电话的样子？

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

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

Answer 4

1. 在UIView

中垂直和水平放置5个按钮

2. 选择所有这些并将它们嵌入堆栈视图

3. 更改分配以平均填写。

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

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