iOS 浅淡自动布局剑童篇(欢迎提意见和分享经验)

AutoLayout之可视化布局

写过两篇关于自动布局的文章《AutoLayout实用技巧》和《AutoLayout之纯代码布局》。虽然，《AutoLayout实用技巧》主要是针对Storyboard和XIB写的，但是里面仅仅只是展示了下操作技巧，也是针对有基础的人来学的，并未对如何在Storyboard和XIB中使用 AutoLayout 做过介绍。所以，打算再写篇文章来介绍一下。

基础知识

1、如何启用 AutoLayout

如下图：

启用 AutoLayout

2、约束条件介绍

Align

上面这两张图主要介绍了Align和Pin下面的约束条件的含义。

实战演练

下面主要通过具体例子来介绍 AutoLayout 的使用。

例：如图，给“跟我学AutoLayout”这个按钮添加约束条件，使其在各种屏幕上面的位置满足以下要求：1、距离父视图顶部的距离不变；2、宽高固定不变；3、水平居中。

解析：

其实，并不用做过多的解析，因为问题本身已经告诉了我们该如何添加约束条件了。这里主要是想引起大家的注意，在我们自己做项目的时候，并不会像上面这样告诉你该怎么设置。当你拿到设计师设计好的 UI 界面时，你首先应该知道每一个控件最终要在什么地方，哪些条件是固定不变的，哪些是可变的，这对你下一步的使用 AutoLayout 是非常重要的。另外，在使用 AutoLayout 时，一定要先理解我上面介绍的约束条件的含义，很多人知道自己想要什么样的布局，但是总是会忽略一些限定条件，以至于最终效果不尽人意。如何才能避免这样的问题呢？我给的建议就是，像上面这个问题一样，分析界面上面的每个控件的具体位置，然后，将其转化为每一个约束条件。

最终操作如下所示：

再不厌其烦的解释一下上面的操作：

第一步：选中需要布局的视图（此处是跟我学AutoLayout这个按钮）
第二步：选中Pin这个选项，然后给跟我学AutoLayout这个按钮添加距离父视图顶部197 pts的约束条件。然后，勾选width、height这两个项，并且你可以在后面的方框中看到168 pts和30 pts这两个值，这样操作就是限制了按钮的宽度为168 pts、高度为30 pts，并且这两个值是可以手动修改的。
第三步：点击Align这个选项，然后，点击Horizontal Center in Container，此条件就是限制按钮水平居中。
第四步：其实，这个算是一个高端的操作（瞎扯！这么简单，算什么高端）。在大部分人操作的时候，肯定是先将试图放在相应的位置，然后再添加约束，这样做是对的。我这个操作，主要是想让大家认识一下Resolve Auto Layout Issues这个选项里面的Update Frames的作用，因为很多时候，你会一不小心就把某个控件给拖到其他的位置了，此时你可以利用此操作来处理，当然你可以使用command+z来撤销操作，具体操作视情况而定。在前面三步操作完成的时候，我们可以看到在按钮的左边有个橙色的虚线框，他的意思是，在当前的约束条件下，视图的位置应该在虚线框这里。此时，我们使用Update Frames这个选项就可以将视图移到虚线框的位置，并且此时橙色的虚线框消失，以及所有的约束条件都变为蓝色的了，这就说明约束条件添加完成（未完成的话，选中控件，会看到橙色的线）。

还是上面的问题，再介绍另一种操作方法，如下：

对于上面的操作，需要指出的是以下几点：

Clear Constraints是清除选中控件的所有约束条件，这个很实用，不需要一个个的找了。
在Align这个选项里面也有Update Frames这个选项，读者可以回头看看基础知识里面的两张图，两张图里面都有Update Frames，含义图上面已经介绍了。此操作是不是更方便，这才是高端:)。

补充知识1：

其实，Update Frames更多的用处在于根据控件的内容来设置当前控件的尺寸，也许这句话比较难于理解。我举个简单的例子，如下所示：

这里的操作主要是给UILabel添加上边距、左边距以及固定宽度的约束条件，显然，这三个条件是不足以固定住这个UILabel的。此时，我们再使用Update Frames这个操作，这时 AutoLayout 会自动根据UILabel里面的内容“我是UILabel”来计算这个UILabel的尺寸，并且根据这个内容尺寸(intrinsicContentSize我的这篇文章《AutoLayout之纯代码布局》有介绍)来调整UILabel的尺寸。

如果，在上面的操作中，省去第三步限制宽度的操作，直接执行Update Frames操作，你会看到UILabel的尺寸就是里面文字内容的尺寸。另外，如果你没有看过我的这篇文章《AutoLayout实用技巧》，你可能对此处的拖拽添加约束条件感到陌生，那么还是建议你去看看那篇文章，此处不再解释。

这对我们在动态布局中是十分重要的信息。大家可以测试一下以下操作：

还是上面这个UILabel，第一种操作是，不限定宽度条件，其他约束同上面的操作。然后，通过代码给这个UILabel设置内容，内容的要求是至少15五个字，越多越好。然后，运行项目看看。
第二种操作是，限定宽度，并且设置UILabel的numberOfLines属性为0，其他约束条件跟前面一样。再设置内容，运行看看。

通过上面的操作，你会看到，UILabel已经可以根据内容自适应了，不再需要你去根据内容进行计算了。