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

Question

我试图进入汽车布局业务，但我发现这有点困难。

我正试图使5个图像视图显示在视图的中心位置。他们需要调整自己的尺寸，以扩大他们的高度和宽度。

这就是它在IB中的样子(以及在运行应用程序时需要看的方式)：

​

因此，我有以下限制：

• 增加1:1的纵横比，使它们总是平方。
• 第一个按钮是“拥抱”左边的视图，所以它将显示在侧面。
• 下面的4个按钮与它们旁边的按钮有一个水平间距
• 每个按钮对屏幕的顶部和底部都有一个限制，所以如果调整屏幕的大小，它们会变得更大。

但是，当我运行它时，它看起来如下：

​

我只是有点困惑。我做错什么了？

提前谢谢，致以最良好的问候- /JBJ

**编辑**我在最后一个按钮中添加了一个尾部约束。这可以确保它们都在屏幕上，但是考虑到它的大小时会有一些问题，所以这也解决不了问题。

​

*编辑、编辑*尝试删除顶部和底部的约束，因为它们是强制增大大小的约束。在它们中添加了一个垂直中心约束。这也没用。显示它们非常小(排列得很好，但太小)，并附带警告：

​

​

​

Answer 1

好了，开始吧..。

1. 在视图中添加5个按钮.没有约束。

​

​

1. 在它们之间添加水平空间约束。还从第一个视图和最后一个视图向superview添加约束。我还将最后一个约束更改为0(请注意+306告诉我，它目前不合适)。

​

​

1. 选择所有按钮并(使用add约束按钮)

在它们加“等宽”。请注意橙色的虚线轮廓，告诉我它们现在都有相同的宽度。

​

​

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%定义设计？我该怎么写才能在电话里告诉别人它是什么样子？

在您的例子中，这是以下约束(希望我不会忘记一个)

• 它们都是正方形(等宽高度，而不是一个值)
• 他们有相同的大小，只是将其设置为相等，而不是将其设置为值。
• 元素与边缘之间的水平间距，将其设置为固定大小
• 垂直中心