自动布局：Xcode 6：居中 UI 元素

Auto layout: Xcode 6: Centering UI elements

提问by cheznead

I'm using Interface Builder in Xcode 6 to make an app and am having trouble getting the text fields and button to centre on the screen for different size screens.

我在 Xcode 6 中使用 Interface Builder 来制作一个应用程序，但无法让文本字段和按钮在不同尺寸屏幕的屏幕上居中。

I thought it was a matter of selecting horizontal and vertical centering in container but it doesn't seem to be that when I try it in auto layout. Actually I've tinkered around a bit and I still haven't got it.

我认为这是在容器中选择水平和垂直居中的问题，但当我在自动布局中尝试时似乎并非如此。实际上，我已经修补了一些，但仍然没有得到它。

I just want to be able to see all of my button and text fields for any size iPhone screen and right now simulator is only showing part of these UI elements like this:

我只是希望能够看到任何尺寸的 iPhone 屏幕的所有按钮和文本字段，现在模拟器只显示这些 UI 元素的一部分，如下所示：

I also want to do this in storyboard and not in code as I'm not at the level of doing this in code yet.

我也想在故事板中而不是在代码中执行此操作，因为我还没有达到在代码中执行此操作的级别。

回答by Natasha

Step 1: Make sure your size class covers all the iPhone screen at least in portrait view. So, change the size class to "wCompact hRegular".

第 1 步：确保您的尺寸等级至少在纵向视图中覆盖所有 iPhone 屏幕。因此，将大小类更改为“wCompact hRegular”。

Step 2: After setting the size class properly, add the UITextFields and UIButton to your storyboard. To me, it looks something like-

第 2 步：正确设置大小类后，将 UITextFields 和 UIButton 添加到您的故事板。对我来说，它看起来像-

Step 3: Before, you start adding constraints, you need to remember two things-

第 3 步：在开始添加约束之前，您需要记住两件事——

a. Your element(UITextField, UIButton, UIView or any component) needs to know its starting position unambiguously, and

一种。您的元素（UITextField、UIButton、UIView 或任何组件）需要明确地知道其起始位置，并且

b. Your element needs to know its size meaning, its height and width.

湾 你的元素需要知道它的大小含义，它的高度和宽度。

In this case, as you want to centre your elements, I am just assuming that it needs to be centred starting from 10 scale from the left edge and should end 10 scales away from the right edge of your iPhone screen. Now, that means, it's width will be different based on the screen size, but its height will be same.

在这种情况下，由于您想让元素居中，我只是假设它需要从左边缘 10 刻度开始居中，并且应该从 iPhone 屏幕的右边缘开始 10 刻度。现在，这意味着，它的宽度会根据屏幕尺寸而不同，但它的高度将是相同的。

So, I just add the constrains following way for the 1st text box-

所以，我只是按照以下方式为第一个文本框添加约束-

Notice, in the size inspector, I set the text box's starting point, x and width in a way that it is 10 pt away from left edge and 10 pt away from the right edge. Don't worry, it's just simple math.

请注意，在尺寸检查器中，我将文本框的起点、x 和宽度设置为距左边缘 10 pt 和距右边缘 10 pt。别担心，这只是简单的数学运算。

For the 2nd textField, I add the constrain, the same way-

对于第二个 textField，我以相同的方式添加了约束-

Lastly, for the button, the constrains are following-

最后，对于按钮，约束如下-

Now, you are good to go. Everything is centred.

现在，你可以走了。一切都以中心为中心。

Hope this helps.

希望这可以帮助。

回答by iHulk

By using your size class selector in the bottom of the storyboard window, set you sizes as any width and any height and then follow the below auto layout constrains. It will work for you.

通过在故事板窗口底部使用尺寸类选择器，将尺寸设置为任意宽度和任意高度，然后遵循以下自动布局约束。它会为你工作。

First select the view you want to set the auto layout, and then select the pin option from the right bottom corner of your storyboard and then add the constrains as shown in above picture and click button Add 4 constrains

首先选择要设置自动布局的视图，然后从故事板的右下角选择固定选项，然后添加如上图所示的约束并单击按钮 Add 4 constrains

Repeat the process for all views and set the constrains as Fix the top, bottom, left and right constrains of all views except the last button that should be fix from top,left,right and fixed height.

对所有视图重复该过程并将约束设置为 Fix the top, bottom, left and right constrains of all views except the last button that should be fix from top,left,right and fixed height。

回答by Chris

You need to make use of the size class selector in the bottom of the storyboard window.

您需要使用故事板窗口底部的大小类选择器。

So for an iPhone 6 or 6 Plus in portrait you would choose a compact width and regular height like this:

因此，对于纵向的 iPhone 6 或 6 Plus，您将选择紧凑的宽度和常规的高度，如下所示：

And then you would do whatever auto layout stuff for the given device there

然后你会在那里为给定的设备做任何自动布局的东西