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

Posted 2023-03-11

【中文标题】自动布局：Xcode 6：居中 UI 元素

【英文标题】：Auto layout: Xcode 6: Centering UI elements

【发布时间】：2014-10-20 17:41:10

【问题描述】：

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

我认为这是在容器中选择水平和垂直居中的问题，但当我在自动布局中尝试时似乎并非如此。其实我也琢磨了一下，还是没搞定。

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

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

【参考方案1】：

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

第 2 步：正确设置大小类后，将 UITextFields 和 UIButton 添加到情节提要中。对我来说，它看起来像-

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

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

b.您的元素需要知道它的大小含义、高度和宽度。

在这种情况下，当您想将元素居中时，我只是假设它需要从距 iPhone 屏幕左边缘 10 个刻度开始居中，并且应在距 iPhone 屏幕右边缘 10 个刻度处结束。现在，这意味着它的宽度会根据屏幕大小而有所不同，但它的高度将是相同的。

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

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

对于第二个文本字段，我添加了约束，同样的方式-

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

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

【讨论】：

我想哭。而且我认为 android 的 XML 布局很糟糕。

一旦你习惯了自动布局，它将成为你最好的朋友，但是是的，学习曲线可能非常僵硬，因为你必须通过反复试验才能真正理解什么你应该做什么和不应该做什么。除了有很多方法，你可以达到同样的目的。

@Josh 如果你不得不为这个废话放弃 XAML，你会哭的。这就是生活……微软注销了收购诺基亚手机。在这里咬紧牙关。

是的，没错，我在学校尝试了一点 WinPhone，它似乎是一个不错的可靠平台：稳定、资源高效、漂亮的 UI、便宜的硬件、良好的 IDE……太糟糕了它在商业上并不成功。 @Stonetip

@natasha：你能推荐一些学习自动布局的好资源吗？自从我发布这个问题以来，我已经走了很长一段路，但还有更多的东西要学习 re auto layout esp！

【参考方案2】：

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

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

对所有视图重复该过程并将约束设置为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。

【讨论】：

默认为任意宽高。我在哪里制作常量？

@shinnyWhack 如果默认情况下它是任何宽度和高度，那么只需简单地一一选择您的视图并设置如上图所示的约束。修复所有视图的顶部、底部、左侧和右侧约束，除了应该从顶部、左侧、右侧和固定高度修复的最后一个按钮。

但是我在哪里解决这些限制以及如何解决？ （我不想以编程方式制作这些约束）。我是否使用自动布局，如果是，我使用哪个操作：对齐还是固定？因为我是一个完整的初学者，所以很难使用它们。

@shinnyWhack 我已经更新了我的答案再次检查，希望这次你明白了。

【参考方案3】：

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

因此，对于纵向的 iPhone 6 或 6 Plus，您可以像这样选择紧凑的宽度和常规高度：

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

【讨论】：

好的，一旦我选择了肖像，之后我需要在自动布局中做什么？我希望它适用于 iPhone 6，无论如何我只使用纵向，所以它不必适合横向模式。