自动布局和对齐约束

Posted 2023-03-15

【中文标题】自动布局和对齐约束

【英文标题】：Autolayout & Alignment Constraints

【发布时间】：2014-10-22 10:32:45

【问题描述】：

我想为所有 iPhone 制作类似的 ui，我目前正在为此使用自动布局，但我不知道如何使用 `NSLayoutConstraint` 创建这个 `UI`？

这个用户界面在小屏幕上运行良好，但我也希望在更大的 iPhone 上使用相同的用户界面（在按钮之间保持一定的空间）。我如何在其中添加约束以获得与 iPhone 4s 相同的用户界面。

我拿了UIButton 和下面的标题是UILabel。

有人在这里帮助我。

截图。

【问题讨论】：

您使用的是故事板还是 xib？还是你在代码中做这一切？

@robmayoff 我正在使用storyBoard。

【参考方案1】：

我个人发现试图理解代码中的自动布局约束（并使用 NSLayoutConstraint）非常令人困惑且难以理解。 VFL (Visual Format Language) 功能强大，但如果您刚开始使用 Auto Layout，我建议您使用 Storyboard 或 XIB 文件可能会更容易（取决于您的个人偏好）。

由于这是一个相当复杂的话题，我将a sample project for you to reference on GitHub 放在一起。这种方法的好处是实际上没有代码——所有的配置都在 Storyboard 中完成（或者也可以在 XIB 文件中完成）。我创建的约束的重点如下，但请参考示例项目了解具体细节：

背景视图（紫色）- 约束将顶部、底部、左侧和右侧固定到父视图的边缘。 图标容器视图（白色）- 约束固定底部、左侧和右侧；还设置了一个高度以容纳所有图标。 所有图像视图都具有宽度约束和纵横比约束（保持相等的宽度和高度），并且所有标签都被约束到具有适当垂直约束的适当图像（顶部）。 外角图标都被限制在其角落（左上角、右上角、左下角、右下角）。中心角被限制在视图内水平居中。

如果您刚刚开始使用自动布局，您可能会发现 the following presentation I made 有助于学习基础知识。

以下是来自不同模拟器的三个屏幕截图，显示了布局如何根据屏幕尺寸自动调整：iPhone 5s、iPhone 6 和 iPhone 6 Plus：

从技术上讲，这些限制也支持横向，但结果可能符合您的要求，也可能不符合您的要求。 （我不确定您打算支持哪些方向。）

【讨论】：

我发现故事板比用代码写出来更令人困惑（某种类别使它们更容易阅读）。通过自己输入代码，我也获得了更多的理解。这只是我的观点，我知道有些人更喜欢故事板，并且发现它们更易于使用。如果用户想采用这种方法，这是一个很好的答案。

感谢您的好心 cmets Hodson。我同意这是个人喜好的问题，我们可以选择做任何一个都很棒。在以前版本的 Xcode 中，某些约束选项无法通过 Storyboard 获得，并且需要代码来实现它们，但在 Xcode 6 中，我觉得这些缺点中的许多已经得到解决。

AutoLayoutAndAlignmentExample 中的警告：- 在 8.0 之前的 ios 版本中，布局属性相对于布局边距 @DerekLee

@DerekLee 目前仅适用于纵向，但有什么技巧可以将此 UI 用于横向？

【参考方案2】：

我真的不想为您的整体视图编写代码，因为它不是您学习的最佳方式，而且我现在没有时间。相反，我会告诉你我通常采取的方法：

创建视图

UIView *myView = [UIView new];

设置 translatesAutoresizingMaskIntoConstraints 属性

myView.translatesAutoresizingMaskIntoConstraints = NO;

将视图添加为子视图

[self.view addSubview:myView];

添加约束

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:myView
                                                              attribute:NSLayoutAttributeTop
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:self.view
                                                              attribute:NSLayoutAttributeTop
                                                             multiplier:1.0
                                                               constant:0.0];

[self.view addConstraint:constraint];

您需要添加多个约束才能完全按照您的需要相对于它周围的其他视图来布局视图。上、左（前）、右（尾）和下。

我建议创建您自己的类别，以便在回读时更快、更容易理解编写约束。例如：PureLayout

您也可以使用视觉格式的约束，但我经常发现这可能更难理解。

更多关于整个主题的阅读可以here

【参考方案3】：

这取决于您的要求，并且可能有不同的实现方式。但是，如果您在这种特殊情况下询问已修复的三个项目，那么以下内容可能会有所帮助：

角落的按钮可以有边框约束。 所有标签都可以有约束，它们各自的按钮宽度相同，并且应该与按钮水平居中对齐。 中心按钮和边框按钮之间不应有任何依赖关系。 居中的按钮可以对容器视图的顶部和底部进行约束。 居中的按钮应具有与容器视图水平居中的约束。

您可能需要添加更多约束，但根据上述建议，它适用于任何屏幕尺寸。