[TOC]
以下配方演示使用相对简单的约束集来创建常见行为。 将这些示例用作基本构建块来创建更大，更复杂的布局。
要查看这些配方的源代码，请参阅 [Auto Layout Cookbook](https://developer.apple.com/sample-code/xcode/downloads/Auto-Layout-Cookbook.zip) 项目。
## 简单的单一视图
这个配方定位一个红色的视图，以便它在所有四个边缘上以固定的边缘填充其父视图。
### 视图和约束
在 Interface Builder 中，将视图拖到场景中，然后调整其大小以填充场景。 使用 Interface Builder 的指导方针来选择相对于超级视图边缘的正确位置。
> 注意
> 不必关注获得视图在像素单位精确位置。 设置约束后，系统将计算其正确的大小和位置。
只要视图就位，请设置以下约束：
1. Red View.Leading = Superview.LeadingMargin
2. Red View.Trailing = Superview.TrailingMargin
3. Red View.Top = Top Layout Guide.Bottom + 20.0
4. Bottom Layout Guide.Top = Red View.Bottom + 20.0
### 属性
要使视图呈现红色背景色，请在“属性”检查器中设置以下属性：
| View | Attribute | Value |
| --- | --- | --- |
| Red View | Background | Red |
### 讨论
这个配方中的限制使红色视图与超级视图的边缘保持固定的距离。 对于前沿和后沿，将视图固定在超级视角边缘。 对于顶部和底部，请将您的视图固定到顶部布局指南和底部布局指南。
> 注意
> 系统自动设置根视图的边距，使其具有适当的前后边距（16或20点，取决于设备）和0点顶部和底部边距。 这使您可以轻松地在任何控制栏（状态栏，导航栏，选项卡栏，工具栏等）下滚动内容。
> 但是，这个配方需要将内容放置在工具条下方（如果有的话）。 可以简单地将红色视图的前端和后端固定到超视图的前端和后端边距; 但是必须相对于布局指南设置自己的顶部和底部边距。
默认情况下，Interface Builder 的标准间距在视图和其超级视图的边缘之间为 20.0 点，在同级视图之间为 8.0 点。 这意味着你应该在红色视图的顶部和状态栏的底部之间使用 8.0 点的空间。 但是，当 iPhone 处于横向状态时，状态栏消失，并且没有状态栏，8.0 点的空间看起来太窄。
始终选择最适合应用的布局。 这个配方为顶部和底部使用固定的 20 点边距。 这使约束逻辑尽可能简单，并且在所有方向上仍然看起来合理。 其他布局在固定的 8 点余量下可能会更好。
如果想要自动适应工具栏的存在或不存在的布局，请参阅下一节内容：自适应单一视图。
## 自适应单一视图
这个配方固定一个单一的蓝色视图，以便它可以在所有四个边缘周围填充其超级视图。 但是，与简单单视图配方中的边距不同，此配方的顶部边距基于视图的上下文进行调整。 如果有状态栏，视图将放置在状态栏下方的标准间距（8.0点）。 如果没有状态栏，则视图放置在超视图边缘下方 20.0 个点。
******
可以在并排查看简单视图和自适应视图时看到这一点。
### 视图和约束
在界面构建器中，将视图拖放到场景中，然后调整其大小以使其填充场景，并使其边缘与指南对齐。 然后如图所示设置约束。
1. Blue View.Leading = Superview.LeadingMargin
2. Blue View.Trailing = Superview.TrailingMargin
3. Blue View.Top = Top Layout Guide.Bottom + Standard (Priority 750)
4. Blue View.Top >= Superview.Top + 20.0
5. Bottom Layout Guide.Top = Blue View.Bottom + Standard (Priority 750)
6. Superview.Bottom >= Blue View.Bottom + 20.0
### 属性
要使视图呈现蓝色背景色，请在“属性”检查器中设置以下属性：
| View | Attribute | Value |
| --- | --- | --- |
| Blue View | Background | Blue |
### 讨论
此配方为蓝色视图的顶部和底部创建自适应边距。 如果有一个 bar ，视图的边缘放置在离 bar 8点的位置。 如果没有 bar，边缘定位在距离父视图边缘20点的位置。
此配方使用布局指南正确放置其内容。 系统根据任何 bar 的存在和大小设置这些指南的位置。 顶部布局指南位于任何顶部条的底部边缘（例如，状态栏和导航栏）。 底部布局指南沿任何底部条的顶部边缘定位（例如，选项卡条）。 如果没有 bar ，系统将布局指南沿着父视图的相应边缘定位。
配方使用一对约束来建立自适应行为。 第一个约束是必需的，大于或等于约束。 这个约束保证了蓝色视图的边缘总是距离超级视图的边缘至少 20 点。 实际上，它定义了最低 20 点的保险值。
接下来，可选约束会尝试将视图与相应的布局指南相距 8 个点。 因为这个约束是可选的，所以如果系统不能满足约束条件，它仍然会尝试尽可能接近，约束就像一个弹簧般的力量，将蓝色视图的边缘拉向它的布局指南。
如果系统没有显示 bar ，那么布局指南就等于父视图的边缘。 蓝色视图的边缘不能同时超出视角边缘 8 点和 2 0点（或更多）。 因此，系统不能满足可选约束。 尽管如此，它试图尽可能地接近它 - 将边距设置为最低 20 点。
如果存在 bar ，则可以满足这两个约束条件。 所有 bar 至少20点高。 因此，如果系统将蓝色视图的边缘放置在距离条边缘 8 个点的位置，则保证距离父视图的边缘超过 20 个点。
这种技术通常用于创建自适应布局，使用一对作用相反方向的力的约束。 将再次看到它，当我们查看具有固有内容大小的视图中的内容拥抱和抗压缩（CHCR）优先级时 [Views with Intrinsic Content Size](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ViewswithIntrinsicContentSize.html#//apple_ref/doc/uid/TP40010853-CH13-SW1)。
## 两个等宽视图
这个配方并排列出了两个视图。 无论父视图的界限如何变化，两个视图总是具有相同的宽度。 他们一起填补了父视图，四面都有一个固定的边界，并且在它们之间有一个标准间距。
### 视图和约束
在 Interface Builder 中，拖出两个视图并放置它们以使它们填满场景，使用布局指南设置场景中对象之间的正确间距。
不要关注使视图具有相同的宽度。 只要得到粗糙的相对位置，并让这些约束完成艰苦的工作。
只要视图就位，请按照图示设置约束。
1. Yellow View.Leading = Superview.LeadingMargin
2. Green View.Leading = Yellow View.Trailing + Standard
3. Green View.Trailing = Superview.TrailingMargin
4. Yellow View.Top = Top Layout Guide.Bottom + 20.0
5. Green View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Yellow View.Bottom + 20.0
7. Bottom Layout Guide.Top = Green View.Bottom + 20.0
8. Yellow View.Width = Green View.Width
### 属性
在属性检查器中设置视图的背景颜色。
| View | Attribute | Value |
| --- | --- | --- |
| Yellow View | Background | Yellow |
| Green View | Background | Green |
### 讨论
此布局明确定义两个视图的顶部和底部边距。 只要这些边距是相同的，这些视图将隐含地是相同的高度。 但是，这不是这种布局的唯一可能的解决方案。 不要将绿色视图的顶部和底部固定到超级视图，而是可以将它们设置为等于黄色视图的顶部和底部。 明确对齐顶部和底部边缘会使视图具有相同的垂直布局。
即使是这样一个相对简单的布局，也可以使用许多不同的约束条件来创建。 有些显然比其他的好，但其中许多可能大致相当。 每种方法都有其自身的优点和缺点。 这个配方的方法有两个主要优点。 首先（也是最重要的），它很容易理解。 其次，如果您删除了其中一个视图，布局将基本保持不变。
从视图层次结构中删除视图也会删除该视图的所有约束。 这意味着，如果删除了黄色视图，那么约束1，2，4，6和8将全部被删除。 但是，这仍然留下了三个约束来保持绿色视图。 只需添加一个约束即可定义绿色视图前端的位置，并且布局是固定的。
主要缺点是需要手动确保所有顶部约束和底部约束相等。 改变其中之一的常数，并且视图变得明显不均匀。 在实践中，当使用 Interface Builder 的 Pin 工具创建约束时，设置一致的常量相对容易。 如果使用拖放操作来创建约束条件，则会变得更加困难。
当面对多个同样有效的约束集合时，请选择最容易理解和最容易在布局上下文中维护的集合。 例如，如果您将多个不同大小的视图对齐，则可能最容易限制视图的Center X属性。 对于其他布局，关于视图的边缘或高度和宽度可能更容易推理。
有关为布局选择最佳约束集的更多信息，请参阅[ Creating Nonambiguous, Satisfiable Layouts](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW16) 。
## 两个不同宽度视图
这个配方非常类似于两个等宽视图配方，有一个显着的不同。 在这个配方中，橙色视图宽度总是是紫色视图的两倍。
### 视图和约束
像以前一样，拖出两个视图并放置它们，使它们大致位于正确的位置。 然后，如图所示设置约束。
1. Purple View.Leading = Superview.LeadingMargin
2. Orange View.Leading = Purple View.Trailing + Standard
3. Orange View.Trailing = Superview.TrailingMargin
4. Purple View.Top = Top Layout Guide.Bottom + 20.0
5. Orange View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Purple View.Bottom + 20.0
7. Bottom Layout Guide.Top = Orange View.Bottom + 20.0
8. Orange View.Width = 2.0 x Purple View.Width
### 属性
在属性检查器中设置视图的背景颜色。
| View | Attribute | Value |
| --- | --- | --- |
| Purple View | Background | Purple |
| Orange View | Background | Orange |
### 讨论
此配方在宽度约束上使用乘数。 乘数只能用于约束视图的高度或宽度。 它可以让你设置两个不同视图的相对大小。 或者，您可以在视图自身的高度和宽度之间设置约束，以指定视图的高宽比。
Interface Builder可让您使用多种不同格式指定乘数。 您可以将乘数写为十进制数（2.0），百分比（200％），分数（2/1）或比率（2：1）。
## 两个具有复杂宽度的视图
这个配方几乎与两个不同宽度的视图相同; 但是，在这里您使用一对约束来为视图宽度定义更复杂的行为。 在这个配方中，系统尝试使红色视图的宽度与蓝色视图的宽度相同，但蓝色视图的最小宽度为150点。 因此，在纵向 iPhone 上，视图几乎是相同的宽度，而在横向上，这两个视图都较大，但红色视图现在是蓝色的两倍。
### 视图和约束
将视图放置在画布上，然后按照图示设置约束。
1. Blue View.Leading = Superview.LeadingMargin
2. Red View.Leading = Blue View.Trailing + Standard
3. Red View.Trailing = Superview.TrailingMargin
4. Blue View.Top = Top Layout Guide.Bottom + 20.0
5. Red View.Top = Top Layout Guide.Bottom + 20.0
6. Bottom Layout Guide.Top = Blue View.Bottom + 20.0
7. Bottom Layout Guide.Top = Red View.Bottom + 20.0
8. Red View.Width = 2.0 x Blue View.Width (Priority 750)
9. Blue View.Width >= 150.0
### 属性
在属性检查器中设置视图的背景颜色。
| View | Attribute | Value |
| --- | --- | --- |
| Blue View | Background | Blue |
| Red View | Background | Red |
### 讨论
这个配方使用一对约束来控制视图的宽度。 可选的比例宽度约束可以拉动视图，使得红色视图的宽度是蓝色视图的两倍。 但是，所需的大于或等于约束为蓝色视图定义了恒定的最小宽度。
实际上，如果父视图的前后边距之间的距离为 458.0 或更大（150.0 + 300.0 + 8.0），则红色视图是蓝色视图的两倍。 如果边距之间的距离较小，则蓝色视图设置为150.0宽点，红色视图填充剩余空间（视图之间具有8.0点边距）。
您可能会认识到这是 “自适应单一视图 ”配方中引入的模式的另一种变体。
您可以通过添加其他约束来扩展此设计，例如，使用三个约束。 设置红色视图的最小宽度所需的约束条件。 用于设置蓝色视图最小宽度的高优先级可选约束和用于设置视图之间首选大小比率的较低优先级可选约束。
>原文地址
>[Simple Constraints ](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSimpleConstraints.html#//apple_ref/doc/uid/TP40010853-CH12-SW1)
