[TOC] 在 Interface Builder 中设置自动布局约束有三个主要选项：可以在视图之间控制拖动，可以使用 Pin 和 Align 工具，并且可以让 Interface Builder 为您设置约束，然后编辑或修改结果。 每种方法都有其自身的优点和缺点。 大多数开发人员发现他们比其他人更喜欢一种方法; 然而，熟悉所有三种方法可以根据手头的任务快速切换工具。 对于所有三个选项，首先将视图和控件从 Object 库拖到场景中。 调整大小并根据需要放置它们。 当在画布上放置视图时，Interface Builder 会自动创建一组原型约束，以定义视图相对于左上角的当前大小和位置。 该应用程序可以构建和运行原型约束。使用这些约束快速可视化和测试用户界面，然后用自己的显式约束替换隐式约束。永远不要发布带有原型约束的应用程序。 只要创建第一个约束，系统就会从约束引用的视图中删除所有原型约束。 如果没有原型设计约束，您的布局不再有足够的约束来唯一确定所有视图的大小和位置。 它变成了一个模糊的布局。 受影响的约束突然显示为红色，并且 Xcode 会生成许多警告。 不要惊慌。 只要继续添加约束，直到布局完成。 只要添加一个约束，您就有责任添加创建非歧义，可满足布局所需的所有约束。 有关修复布局警告和错误的更多信息，请参阅调 [Debugging Auto Layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/TypesofErrors.html#//apple_ref/doc/uid/TP40010853-CH22-SW1)。 ## 控制 - 拖动约束 要在两个视图之间创建约束，请按住 Control 键单击其中一个视图并将其拖动到另一个视图。  释放鼠标时，Interface Builder 将显示一个 HUD 菜单，其中包含可能的约束列表。  Interface Builder 根据正在约束的项目和拖动手势的方向，智能地选择一组约束。 如果水平拖动或多或少，可以选择设置视图之间的水平间距，以及垂直对齐视图的选项。 如果垂直拖动或多或少，可以选择设置垂直间距，以及水平对齐视图的选项。 这两种手势都可能包含其他选项（例如设置视图的相对大小）。 > 注意 > 可以在画布上的项目以及场景文档大纲中的图标上使用控制拖动手势。 当试图为难以找到的项目绘制约束时，这通常很有用，例如顶部或底部布局指南。 拖放到文档大纲或从文档大纲拖出时，Interface Builder 不会根据手势的方向过滤可能的约束列表。 Interface Builder 根据视图的当前帧创建约束。 因此，在绘制约束之前，需要仔细定位视图。 如果根据 Interface Builder 的指导原则排列视图，则最终应该有一组合理的约束条件。 如有必要，随后可以随时编辑约束。 控件拖动提供了一种设置约束的非常快速的方法; 然而，因为约束的值是从场景当前的布局中推断出来的，所以很容易以一个点结束。 如果希望更好地进行控制，请在创建约束后查看和编辑约束，或者使用“Pin”和“Align”工具。 有关控制拖动约束的更多信息，请参阅 Adding Layout Constraints by Control-Dragging in Auto Layout Help 。 ## 使用 Stack, Align, Pin 和 Resolve工具 界面生成器在编辑器窗口的右下角提供四个自动布局工具。 这些是 Stack，Align，Pin 和 Resolve Auto Layout Issues 工具。  在制定约束条件或想要一次制定多个约束条件时，如果要精细控制，请使用“Pin”和“Align”工具。 作为一个附加优势，当使用这些工具时，在创建约束之前不需要精确放置视图。 相反，可以大致设置视图的相对位置，添加约束，然后更新框架。 这可让 Auto Layout 为您计算正确的位置。 ### Stack 工具 堆栈工具允许快速创建堆栈视图。 在布局中选择一个或多个项目，然后单击堆栈工具。 Interface Builder 将所选项目嵌入到堆栈视图中，并根据其内容将堆栈调整为当前配件大小。 > 注意：系统从视图的初始相对位置推断堆栈的轴和对齐。 您可以使用属性检查器修改轴和对齐方式（并设置分布和间距）。 ### Align 工具 对齐工具可让您快速对齐布局中的项目。 选择要对齐的项目，然后单击对齐工具。 Interface Builder 提供了一个包含许多可能对齐的弹出视图。  选择对齐所选视图的选项，然后单击添加约束按钮。 Interface Builder创建确保这些对齐所需的约束。 默认情况下，约束没有任何偏移量（边或中心相互对齐），并且在添加约束时没有更新帧。 您可以在创建约束之前更改任何这些设置。 在使用对齐工具之前，通常选择两个或更多视图。 但是，容器中的水平或容器中的垂直可以添加到单个视图中。 可以使用弹出窗口来创建任意数量的约束，但每次创建多于一或两个是没有意义的。 有关更多信息，请参阅 Adding Auto Layout Constraints with the Pin and Align Tools in Auto Layout Help 。 ### Pin 工具 Pin 工具可让您快速定义相对于其邻居的视图位置，或快速定义其大小。 选择要固定其位置或大小的项目，然后单击“Pin”工具。 Interface Builder 提供了一个包含多个选项的弹窗视图。  弹出窗口的顶部可让您将选定项目的 Leading，Top，Trailing 或 Bottom 边缘固定到最近的邻居。 关联的数字表示画布中各项目之间的当前间距。 可以输入自定义间距，也可以单击显示三角形来设置它应该约束的视图或选择标准间距。 “Constrain to margins”复选框确定对父视图的约束是使用父视图的边距还是其边缘。  弹出窗口的下半部分可让您设置项目的宽度或高度。 宽度和高度约束默认为当前画布大小，但可以键入不同的值。 长宽比约束还使用该项目的当前宽高比; 但是，如果要更改此比例，则需要在创建后检查并编辑约束。 通常情况下，你选择一个单一的视图来钉住; 但是，可以选择两个或更多个视图，并给它们相同的宽度或相等的高度。 也可以一次创建多个约束，或者您可以在添加约束时更新这些框架。 设置完所需选项后，单击添加约束按钮以创建约束。 有关更多信息，请参阅 Adding Auto Layout Constraints with the Pin and Align Tools in Auto Layout Help 。 ### Resolve Auto Layout Issues 工具 解决自动布局问题工具提供了许多用于修复常见自动布局问题的选项。 菜单上半部分的选项仅影响当前选定的视图。 下半部分的选项影响场景中的所有视图。  您可以使用此工具根据当前约束更新视图的框架，也可以根据视图在画布中的当前位置更新约束。 您还可以添加缺少的约束，清除约束或将视图重置为由Interface Builder推荐的一组约束。 有关添加或重置约束的命令将在 Letting Interface Builder 创建约束中进行更详细的讨论。 ## 让 Interface Builder 创建约束 Interface Builder 可以为你创建一些或所有的约束条件。使用这种方法时，Interface Builder 尝试根据画布中视图的当前大小和位置来推断最佳约束。请务必仔细定位视图 - 小间距的差异可能会导致显着不同的布局。 要让 Interface Builder 创建所有约束，请单击` Resolve Auto Layout Issues tool > Reset to Suggested Constraints` 。 Interface Builder 为所选视图（或场景中的所有视图）创建所有必需的约束。 或者，您可以自己添加一些约束，然后单击 `Resolve Auto Layout Issues tool > Add Missing Constraints` 。该选项添加了具有非歧义布局所需的约束。再次，可以将约束添加到所选视图或场景中的所有视图。 这种方法可以让您快速构建一个不模糊的可满足的布局，但除非用户界面简单明了，否则最终的布局可能无法按照您的方式运行。始终测试用户界面并修改约束，直到获得预期结果。 ## 查找和编辑约束 添加约束后，您需要能够找到它，查看它并对其进行编辑。 有许多选项可用于访问约束。 每个选项都提供了一种组织和呈现约束的独特方法。 ### 查看画布中的约束 编辑器将所有影响当前所选视图的约束显示为画布上的彩色线条。 形状，笔画类型和线条颜色可以告诉您很多关于约束的当前状态。 * I 型线条（带T形端盖的线条）。I型线条显示空间的大小。 这个空间可以是两个物品之间的距离，或者物品的高度或宽度。 * 普通线条（没有端盖的直线）。 简单线条显示边缘对齐的位置。 例如，Interface Builder 在对齐两个或多个视图的前沿时使用简单的线条。 这些线条也可用于连接它们之间具有0点空间的物品。 * 实线。 实线代表所需的约束条件（优先级= 1000）。 * 虚线。 虚线表示可选约束（优先级<1000）。 * 红线。 受此约束影响的项目之一有错误。 该项目有不明确的布局，或其布局不令人满意。 有关更多信息，请参阅 issues navigator 或 Interface Builder 概要视图中的公开箭头。 * 橙色线。 橙色线条表示基于当前约束条件，受此约束影响的其中一个项目的框架不在正确的位置。 界面生成器还以虚线轮廓显示框架的计算位置。 您可以使用`Resolve Auto Layout Issues tool > Update Frames`命令将项目移动到其计算的位置。 * 蓝线。 受约束影响的项目具有非歧义的可满足的布局，并且项目的框架处于由自动布局引擎计算的正确位置。 * 等于徽章。 Interface Builder 显示约束条件，使两个项目的宽度相等或高度与每个项目单独的栏相同。 两个 bar 都标有一个蓝色徽章，里面包含一个相同的（=）符号。 * 大于等于和小于等于徽章。 Interface Builder 使用里面的一个大于等于或小于等于关系的小蓝色徽章来标记所有约束。  ### 列出 Document Outline 中的约束条件 Interface Builder 列出 Document Outline 中的所有约束，将它们分组在保存它们的视图下。 约束由包含约束中的两个项目的最近视图保存。 对于此计算，每个视图包含自身及其所有子视图，而顶部和底部布局指南包含在场景的根视图中。  尽管约束可能围绕大纲传递，但大多数约束最终会在场景的根视角下出现。 如果你想确保你找到了所有的约束条件，请展开整个视图层次结构。 约束条件使用伪代码列出。 这些列表通常很长，并且通常以相似的视图集合开始，所以可能必须增加大纲视图的宽度才能看到有意义的信息。 在大纲中选择约束会突出显示画布中的约束。 使用此功能可帮助您快速确定要检查的约束。 对于简单的场景，大纲是浏览所有场景约束的好地方。 但是，随着布局变得越来越复杂，很快就很难找到具体的限制条件。 通常情况下，通过选择画布中的视图或通过检查“Size inspector”中的视图，最好一次检查一个视图中的约束。 ### 在 Size Inspector 中查找约束 Size Inspector 列出影响当前所选视图的所有约束。 所需约束以实心轮廓显示，可选约束以虚线轮廓显示。 说明列出了有关约束的重要信息。 它始终包含受影响的属性和约束中的其他项目。 它也可能包括关系，常数值和乘数或比率。  上面截图顶部的图表显示了哪些属性受到约束的影响。 您可以通过选择一个或多个图的属性来过滤约束列表。 该列表然后仅显示影响所选属性的那些约束。 有关更多信息，请参阅 Viewing the Complete List of Layout Constraints for an Item in Auto Layout Help 。 ### 检查和编辑约束 当在画布或 Document Outline 中选择约束时，属性检查器将显示所有约束的属性。 这包括约束方程中的所有值：第一项，关系，第二项，常数和乘数。 属性检查器还显示约束的优先级及其标识符。  > 注意 > 约束的标识符属性允许您提供描述性名称，以便您可以更轻松地识别控制台日志和其他调试任务中的约束。 也可以将约束标记为占位符。 这些约束仅在设计时存在。 当应用程序运行时，它们不包含在布局中。 当计划在运行时动态添加约束时，通常会添加占位符约束。 通过临时添加创建非歧义，可满足布局所需的约束，可以清除 Interface Builder 中的任何警告或错误。 可以自由修改常量，优先级，乘数，关系，标识符和占位符属性。 然而，对于第一项和第二项，您的选择更加有限。 可以交换第一项和第二项（根据需要反转乘数和常数）。 也可以更改项目的属性，但不能更改项目本身。 如果需要将约束移至完全不同的项目，请删除约束并将其替换为新的约束。 Size inspector 也可以直接进行一些编辑。 单击任何约束中的编辑按钮会弹出一个弹出窗口，您可以在其中更改约束关系，常量，优先级或乘数。 要进行其他更改，请双击该约束以将其选中并在“Attribute”检查器中将其打开。  有关更多信息，请参阅 Editing Auto Layout Constraints in Auto Layout Help 。 ## 设置 Content-Hugging 和 Compression-Resistance 优先级 要设置视图的内容拥抱和压缩阻力优先级（CHCR优先级），请在画布或文档大纲中选择视图。 打开尺寸检查器，然后向下滚动，直到找到内容拥抱优先级和压缩阻力优先级设置。  还可以在 Interface Builder 中设置视图的固有大小。 默认情况下，Interface Builder 使用从视图的 `intrinsicContentSize` 方法返回的大小。 但是，如果在设计时需要不同的大小，则可以设置占位符固有内容大小。 此占位符仅在 Interface Builder 中影响视图的大小。 它在运行时对视图没有任何影响。 有关更多信息，请参阅 Setting the Placeholder Intrinsic Size for a Custom View in Auto Layout Help 。 ## iOS 特性 iOS 添加了一些与自动布局交互的独特功能。 其中包括顶部和底部布局指南，视图的布局边距，视图的可读内容指南以及视图的语义内容。 ### 顶部和底部布局指南 Top and Bottom Layout Guides 顶部和底部布局指南代表当前活动视图控制器的可见内容区域的上边缘和下边缘。 如果不希望自己的内容在透明或半透明的 UIKit 栏（例如状态栏，导航栏或选项卡栏）下展开，请使用自动布局将内容固定到相应的布局设计指南。 布局指南采用 [UILayoutSupport](https://developer.apple.com/documentation/uikit/uilayoutsupport) 协议，为指南提供了一个长度属性，用于衡量指南与视图各边之间的距离。 特别： * 对于顶部布局指南，长度指示视图控制器视图的顶部与覆盖视图的最底部条（如导航条）的底部之间的距离（以点为单位）。 * 对于底部布局指南，长度指示视图控制器视图底部与覆盖视图的栏顶部（例如选项卡栏）之间的距离（以点为单位）。 这些指南还可以充当约束中的项目，支持顶部，底部和高度属性。 通常，您将视图限制为顶部布局指南的底部属性或底部布局指南的顶部属性。 指南还提供了 topAnchor，bottomAnchor 和 heightAnchor 属性，以简化约束的程序化创建。 在根视图的顶部或底部边缘创建约束时，Interface Builder 自动提供顶部和底部布局指南作为选项。 如果布局指南是视图的最近邻居，则 Interface Builder 默认使用该指南。 当使用 Pin 工具时，可以根据需要在布局指南和根视图的边缘之间切换。 只需点击显示三角。 ### 布局边距 Layout Margins 自动布局为每个视图定义边距。 这些边距描述了视图边缘与其子视图之间的首选间距。 可以使用 [layoutMargins](https://developer.apple.com/documentation/uikit/uiview/1622651-layoutmarginsguide) 或 [layoutMarginsGuide](https://developer.apple.com/documentation/uikit/uiview/1622566-layoutmargins) 属性访问视图的边距。 layoutMargins 属性允许您将边距设置为 UIEdgeInsets 结构。 layoutMarginsGuide 属性为 UILayoutGuide 对象提供对边距的只读访问权限。 此外，使用 [preservesSuperviewLayoutMargins](https://developer.apple.com/documentation/uikit/uiview/1622653-preservessuperviewlayoutmargins) 属性来确定视图的边距如何与其父视图边距交互。 默认边距是每边8个点。 可以根据您的应用需求修改这些边距。 > 注意 > 系统设置和管理视图控制器根视图的边距。 顶部和底部边距设置为零点，方便很容易地扩展工具条内的内容（如果有的话）。 侧边距取决于控制器的显示方式和位置，可以是16点或20点。 无法更改这些边距。 约束视图到其父视图时，通常使用布局边距而不是视图的边缘。 在 UIKit 中， [NSLayoutAttribute](https://developer.apple.com/documentation/uikit/nslayoutattribute) 枚举定义了一些属性来表示顶部，底部，前导，尾部，左侧和右侧边距。 它还包括 centerX 和 centerY 相对于边距的属性。 在界面构建器中，控件拖动视图和其父视图之间的约束，默认情况下使用边距属性。 当使用 Pin 工具时，可以切换“Constrain to margins”复选框。 如果选中，则所得到的约束使用父视图的边距属性。 如果未选中，则使用父视图的边缘。 同样，在属性检查器中编辑约束时，第一项和第二项的下拉菜单中包含“相对于边距”选项。 选择此项目以使用边距属性。 取消选择它以使用边缘。 最后，当以编程方式为超视图边距创建约束时，请使用 layoutMarginsGuide 属性并直接使用布局指南创建约束。 这使可以使用指南的布局定位点来创建约束条件，从而提供易于阅读的简化 API 。 ### 可读的内容指南 Readable Content Guides 视图的 [readableContentGuide](https://developer.apple.com/documentation/uikit/uiview/1622644-readablecontentguide) 属性包含一个布局指南，该指南定义视图内文本对象的最大最佳宽度。 理想情况下，内容足够窄，用户无需移动头部即可阅读。 本指南始终集中在视图的布局边界内，并且永远不会超出这些边界。 指南的大小也取决于系统动态类型的大小。 当用户选择较大的字体时，系统会创建更宽的指南，因为用户通常在阅读时将设备远离它们。 在 Interface Builder 中，可以设置视图的边距是否代替布局边距指南和可读内容指南。 选择视图（通常是视图控制器的根视图），然后打开“Size inspector"。 如果勾选 **Follow Readable Width** 复选框，则绘制到视图边缘的任何约束都将使用可读的内容指南。 > 注意 > 对于大多数设备来说，可读内容指南和布局边距之间几乎没有区别。 只有在进行 iPad 横向操作时，区别才会变得明显。 ### 语义内容 Semantic Content 如果使用前后约束布置视图，则在从左到右语言（如英语）和从右向左语言（如阿拉伯语）之间切换时，视图会自动翻转位置。 但是，一些界面元素不应该根据阅读方向改变其位置。 例如，基于物理方向（上，下，左，右）的按钮应始终保持相同的相对方向。 视图的 [semanticContentAttribute](https://developer.apple.com/documentation/uikit/uiview/1622461-semanticcontentattribute) 属性确定在从左到右和从右到左语言之间切换时视图的内容是否应该翻转。 在界面生成器中，在属性检查器中设置语义选项。 如果值为未指定，则视图的内容随着阅读方向翻转。 如果将其设置为 `Spatial, Playback, or Force Left-to-Right`，则内容始终按照左边的前边缘和右边的后边缘布置。`Force Right-to-Left` 总是将前导边缘置于右侧，后缘置于左侧。 ## 经验法则 下面的指导方针将帮助您成功地实现自动布局。毫无疑问，每个规则都有一些合法的例外。然而，如果你决定转向自动布局，在继续之前停下来仔细考虑一下你的方式。 * 不要使用框架、边界或中心属性指定视图的几何形状。 * 切勿使用其框架，边界或中心属性来指定视图的几何。尽可能使用堆栈视图，堆栈视图管理其内容的布局，极大地简化了其余布局所需的约束逻辑。 只有在堆栈视图不提供您需要的行为时才会使用自定义约束。 * 在视图和其最近的邻居之间创建约束。如果有两个相邻的按钮，则将第二个按钮的前沿限制在第一个按钮的后沿。 第二个按钮通常不应该具有通过第一个按钮到达视图边缘的约束。 * 避免给视图固定的高度或宽度。自动布局的要点是动态响应变化。 设置固定大小会消除视图的适应能力。 但是，您可能需要为视图设置最小或最大尺寸。 * 如果您在设置约束时遇到问题，请尝试使用“Pin”和“Align”工具。 虽然这些工具可能比 Control 拖动稍慢，但它们确实可以让您在创建约束之前验证确切的值和项目。 这额外的健全检查可以是有益的，特别是当你第一次出发。 * 自动更新项目的框架时要小心。 如果该项目没有足够的约束来完全指定其大小和位置，则更新的行为是未定义的。 视图通常会消失，因为它们的高度或宽度被设置为零，或者因为它们意外地位于屏幕外。可以随时尝试更新项目的框架，并在必要时撤消更改。 * 确保布局中的所有视图都有有意义的名称。 这使得使用这些工具时识别您的视图变得更加容易。系统根据文字或标题自动命名标签和按钮。 对于其他视图，可能需要在“标识”检查器中设置特定于 Xcode 的标签（或通过双击并编辑文档大纲中的视图名称）。 * 始终使用头和尾约束，而不是右和左。始终可以使用其 [semanticContentAttribute](https://developer.apple.com/documentation/uikit/uiview/1622461-semanticcontentattribute) 属性（iOS）或其 [userInterfaceLayoutDirection](https://developer.apple.com/documentation/appkit/nsview/1483254-userinterfacelayoutdirection) 属性（OS X）来调整视图如何解释其前缘和后缘。 * 在iOS中，将项目限制在视图控制器根视图的边缘时，请使用以下约束条件： * Horizontal constraints：对于大多数控件，对布局边距使用零点约束。 系统根据设备的位置以及应用程序如何显示视图控制器自动提供正确的间距。对于从边距到边距填充根视图的文本对象，请使用可读的内容指南而不是布局边距。对于需要从边到边填充根视图的项目（例如，背景图像），请使用视图的前缘和后缘。 * Vertical constraints：如果视图在 bar 下方延伸，请使用顶部和底部边距。 对于滚动视图来说这尤其常见，允许内容在 bar 下滚动。 但请注意，可能需要修改滚动视图的 [contentInset](https://developer.apple.com/documentation/uikit/uiscrollview/1619406-contentinset) 和 [scrollIndicatorInsets](https://developer.apple.com/documentation/uikit/uiscrollview/1619427-scrollindicatorinsets) 属性以正确设置内容的初始位置。如果视图没有在小节下面延伸，请将视图限制为顶部和底部布局指南。 * 以编程方式实例化视图时，请务必将其 [translatesAutoresizingMaskIntoConstraints](https://developer.apple.com/documentation/uikit/uiview/1622572-translatesautoresizingmaskintoco) 属性设置为 NO 。 默认情况下，系统根据视图的frame 和 autoresizing mask 自动创建一组约束。 当添加自己的约束时，它们不可避免地与自动生成的约束发生冲突。 这创建了一个令人无法容忍的布局。 * 请注意，OS X 和 iOS 以不同的方式计算其布局。 * 在OS X中，自动布局可以修改窗口内容和窗口大小。 * 在iOS中，系统提供场景的大小和布局。 自动布局只能修改场景的内容。 这些差异看起来相对较小，但它们可能会对设计布局的方式产生深远影响，尤其是对于如何使用优先级。 >原文地址 >[Working with Constraints in Interface Builder ](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html#//apple_ref/doc/uid/TP40010853-CH10-SW1)