自动布局教程中的iOS 9第2部分：约束

更新15年9月22日：本教程更新到iOS 9时，Xcode 7，和斯威夫特2由布拉德·约翰逊。原帖由教程团队成员Matthijs Hollemans。

在此自动布局教程的第1部分，你看到了旧的“弹簧和-支柱”模式，使得用户界面无法轻易解决所有的布局问题。自动布局是解决方案，但由于这种技术是如此强大，它也比较麻烦一些，使用。

在第二部分，并自动布局教程系列的最后一部分，你会继续学习所有关于约束和如何应用它们！

小运行游

该自动布局教程首先一个非常简单的应用程序，如下所示：

它有两个按钮，有其背景色设置只是所以它更容易看到自己的边界。按钮有一些他们之间的约束。如果您一直跟随着的前面部分，你可以继续使用现有的应用程序。只需从画布上删除其他两个按钮。

如果你是从头开始，创建一个使用新雨燕的iPhone应用程序单一视图的应用模板，并禁止大小类通过故事板的文件检查器：

拖动两个按钮到场景中，给他们的黄色和绿色的背景颜色。把绿色按钮下方的黄色按钮。选择绿色按钮，使用针菜单进行制约其最接近底部的邻居（40分），然后选择下面的按钮，做同样的（8分）。使用  对齐菜单水平居中的黄色按钮在容器中，并再次对准两个按钮的左边缘。

这个在Interface Builder玩的就是一切都很好，但让我们来看看它是如何工作的运行。添加下面的方法来ViewController.swift：

@IBAction FUNCbuttonTapped（发件人：UIButton的   ）{ 
  如果sender.titleForState（。正常）==“X”{sender.setTitle（“ 一个很长的标题为这个按钮”，forState：。正常）} 其他{sender.setTitle（“X”，forState：。正常）}}   
    
  

这是一个长的标题和简短标题触发事件的按钮之间进行切换。连接这个动作方法无论是在界面生成器的按钮。按住Ctrl键的每个按钮的视图控制器，并选择buttonTapped：在弹出。

运行该应用程序，然后点击按钮来看看它是如何的表现。执行测试在纵向和横向。

无论哪个按钮具有长标题，并具有短标题，布局总是满足你给它的约束：

• 下面的按钮始终是中心对齐窗口，水平。
• 下面的按钮始终位于20点从窗口的底部。
• 顶部按钮总是左对齐与下按钮，40点在它上面。

这是整个规范用户界面。

为了好玩，删除前面对齐约束（在大纲窗格中选中它，然后按删除在键盘上），然后选择在界面生成器，然后从菜单中对齐两个按钮选择后缘选项。现在，再次运行应用程序并注意区别。

重复，但现在选择对齐\水平居中。这将总是居中相对于该底部按键顶部的按钮。运行应用程序，看看按钮是如何当你点击它们采取行动。（记住，如果你当你改变的约束得到虚线橙色框，您可以使用解决自动布局问题菜单更新相应的按钮帧。）

固定宽度

PIN菜单具有宽度同样的选择。如果您在两个视图设置此约束，则自动布局总会让这两种观点同样广泛的基础上，哪一个是最大的。让我们与玩一分钟。

选择这两个按钮，并选择引脚\宽度相等。这增加了一个新的约束，两个按钮：

你已经看到这种类型的约束之前，在本教程的第一部分。它看起来像通常的T形杆，但在中间有一个圆等号。

即使有两个T-酒吧，在文档大纲这显示为一个单一的宽度相等的约束：

 

运行该应用程序，然后点击按钮。该按钮会始终具有相同的宽度，不管是哪一个具有最大标签：

当然，当这两个标签是很短的，两个按钮将收缩平分。毕竟，除非是防止它的约束，按钮将自身的大小恰好适合他们的内容，不能多不能少。什么是叫了吗？是的，内在的内容大小。

内在的内容大小

自动布局之前，你总要告诉按钮和其他控制，他们应该多大，通过设置自己的框架或边界属性或调整其在Interface Builder。但事实证明，大部分的控制是完全能够确定他们需要多少空间，根据其内容。

标签知道它是多么的宽度和高度，因为它知道已在其上设置文本的长度，以及该文本的字体大小。同样，对于一个按钮，它可能与一个背景图像和一些填充结合的文本。

的也是如此分段控制，进度条，和大多数其他的控制，虽然有些人可能仅具有预定的高度，但未知的宽度。

这就是所谓的固有内容大小，并且它是在自动布局的一个重要概念。你已经看到它与按钮的动作。自动布局问你的控制，他们有多大需并提出了基于这些信息在屏幕上。

通常你想使用的内在内容的大小，但也有一些情况下，你可能不希望这样做。您可以通过在控制设置一个明确的宽度或高度约束防止这种情况。

想象一下，当你在一个设定的图像会发生什么的UIImageView如果图像比屏幕大很多。通常你想给图像视图一个固定的宽度和高度，缩放内容，除非你想在视图调整到图像的尺寸。

因此，当一个按钮上有一个固定的宽度约束会发生什么？按钮计算自己的大小，但你可以给他们一个固定的宽度覆盖。选择顶部的按钮，然后选择针\宽度从菜单中。这增加了一个坚实的T形栏上的按钮如下：

因为这种约束只适用于按钮本身，而不是它的父，它被列在按钮目标下面的文档大纲。在这种情况下，你有固定的按钮，46点宽：

 

你不能简单的将按钮的大小调整处理，使按键更广泛。如果你这样做，你最终会得到一大堆的橙盒。请记住，Xcode的7不会自动更新的约束条件，你（不像的Xcode 4）。所以，如果你进行了更改按钮的边框，这是由你来进行约束再次匹配。另一种方法是简单地改变约束代替。

选择宽度约束并转到属性检查器。更改恒以80：

运行该应用程序，然后点击按钮。怎么了？按钮上的文字会改变，但它被截断，因为没有足够的空间：

因为顶部按钮有一个固定宽度约束和两个按钮都需要具有相同的尺寸，它们将不会收缩或增长。

注意：您可能不会在设计一个按钮设置一个宽度约束-最好是让按钮使用其固有大小-但是如果你曾经遇到，你希望你的控制来改变大小的布局问题，他们不' T，然后仔细检查，以确定一个固定的宽度约束没有偷偷在那里。

玩这个东西了一下得到寄托和调整意见的窍门。感受一下，因为不是一切是显而易见的。只要记住，必须始终有足够的约束，使自动布局可以确定位置和大小对所有的意见。

库示例

你现在应该有什么样的限制是一个想法，如何通过锻造不同意见之间的关系，建立你的布局。在下面的章节中，您将看到如何使用自动布局和约束，以创建符合真实世界的场景布局。

让我们假设你想使一个应用程序，有你最喜欢的程序员画廊。它看起来像这样在纵向和横向：

屏幕被分成四个相同的宿舍。每一季都有一个图像视图和标签。你会如何​​处理这？

让我们开始建立基本的应用程序。创建使用一个新雨燕的iPhone项目单一视图的应用模板，并将其命名为“画廊”。

打开Main.storyboard。禁用尺寸类，因为本教程的目的是更好地看到一个iPhone形布置在故事板编辑器。选择视图控制器，并在属性检查器中，选择一个尺寸的iPhone 3.5英寸。从对象库，将一个普通的视图对象到画布上。调整视图，以便它是160 284点，并改变其背景颜色的东西比白人（例如绿色）其他：

主要有两个原因，为什么你会下降一个普通的UIView到故事板：a）你打算使用它作为一个容器等的意见，这有助于组织你的场景的内容; 或b）这是一个占位符自定义视图或控制，你也将设置其属性类到自己的名字的UIView或者UIControl子类。

 

选择绿色的视图，并打开针菜单。该弹出窗口，使您可以添加各种限制，而你也将看到一个标有复选框约束边距：

 

请记住，当你拖动一个视图接近它的父的边缘出现蓝色的引导？而不是从创建视图的最边缘的距离的约束，你可以创建0距离视图的约束保证金。视图可以定义自己的边距大小所以这让你更加灵活的关于您的布局。对于本教程的目的，我们将坚持以使得制约视图的边缘。继续前进，取消勾选框，创建4个约束所有四个绿色视图的最近邻居在每个方向的：

这将创建绿色视图和它的父，一个用于视图的每一侧之间的四个新的限制。实际间距值可能是你不一样，这取决于你在哪里放置的观点-你没有更改的值，以匹配那些上面的正好。点击添加4约束到结束。

你的故事板现在应该是这个样子：

也许你想知道为什么在视图顶部的约束不走一路到屏幕的顶部：

相反，它停在状态栏。但由于iOS的7状态栏总是画在视图控制器的顶部-它不再是一个独立的酒吧-那么怎么办？当你创建约束它实际上并没有连接到屏幕顶端，而是一种无形的线称为顶级布局指南。

定期视图控制器本指南坐在20点从屏幕的顶部，至少当在状态栏不隐藏。在导航控制器，它位于导航栏下方。因为导航栏具有不同的高度在景观，顶布局指南与杆移动时，该设备被旋转。这使得它便于放置相对导航条意见。另外还有一个用于标签栏和工具栏底部布局指南。

此视图需要四个约束，以保持它在适当位置。不像按钮或标签，一个普通的UIView不具有的特性的内容的大小。必须始终有足够的约束，以确定每个角度的位置和大小，所以这一观点也需要约束来告诉它需要什么大小要。

你可能想知道，哪里是这些尺寸的限制？在这种情况下，视图的大小是由上海华的大小暗示。在此布局的制约因素有两个水平空间和垂直空间，这些都具有固定的长度。你可以看到在文档大纲：

绿色视图的宽度由它的高度由式“上海华减去（13 + 163）的高度”公式“上海华减去（80 + 80）的宽度”计算。空间的限制是固定的，因此认为别无选择，只能重新调整。（同样，你的价值可能会有所不同取决于你把观点。）

当你旋转的应用程序时，上海华变化的尺寸，所以它的配方变化。

 

你可能不总是希望你的UIView来调整时，该设备的旋转，所以你可以使用约束给视图一个固定的宽度和/或高度。现在，让我们做到这一点。选择绿色视图，然后单击针按钮; 在弹出放复选标记的前面宽度和高度。

点击添加2约束到结束。现在，您已经添加了两个新的约束的观点，一个160点的宽度约束和284点的高度约束：

因为宽度和高度适用于眼前这个观点，它们位于在查看自己的文档大纲。通常情况下，限制表达两种不同意见之间的关系 - 例如，在水平和垂直空间的限制是绿色的视图和它的父之间 - 但你可以考虑在宽度和高度的限制是绿色的观点和自己的关系。

运行该应用程序。是啊，看起来肖像不错。现在翻转到风景。哎呦！它不仅不像你想 - 视图又变大小 - 但Xcode的调试窗格已倾倒，看起来像这样在顶部有一个讨厌的错误信息：

我们无法同时满足约束。
也许下面的列表中的制约因素至少有一个是你不想要的。 
试试这个：（1）看每个约束和揣摩，你不要期望; 
（2）发现，增加了不必要的约束或限制的代码，并修复它。 
（注：如果你看到NSAutoresizingMaskLayoutConstraints，你不明白， 
请参考文档中的UIView财产translatesAutoresizingMaskIntoConstraints） 
（
    ＆所述; NSLayoutConstraint：0x7f8deac8a910'的UIView-封装-布局宽度1 H：[UIView的：0x7f8deae26b50（667）]＆gt;“中
）
 
将试图打破约束恢复....

还记得我说，必须有足够的约束，使自动布局可以计算出所有意见的位置和大小？那么，这是那里有一个例子太多的限制。每当你得到“无法同时满足约束”的错误，这意味着你的约束是相互矛盾的地方。

让我们来看看这些限制再次：

有六个制约绿色视图设置，你之前看到您刚才设置就可以了四个空间约束（1-4）和新宽度和高度的限制（5和6）。那么，是冲突？

在纵向模式下，不应该是一个问题，因为数学加起来。如果添加的水平间距和宽度限制的长度，那么你也应该结束了在超视图的宽度。像明智的垂直约束。

但是，当你旋转设备进入横屏，数学是关闭的，自动布局不知道该怎么办。

这里的冲突是，视图的任一的宽度是固定的，边缘的一个必须是柔性的，或边缘是固定的，所述宽度必须是柔性的。你不能兼得。因此，这些限制一个人去。在上面的例子中，你想要的视图在纵向和横向的宽度相同，所以尾随横向空间也得走了。

取出水平空间在合适的和垂直的空间的下方。其实，故事情节应该是这样的：

现在，该视图有约束恰到好处的数量，以确定其大小和位置 - 无多，不会少。运行应用程序并确认该错误消息已不存在，而且观点保持相同大小的旋转后。

虽然接口生成器会尽可能地警告你无效的布局，它不能创造奇迹。它会提醒你的时候太少的限制，但它并不在检测的布局有太多的约束那么幸运。

至少在运行时，自动布局吐出了详细的错误信息时，什么是错的。您可以了解更多有关分析这些错误信息，在诊断中的“中间自动布局”布局问题通过教程的iOS 6。

画的肖像

将一个标签上果岭视图。请注意，现在的指南，绿色的视图中出现，因为这将是上海华的标签。

对放置在底部边缘，水平居中对导游的标签。添加空格约束锚定标签对绿色视图的底部，在20分的距离。最快的方法是用针按钮，只需选择T形杆底部：

现在添加约束与水平居中的标记对齐菜单。把前面的复选框的水平中心集装箱，然后单击添加1约束。其实，故事情节现在应该是这样的：

请注意，这两个新的水平和垂直空间的限制被列在绿色视图自身的约束部分，而不是在主视图。

将一个新的图像视图对象到故事板，使布局如下所示：

图像视图被固定在顶，左，它的父的右边缘，而其底部被连接到标签的顶部为8点的标准间距。如果你不知道如何做到这一点，那么请按照下列步骤操作。

1.将图像显示成绿色的看法，但不要太担心它的大小和位置：

2.选择的图像显示，按销按钮并选择下列选项：

顶部，左侧，和右侧的T-杆被设置为20点，但底部之一被设定为8分。重要提示：对于更新框架应选择新的约束条件的项目。如果你已经离开了这个至没有默认情况下，故事情节会是这个样子：

你选择的约束导致不同的帧比图像视图的当前位置和大小。但是，如果你选择新的约束条件的项目，界面生成器会自动调整框架，因为它增加了约束，一切看起来花花公子：

当然，如果你结束了一个错位的框架，你可以随时使用的解决自动布局问题按钮来修复它：

添加图像

接下来，下载的资源，本教程并解压缩文件。你会发现一个图片文件夹-添加该文件夹到您的项目。设置Ray.png作为图像显示的图像，改变图像视图的方式看点飞度，并设置其背景颜色为白色。更改标签的文本说“雷人”。

您的布局现在应该是这样的：

请注意，绿色视图中的限制变成了黄色。发生这种情况设置的图像上的图像视图的时刻。为什么你的布局突然失效？幸运的是，你可以猜测出它，并让Xcode中确切地告诉你什么是错的。

点击旁边的小红色箭头来查看控制器的场景，在文档大纲来查看问题：

你有一个内容优先歧义错误。这是相当拗口。这是它的意思是：如果没有图像视图，也不标签上有一个固定的高度，然后自动布局不知道多少比例，如果每一个绿色的观点的高度应该改变。（Interface Builder中似乎忽略了现在的绿色观点其实上有一个固定的高度限制设置。）

比方说，在一些点在你的应用程序中的绿角度的高100点。应该如何自动布局分发标签和图像视图之间的这些新的100分？难道图像视图成为同时标签保持相同尺寸100点高？抑或是标签变得更高，而图像视图保持不变？难道他们都获得50分的加，抑或是分裂25/75，40/60，或在其他一些可能的组合？

如果不解决这个问题，不知何故，然后自动布局将不得不猜测，结果可能是不可预测的。

正确的解决办法是改变内容压缩性优先级的标签。顾名思义，这个数值决定了抵抗一个观点是被压缩，或收缩。较高的值在这里是指该视图将是不太可能被压缩，并更可能保持相同。

同样，内容抱死优先级决定了抵抗一个观点是正在扩大。你可以想象“拥抱”在这里的意思是“大小以适合” -的观点将“拥抱”的界限或接近内在的内容大小。较高的值在这里表示的观点将不太可能增长，更可能保持不变。

进入尺寸检查员为标签，将垂直内容压缩性优先于751.这使得它成为1比图像视图的优先级更高。当你在它，设置垂直  内容抱死优先于252。当上海华尺寸改变，这意味着图像视图将是一个调整大小，标签将保持几乎相同的尺寸。

使用  解决自动布局问题  按钮，然后选择  更新框架，以解决任何问题挥之不去的标签位置。 该T-酒吧应该再变成蓝色，并自动布局警告都没有了。

添加其他负责人

拖动绿色视图到主视图的左上角。回想一下，绿色的观点有横向空间和纵向空间的约束决定了它在父视图中的位置。它仍然有那些，他们导致无法对齐的观点的框架。

为了解决这个问题，用解决自动布局问题按钮，然后选择更新约束。以前，您使用更新框架，其中移动和调整的看法比赛的约束。在这里，你想要做相反的：你要约束更新到框架相匹配。

需要注意的是在顶部的垂直空间现在负。这是因为这种约束连接到顶部布局指南。但是，没有任何理由限制不能有负值，这样你就可以离开这个原样。（如果你烦恼，删除“垂直空间（-20）”的约束和引脚视图到窗口的顶部）。

的水平空间现在有0号，是由一个厚厚的蓝线在窗口的左边表示。因此，即使认为坐在完全在角落里，它仍然需要约束锚定在那里：

我们现在要开始添加更多的视图来显示更多的人。你这样做之前，更改视图控制器的模拟尺寸的iPhone 4英寸。然后，选择绿色的视图，然后点击⌘D复制它。将复制到右上角：

请注意，T-酒吧橙色。时所取得的重复，它明显失去了约束的X和Y位置。为了解决这个问题，针视图顶端和窗口的右边缘（确保取消选中约束到边距）。

重复两次以上，并把这些副本在左下角和右下角分别。此外，针这些视图自己的角落。

更改屏幕设计为以下内容：

这些都是一些好看的程序员！:-)

运行在一个4英寸的iPhone模拟器（iPhone 5或5张/秒）的应用程序。它看起来在纵向不错，但在横向没有这么多：

这应该是很明显出了什么问题：你设置一个固定的宽度和高度上的四个色泽鲜艳容器的观点，所以他们总是有那些大小，不论其上海华的大小。

从所有四个视图固定宽度和高度固定的限制和删除（这是最简单的文档大纲）。如果你现在运行的应用程序，你会得到这样的事情：

注意：如果你想知道为什么有些意见是比别人大，这又涉及到内在的内容大小。图像的大小决定了大型形象的看法是; 文字的大小决定了大标签。两者合计与边缘的约束- 20分各方-这决定了每个视图的总大小。

这看起来非常像你在介绍第1部分解决了这个问题，所以如果你回想一下你是如何解决的，你还记得你给的意见，平等的宽度和高度。

选择所有四种颜色的看法。这是最简单的文档大纲; 按住⌘并单击四个视图。您可以一次性添加的约束。在销弹出摆在前面的对号相等的宽度和高度相等，然后按添加6约束。

再次运行应用程序并旋转设备。嗯......还是没有好：

所有的视图做具有相同的高度，并且它们似乎也具有相同的宽度，所以得到满足的约束。这只是不是你希望他们有宽度和高度。

只是说四个观点必须有相同的尺寸是不够的，确定这些尺寸实际上应该是的，因为自动布局不知道这四个观点是如何相互连接。它们出现并排侧的设计，但它们之间有任何实际的约束。自动布局不知道它需要拆分“雷”和“Matthijs”框之间的窗口宽度。

如果自动布局不能想出解决办法本身，你必须告诉它。

从雷盒到Matthijs框Ctrl拖动，选择  水平间距从弹出式 菜单中。由于箱子是并排的一面，这增加了大小为0它们之间的水平空间的限制，这是足以让自动布局懂得这两种观点是相关的。还放了垂直空间的光线和丹尼斯·里奇框之间使用相同的Ctrl拖动技术。

再次运行程序，这一次，它看上去一切正常：

哪里何去何从？

如果你走到今天这一步，恭喜你 - 你现在知道什么是自动布局是一回事，并试验了基础！但是，有很多东西需要学习...

要继续更高级的主题，看看我们的自动布局视频教程系列，涵盖你需要成为一个自动布局样样精通。您可能也有兴趣在我们的自适应布局系列也是如此。

如果您有任何问题或意见，你继续你的自动布局之旅，请加入论坛讨论下面！