如何在 XCode 的界面构建器中垂直和水平居中/居中多个对象？

How do I centre/center multiple objects vertically and horizontally in XCode's interface builder?

提问by LondonGuy

So I've set up my constraints:

所以我设置了我的约束：

In each device these objects are displaying as expected.

在每个设备中，这些对象都按预期显示。

iPhone:

苹果手机：

iPad:

iPad：

But not I'd like to control how high up or low down these objects are from the top or bottom of the screen or just centre them. You can see from my screen shot they're not centred horizontally.

但我不想控制这些对象从屏幕顶部或底部的高度或底部，或者只是将它们居中。你可以从我的屏幕截图中看到它们没有水平居中。

What I've tried:

我试过的：

When I try to centre them I keep getting those annoying yellow warnings. I even tried to add a view and put the objects inside the view and setup the constraints then centre that view. I still got errors.

当我尝试将它们居中时，我不断收到那些烦人的黄色警告。我什至尝试添加一个视图并将对象放在视图中并设置约束，然后将该视图居中。我仍然有错误。

How do I do this correctly?

我该如何正确地做到这一点？

回答by Gordon Worswick

Had a bit more time so i thought I would explain it a little better

有更多的时间，所以我想我会更好地解释它

1) Select the button / thing you want to position, in my image below it's a button called actions which I want to place to the right someway down the screen

1) 选择您想要放置的按钮/东西，在我下面的图片中，它是一个名为操作的按钮，我想将其放置在屏幕右侧的某个位置

2) click align from the buttons at the bottom right

2）点击右下角的对齐按钮

3) choose align "horizontal centre in container" or vertical depending on whether you want to position it vertically or horizontally

3）选择对齐“容器中的水平中心”或垂直，具体取决于您要垂直放置还是水平放置

The screen will look something like this, ignore all the complaints in yellow we will fix them later

屏幕看起来像这样，忽略所有黄色的投诉我们稍后会修复它们

4) Choose the newly created constraint from the buttons "size inspector" on the right, select it and edit it

4）从右侧的“尺寸检查器”按钮中选择新创建的约束，选择它并进行编辑

5) At the top choose the "first item" and select "reverse first and second item" from the pull down menu

5）在顶部选择“第一项”并从下拉菜单中选择“反转第一项和第二项”

6) Then choose what part of the button you want to align ie leading edge / middle so far the right side of xcode should look something like this:

6) 然后选择你想要对齐的按钮的哪一部分，即前缘/中间到目前为止 xcode 的右侧应该是这样的：

the super view has to still be:

超级视图必须仍然是：

superview.centre X

超级视图中心 X

7) then you can set the multiplier to divide the screen equally or to a percent, ie 0.5 / 1 / 1.5 - quarter way across screen, halfway, 3/4 way across

7）然后你可以设置乘数来等分屏幕或百分比，即0.5 / 1 / 1.5 - 屏幕的四分之一，中间，3/4

You see the number on the yellow constraint has changed

您会看到黄色约束上的数字已更改

If you change the multiplier again

如果您再次更改乘数

The number will change

号码会变

Don't worry that the button hasn't moved, that all happens when you update the view select the main view and then select "update all frames in view" from the bottom right update menu

不要担心按钮没有移动，当你更新视图时，一切都会发生选择主视图，然后从右下角的更新菜单中选择“更新视图中的所有帧”

Don't worry if everything else on the screen goes wrong whats important is your button is positioned correctly in this case horizontally in the view (you can at this point do an undo and go back to the point before the update, make a change to the constraint and then update again, then undo and tweak and go round like this until you have it perfect)

如果屏幕上的所有其他内容都出错，请不要担心，重要的是您的按钮在这种情况下在视图中水平放置正确（此时您可以撤消并返回更新前的点，对约束，然后再次更新，然后撤消和调整并像这样循环，直到完美为止）

Now I will go back and apply the same method to the vertical alignment and then the same to each button in the view

现在我将返回并将相同的方法应用于垂直对齐，然后对视图中的每个按钮应用相同的方法

The important thing is you can set your button position however you want, center / leading etc but you MUST leave the alignment to be the center of the superview if you change it to top or leading it will convert the constraint so only constants work not multipliers

重要的是，您可以根据需要设置按钮位置，居中/领先等，但是如果将其更改为顶部或领先，则必须将对齐保留为超级视图的中心，它将转换约束，因此只有常量而不是乘数

EDIT: To add constraints you use the red box to constrain the thing to expand and contract to the edges of the device, if you simply want to fix the size of the thing you can use the constraints in the yellow boxes, remember to click the add constraints button at the bottom

编辑：要添加约束，您可以使用红色框来约束事物扩展和收缩到设备的边缘，如果您只是想固定事物的大小，您可以使用黄色框中的约束，记得点击在底部添加约束按钮