Simple Constraints简单约束
The following recipes demonstrate using relatively simple sets of constraints to create common behaviors. Use these examples as the fundamental building blocks to create larger, more complex layouts.
下面的配方演示使用相对简单的约束集创建共同行为。使用这些示例作为创建更大更复杂布局的基本构建块。
To view the source code for these recipes, see the Auto Layout Cookbook project.
要查看这些配方的源代码，请参见自动布局食谱项目。
Simple Single View简单的单一视图
This recipe positions a single red view so that it fills its superview with a fixed margin around all four edges.
这个食谱的位置一个红色的视图，它与一个固定的边缘周围的一切四边填充它的父视图。
Views and Constraints视图的观点和约束
In Interface Builder, drag a view out onto your scene, and resize it so that it fills the scene. Use Interface Builder’s guidelines to select the correct position relative to the edge of the superview.
在界面生成器中，将视图拖到场景中，并将其调整大小以便填充场景。使用界面生成器的准则来选择相对于父视图的边缘位置正确。
NOTE
You do not need to worry about getting the view in the pixel perfect position. After you set the constraints, the system will calculate its correct size and position.
您不需要担心在像素完美位置得到视图。设置约束后，系统将计算其正确的大小和位置。
As soon as the view is in place, set the following constraints:.一旦视图到位，设置以下约束：。
-
Red View.Leading = Superview.LeadingMargin -
Red View.Trailing = Superview.TrailingMargin -
Red View.Top = Top Layout Guide.Bottom + 20.0 -
Bottom Layout Guide.Top = Red View.Bottom + 20.0
Attributes属性
To give the view a red background color, set the following attributes in the Attributes inspector:
若要使视图为红色背景颜色，请在属性检查器中设置下列属性：
Discussion讨论
The constraints in this recipe keep the red view a fixed distance from the edge of the superview. For the leading and trailing edges, pin your view to the superview’s margin. For the top and bottom, pin your view to the top and bottom layout guide instead.
本配方的约束使红色视野固定距离从父视图的边缘。的前缘和后缘，销你的视图的父视图的边缘。对于顶部和底部，引脚视图的顶部和底部布局指南，而不是。
NOTE
The system automatically sets the root view’s margins so that it has an appropriate leading and trailing margin (16- or 20-points, depending on the device), and a 0-point top and bottom margin. This lets you easily flow content under any control bars (status bar, navigation bar, tab bar, tool bar, etc.).
系统自动设置根视图的边缘，它有一个适当的前导和尾随的边缘（16或20分，这取决于设备），和一个0点顶部和底部边缘。这使您可以轻松地在任何控制栏（状态栏，导航栏，标签栏，工具栏等）的内容流。
However, this recipe needs to place the content below the bars (if any). You can simply pin the red view’s leading and trailing edges to the superview’s leading and trailing margins; however you must set your own top and bottom margin relative to the layout guides.
但是，这个配方需要把内容放在下面的栏（如果有的话）。你可以简单地销红色视野的前缘和后缘的视图的前导和尾随的边缘；但是你必须设定自己的顶部和底部边缘相对于布局指南。
By default, Interface Builder’s standard spacing is 20.0 points between a view and the edge of its superview, and 8.0 points between sibling views. This implies that you should use an 8.0-point space between the top of the red view and the bottom of the status bar. However, the status bar disappears when the iPhone is in a landscape orientation, and without the status bar, an 8.0-point space looks far too narrow.
默认情况下，界面生成器的标准间距是20点视图和它的父视图的边缘之间，与8点之间的兄弟视图。这意味着，你应该使用红色视图的顶部和底部的状态栏之间的8.0-point空间。然而，状态栏消失时，iPhone是一个横向，没有状态栏，一个8.0-point空间看起来太窄。
Always select the layout that works best for your app. This recipe uses a fixed 20-point margin for both the top and bottom. This keeps the constraint logic as simple as possible, and still looks reasonable in all orientations. Other layouts may work better with a fixed 8-point margin.
始终选择最适合你的应用程序的布局。这个配方使用一个固定的20点的顶部和底部的利润率。这使得约束逻辑尽可能简单，并且在所有方向上看起来仍然是合理的。其他的布局可以更好地与一个固定的点利润的工作。
If you want a layout that adapts automatically to the presence or absence of bars, see Adaptive Single View.
如果你想要一个布局自动适应的存在或不存在的酒吧，看到自适应单视图。
Adaptive Single View自适应单视图
This recipe positions a single, blue view so that it fills its superview with a margin around all four edges. However, unlike the margins in the Simple Single View recipe, the top margin on this recipe adapts based on the view’s context. If there’s a status bar, the view is placed the standard spacing (8.0 points) below the status bar. If there is no status bar, the view is placed 20.0 points below the edge of the superview.
这个食谱的位置一个蓝色的视图，它填补了它的父视图与周围四边的边缘。然而，与简单单视图配方中的边距不同，此配方的顶部边距根据视图的上下文进行调整。如果有一个状态栏，视图被放置在状态栏下面的标准间距（8点）。如果没有状态栏，视图放置20点视图下方的边缘。
You can see this when looking at the Simple and Adaptive views side by side.你可以看到这个简单和自适应视图并排看。
Views and Constraints视图的观点和约束
In Interface Builder, drag a view out onto your scene, and resize it so that it fills the scene, with its edges aligned to the guidelines. Then set the constraints as shown.
在界面生成器中，将一个视图拖到场景中，并将其调整大小，以便填充场景，其边缘与指南对齐。然后设置约束如图所示。
-
Blue View.Leading = Superview.LeadingMargin -
Blue View.Trailing = Superview.TrailingMargin -
Blue View.Top = Top Layout Guide.Bottom + Standard (Priority 750) -
Blue View.Top >= Superview.Top + 20.0 -
Bottom Layout Guide.Top = Blue View.Bottom + Standard (Priority 750) -
Superview.Bottom >= Blue View.Bottom + 20.0
Attributes属性
To give the view a blue background color, set the following attributes in the Attribute inspector:
若要使视图为蓝色背景颜色，请在属性检查器中设置以下属性：
Discussion讨论
This recipe creates adaptive margins for both the top and bottom of the blue view. If there’s a bar, the view’s edge is placed 8 points away from the bar. If there is no bar, the edge is positioned 20 points away from the edge of the superview.
这个配方为蓝色视图的顶部和底部创建了自适应的边距。如果有一个酒吧，视图的边缘被放置8点远离酒吧。如果没有酒吧的边缘位于20点远离父视图的边缘。
This recipe uses the layout guides to correctly position its contents. The system sets the position of these guides based on the presence and size of any bars. The top layout guide is positioned along the bottom edge of any top bars (for example, status bars and navigation bars). The bottom layout guide is positioned along the top edge of any bottom bars (for example, tab bars). If there isn’t a bar, the system positions the layout guide along the superview’s corresponding edge.
此配方使用布局指南正确定位其内容。该系统设置的基础上，任何酒吧的存在和大小，这些指南的立场。顶部布局指南定位沿底部边缘的任何顶部酒吧（例如，状态栏和导航栏）。底部布局指南定位沿顶部边缘的任何底部栏（例如，标签栏）。如果没有酒吧，系统视图的相应边缘位置布局指南。
The recipe uses a pair of constraints to build the adaptive behavior. The first constraint is a required, greater-than-or-equal constraint. This constraint guarantees that the blue view’s edge is always at least 20-points away from the superview’s edge. In effect, it defines a minimum, 20-point margin.
该配方使用一对约束来构建适应行为。第一个约束是必需的，大于或等于约束。这种约束保证蓝色视图的边缘总是至少20点远离父视图的边缘。实际上，它定义了一个最小的20点边缘。
Next, an optional constraint tries to position the view 8-points away from the corresponding layout guide. Because this constraint is optional, if the system cannot satisfy the constraint, it will still attempt to come as close as possible, and the constraint acts like a spring-like force, pulling the edge of the blue view towards its layout guide.
接下来，一个可选的约束试图定位看8远离相应的布局指南。因为这个约束是可选的，如果系统不能满足约束，它仍然会尽可能地接近，约束就像一个弹簧状的力，把蓝色视图的边缘朝向它的布局指南。
If the system is not displaying a bar, then the layout guide is equal to the superview’s edge. The blue view’s edge cannot be both 8 points and 20 points (or more) from the superview’s edge. Therefore, the system cannot satisfy the optional constraint. Still, it tries to get as close as it can—setting the margin to the 20-point minimum.
如果系统不显示栏，然后引导布局等于父视图的边缘。蓝色视野的边缘都是8点和20点（或更多）从父视图的边缘。因此，系统不能满足可选约束。尽管如此，它试图得到接近，因为它可以设置保证金的20点最低。
If a bar is present, then both constraints can be satisfied. All the bars are at least 20 points wide. So, if the system places the edge of the blue view 8 points away from the edge of the bar, it is guaranteed to be more than 20 points from the edge of the superview.
如果存在一个酒吧，那么两个约束可以满足。所有的酒吧至少20点宽。因此，如果系统地边缘的蓝色8点离开酒吧的边缘，它是保证是从视图的边缘超过20点。
This technique, using a pair of constraints that act as forces pushing in opposite directions, is commonly used to create adaptive layouts. You will see it again, when we look at the content-hugging and compression-resistance (CHCR) priorities in Views with Intrinsic Content Size.
这种技术，使用一对约束，作为相反方向的力推动，通常用于创建自适应布局。你会再次看到它，当我们看内容的拥抱与抗压（CHCR）与内在内容大小的观点优先。
Two Equal-Width Views两个等宽视图
This recipe lays out two views, side by side. The views always have the same width, regardless of how the superview’s bounds change. Together, they fill the superview, with a fixed margin on all sides, and a standard-spaced margin between them.
这个食谱分两种观点，并排。的意见总是有相同的宽度，不管如何改变视图的边界。在一起，他们填充视图，用一个固定的边缘四周，和一个标准的间隔之间的界限。
Views and Constraints视图的观点和约束
In Interface Builder, drag out two views and position them so they fill the scene, using the guidelines to set the correct spacing between the objects in the scene.
在界面生成器中，拖动两个视图并将它们定位，以便填充场景，使用指南设置场景中对象之间的正确间距。
Don’t worry about making the views the same width. Just get the rough, relative position, and let the constraints do the hard work.
不要担心使视图宽度相同。只要得到粗糙，相对的位置，让约束做艰苦的工作。
As soon as the views are in place, set the constraints as shown.
一旦视图到位，设置约束如图所示。
-
Yellow View.Leading = Superview.LeadingMargin -
Green View.Leading = Yellow View.Trailing + Standard -
Green View.Trailing = Superview.TrailingMargin -
Yellow View.Top = Top Layout Guide.Bottom + 20.0 -
Green View.Top = Top Layout Guide.Bottom + 20.0 -
Bottom Layout Guide.Top = Yellow View.Bottom + 20.0 -
Bottom Layout Guide.Top = Green View.Bottom + 20.0 -
Yellow View.Width = Green View.Width
Attributes属性
Set the views’ background colors in the Attributes inspector.
在属性检查器中设置视图的背景颜色。
Discussion讨论
This layout explicitly defines the top and bottom margins for both views. As long as these margins are the same, the views will implicitly be the same height. However, this is not the only possible solution to this layout. Instead of pinning the green view’s top and bottom to the superview, you could set them equal to the yellow view’s top and bottom. Aligning the top and bottom edges explicitly gives the views the same vertical layout.
此布局明确定义了两个视图的顶部和底部边距。只要这些边缘是相同的，视图将隐式相同的高度。然而，这不是唯一可能的解决方案，这种布局。而不是把绿色景观的顶部和底部的视图，你可以把它们等同于黄视图的顶部和底部。对齐顶部和底部边明确地给出了相同的垂直布局视图。
Even a relatively simple layout like this can be created using a number of different constraints. Some are clearly better than others, but many of them may be roughly equivalent. Each approach has its own set of advantages and disadvantages. This recipe’s approach has two main advantages. First (and most importantly), it is easy to understand. Second, the layout would remain mostly intact if you removed one of the views.
即使是一个相对简单的布局，可以创建使用一些不同的约束。有些显然比其他更好，但其中许多可能大致相等。每种方法都有自己的优点和缺点。这个食谱的方法有两个主要优点。首先（也是最重要的），很容易理解。第二，布局将保持不变，如果你删除了一个视图。
Removing a view from the view hierarchy also removes all the constraints for that view. This means, if you removed the yellow view, constraints 1, 2, 4, 6 and 8 would all be removed. However, that still leaves three constraints holding the green view in place. You simply need to add one more constraint to define the position of the green view’s leading edge, and the layout is fixed.
从视图层次结构中移除视图也将移除该视图的所有约束。这意味着，如果删除了黄色视图，约束1、2、4、6和8将被移除。然而，这仍然留下三个限制持有绿色景观。您只需要添加一个约束来定义绿色视图的前缘位置，并且布局是固定的。
The main disadvantage is the fact that you need to manually ensure that all the top constraints and bottom constraints are equal. Change the constant on one of them, and the views become obviously uneven. In practice, setting consistent constants is relatively easy when you use Interface Builder’s Pin tool to create your constraints. If you use drag and drop to create the constraints, it can become somewhat more difficult.
主要缺点是你需要手动确保所有的顶部约束和底部约束是相等的。改变其中一个常数，且视图变得不均匀。在实践中，当使用接口生成器的PIN工具创建约束时，设置一致的常数是比较容易的。如果使用拖放来创建约束，它会变得更困难。
When faced with multiple, equally valid sets of constraints, pick the set that is easiest to understand and easiest to maintain within the context of your layout. For example, if you’re center aligning a number of different sized views, it’s probably easiest to constrain the views’ Center X attribute. For other layouts, it may be easier to reason about the view’s edges, or their heights and widths.
当面对多个同样有效的约束集时，选择最容易理解和最容易维护的布局。例如，如果你是中心对齐一些不同大小的视图，它可能是最容易约束视图的中心x属性。对于其他布局，它可能会更容易解释视图的边缘，或它们的高度和宽度。
For more information on selecting the best set of constraints for your layout, see Creating Nonambiguous, Satisfiable Layouts.
在你的布局选择最佳的约束集的更多信息，请参见创建nonambiguous，满足布局。
Two Different-Width Views两种不同宽度视图
This recipe is very similar to the Two Equal-Width Views recipe, with one significant difference. In this recipe, the orange view is always twice as wide as the purple view.
此配方非常类似于两个等宽视图配方，具有显著差异。在这个食谱中，橙色视图总是紫色视图的两倍宽。
Views and Constraints视图的观点和约束
As before, drag out two views and position them so they are roughly in the correct place. Then, set the constraints as shown.
像以前一样，拖动两个视图并定位它们，这样它们大致处于正确的位置。然后，设置约束如图所示。
-
Purple View.Leading = Superview.LeadingMargin -
Orange View.Leading = Purple View.Trailing + Standard -
Orange View.Trailing = Superview.TrailingMargin -
Purple View.Top = Top Layout Guide.Bottom + 20.0 -
Orange View.Top = Top Layout Guide.Bottom + 20.0 -
Bottom Layout Guide.Top = Purple View.Bottom + 20.0 -
Bottom Layout Guide.Top = Orange View.Bottom + 20.0 -
Orange View.Width = 2.0 x Purple View.Width
Attributes属性
Set the views’ background colors in the Attributes inspector.
在属性检查器中设置视图的背景颜色。
Discussion讨论
This recipe uses a multiplier on the width constraint. Multipliers can only be used on constraints to a view’s height or width. It lets you set the relative size of two different views. Alternatively, you can set a constraint between the view’s own height and width, specifying the view’s aspect ratio.
此配方在宽度约束上使用乘法器。乘数只能用于约束的视图的高度或宽度。它可以让你设置两个不同视图的相对大小。或者，可以在视图自身的高度和宽度之间设置约束，指定视图的纵横比。
Interface Builder lets you specify the multiplier using a number of different formats. You can write the multiplier as a decimal number (2.0), a percentage (200%), a fraction (2/1), or a ratio (2:1).
接口生成器允许您使用多个不同格式指定乘法器。您可以将乘数写入十进制数（2）、百分比（200%）、一个分数（2 / 1）或比率（2:1）。
Two Views with Complex Widths复宽度的两个视图
This recipe is almost identical to the one in Two Different-Width Views; however, here you use a pair of constraints to define a more complex behavior for the view widths. In this recipe, the system tries to make the red view twice as wide as the blue view, but the blue view has a 150-point minimum width. So, on iPhone in portrait the views are almost the same width, and in landscape both views are larger, but the red view is now twice as wide as the blue.
此配方与两个不同宽度视图中的一个几乎相同，但是在这里，您使用一对约束为视图宽度定义一个更复杂的行为。在这个配方中，系统试图使红色视图的两倍宽的蓝色视图，但蓝色视图有一个150点的最小宽度。因此，在iPhone上的肖像几乎是相同的宽度，在景观两个视图是较大的，但红色的看法是现在的两倍宽的蓝色。
Views and Constraints视图的观点和约束
Position the views on the canvas, and then set the constraints as shown.
将视图定位在画布上，然后设置约束，如图所示。
-
Blue View.Leading = Superview.LeadingMargin -
Red View.Leading = Blue View.Trailing + Standard -
Red View.Trailing = Superview.TrailingMargin -
Blue View.Top = Top Layout Guide.Bottom + 20.0 -
Red View.Top = Top Layout Guide.Bottom + 20.0 -
Bottom Layout Guide.Top = Blue View.Bottom + 20.0 -
Bottom Layout Guide.Top = Red View.Bottom + 20.0 -
Red View.Width = 2.0 x Blue View.Width (Priority 750) -
Blue View.Width >= 150.0
Attributes属性
Set the views’ background colors in the Attributes inspector.
在属性检查器中设置视图的背景颜色。
Discussion讨论
This recipe uses a pair of constraints to control the views’ widths. The optional, proportional width constraint pulls the views so that the red view is twice as wide as the blue view. However, the required greater-than-or-equal constraint defines a constant minimum width for the blue view.
这个配方使用一对约束来控制视图的宽度。可选的，比例宽度约束拉的视图，使红色视图是蓝色视图的两倍宽。然而，所需的大于或等于约束定义了蓝色视图的一个恒定最小宽度。
In effect, if the distance between the superview’s leading and trailing margin is 458.0 points or greater (150.0 + 300.0 + 8.0), then the red view is twice as big as the blue view. If the distance between the margins is smaller, then the blue view is set to 150.0 points wide, and the red view fills the remaining space (with an 8.0-point margin between the views).
实际上，如果视图的前导和尾随边缘之间的距离是458分或更高（150 + 300 + 8），然后红色的观点是两倍蓝视为大。如果之间的空间距离较小，那么蓝色的视图设置为150点宽，和红色视野填补剩余空间（与视图之间的8.0-point保证金）。
You might recognize this as yet another variation on the pattern introduced in the Adaptive Single View recipe.
您可能会认识到这是另一个变化的模式中引入的自适应单视图配方。
You can extend this design by adding additional constraints—for example, by using three constraints. A required constraint to set the red view’s minimum width. A high-priority optional constraint to set the blue view’s minimum width, and a lower priority optional constraint to set the preferred size ratio between the views.
您可以通过添加附加约束来扩展此设计，例如，通过使用三个约束。设置红色视图的最小宽度所需的约束。一个高优先级的可选约束，设置蓝色视图的最小宽度，和一个较低优先级的可选约束，以设置视图之间的首选大小比例。