写给自己的AutoLayout：（一）简单View

关于AutoLayout设置的图解翻译，之前的有很多文章都讲解，我这里就不班门弄斧了。有兴趣的可以搜一下。

为啥要用AutoLayout？我是可视化拥趸：

当你使用AutoLayout搭建完成一个页面之后，可以使用Preview查看是否适配不同的尺寸。

如何创建正确的约束，我的理解是这样：我是谁，我在哪

1. 我是谁：我自己的大小（height、width）
2. 我在哪：我自己相对于父视图或是平级视图的位置

以上两点适用于大部分的控件

举个简单的例子：

在视图中上方放置一个UILabel，UILabel的Text居中显示，UILabel下方放置一个UIView，UIView的位置在UILabel的左下方，如下图所示：

要求UILabel 居中，距上方16点。UIView 大小100*100，距离UILabel 16点，距离左侧16点。

1. 首先将两个控件拖进来，按照次序排好，当使用AutoLayout的时候，约束控件一定要有先后顺序，不然容易出现混乱。为了方便显示，将UILabel的BackgroundColor设置为可见色。

2. 设置UILabel约束，左右边距16点，上20点，高度没有固定。

3. 设置UIView约束与背景色，左距16，上距16，宽高100.

4. 设置UILabel的Text居中显示

  不设置UILabel的高度，是为了放置UILabel的字数过多，显示不全，如果不确定UILabel的Text长度的话，可以不设置UILabel的高度，UILabel会根据Text长度进行自适应，当然，前提是将lines设置为0，如下图：

  当然，如果你确定label的text只有一行且不会特别长，还可以使用另一种约束方案,如下：

设置上距20

设置水平居中

显示结果如下：

  这种约束确定了UILabel的位置，自身宽高会根据Label的Text属性适应高度与宽度。

Tip：

类似标注的功能，忘记是哪个版本更新的了

  选中一个控件，按住Option键，鼠标滑动到空间以外的地方，可以方便的看到空间之间的距离，如此便可以与设计师提供的标注图进行对比，查看是否一致。