自动布局 - 在中心5个按钮 [英] Auto layout - 5 buttons in center

问题描述

我试图进入自动布局的业务，但我觉得还挺硬。

我想获得5图像视图在视图的中心相邻，以显示。他们需要调整自己，扩大自己的高度/宽度为好。

这是它的外观在IB（还挺它需要运行的应用程序时的样子）：

所以，我有以下的限制：

• 的加1纵横比：1，使他们始终平方


• 第一个按钮是拥抱视图的左侧，所以将显示在侧


• 以下4个按钮有一个横向间距按钮旁边


• 每个按钮都有一个约束到屏幕的顶部和底部，因此，如果调整​​屏幕就会变得更大。

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

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

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

**编辑**
我添加了一个尾随约束到最后一个按钮。这可以确保他们都在屏幕内，但考虑它的大小时，这样没有解决，要么是有点问题的。

*编辑编辑*
试图，因为它们是那些迫使大小上除去的顶部和底部的约束。增加了一个垂直中心约束他们。这将不能工作。显示它们非常小（很好一字排开，但太小了），并且还配备了警告：

解决方案

OK，这里去...

1. 添加5按键的观点......没有任何限制。

<醇开始=2>

添加所有这些之间的水平空间的限制。还从第一和最后一个视图向上海华加约束。我也改变了最后一个约束为0（注意306告诉我，这是目前出来的地方）。

<醇开始=3>

选择所有的按钮和（使用添加约束按钮）添加宽度相等去商场。注意橙色虚线轮廓告诉我，他们现在都将有平等的宽度。

<醇开始=4>

现在，它们对齐在这个按钮视图的垂直中心...

做的最后一件事就是去每一个并添加1：1纵横比。你需要添加约束，然后编辑到1的比例。

请确保您更新框架一旦你完成重新定位按钮，他们的新的约束......

在preVIEW屏幕显示这方面的工作在所有不同尺寸...

I am trying to get into the Auto Layout business, but i find it kinda hard.

I am trying to get 5 image views to display next to each other in the center of the view. They need to resize themselves to expand their height / width as well.

This is how it looks in IB (and kinda the way it needs to look when running the app):

So i have the following constraints:

• Added aspect ratio of 1:1 so that they will always be squared
• First button is "hugging" the left side of the view, so it will be displayed in the side.
• The following 4 buttons have a horizontal spacing to the button next to them
• Each button has a constraint to the top and bottom of the screen, so they will get bigger if you resize the screen.

However, when i run it, it looks like this:

And i am just kinda stumped here. What am i doing wrong?

Thanks in advance, Best Regards - /JBJ

** EDIT ** I added a trailing constraint to the last button. This makes sure they are all within the screen, but is kinda problematic when thinking about the size of it, so that didn't solve it either.

* EDIT EDIT * Tried removing the top and bottom constraint since they are the ones forcing the size up. Added a vertical center constraint to them all. This won't work either. Displaying them very small (lined up nicely, but too small) and also comes with warnings:

解决方案

OK, here goes...

1. Add 5 buttons to the view... No constraints.

2. Add horizontal space constraints between them all. Also add constraints from the first and last view to the superview. I've also changed the last constraint to 0 (notice the +306 telling me it's currently out of place).

3. Select all the buttons and (using the add Constraint button) add "Equal Widths" to them all. Notice the orange dotted outline telling me they now all will have equal widths.

4. Now align them in the vertical centre of the view with this button...

5. The last thing to do is to go to each one and add the 1:1 aspect ratio. You'll need to add the constraint and then edit it to a 1 ratio.

Make sure you update the frames once you're done to reposition the buttons to their new constraints...

The preview screen shows this working at all different sizes...

这篇关于自动布局 - 在中心5个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！