Auto Layout

作者在前面几篇博文中很简略地写了一下关于Auto Layout ，但是并没有深入的讲解。接下来一系列的博文，将会向大家介绍 Auto Layout。

Auto Layout的由来

事实上关于Auto Layout 在2012年的时候，就已经出现在我们的视野当中。那时候它作为iOS6 版本的一部分，旨在用来取代基于spring 和 sruct 的 Autosizing 系统。

大家在使用 springs and struts 模式进行UI布局的时候，autosizing mask决定了一个view,当其父视图大小改变的时候，其本身发生什么变化。autosizing masks虽然知道当父视图改变时，要改变view的尺寸，但是它不知道具体该改变多少尺寸，尤其是不能约束不同view之间距离。特别是后来，我们苹果手机在出现很多种不同的尺寸的时候，这种模式的布局方式的短板越来越突出。

AutoLayout 作为一个全新的布局方式，用来构建视图之间的关系，指定视图与其父视图之间以及视图与视图之间的关系。其工作原理是通过创建屏幕上的对象之间的关系来实现布局。

因此在iOS开发中，使用Auto Layout 布局，即是 描述 view与view的位置关系。我们如何描述view和view间的位置关系？事实上，我们是用约束(Constraint)来描述view和view间的位置关系。如：

• 无论子视图如何变化，都相对于父视图居中
• 将一行视图顶部对齐
• 两个视图间距不小于10个像素点
• ……

事实上在Auto Layout 刚出现的时候，大多数人，包括作者自己在内觉得Auto Layout 过于新奇和繁琐，不易上手，特别在使用它更新界面时还需要做更多额外的工作。然而，随着作者的对Auto Layout学习,愈发觉得其功能强大，并逐渐爱上了此种布局方式。

Auto Layout的约束(Constraint)

作者已经讲到Auto Layout 是用约束来约束我们的视图对象，即对每个对象都提出了一个要求。在Auto Layout 中我们给每个视图对象的约束都有数字标识符来表示约束优先级，以保证Auto Layout 按照你确定的约束和约束优先级来呈现你的视图。

在OC中专门为Auto Layout 封装了一个类，来帮助开发者开发

• 布局约束类 NSLayoutConstraint，构建NSLayoutConstraint实例示例：

 [NSLayoutConstraint constraintWithItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>]

下面将给大家介绍，这些个参数的意义：

1. Item 和 toItem:约束中的两个视图对象，约束可能涉及到两个视图，也有可能只涉及到一个。所以对于Item 一定不能为空，对于toItem 可以为空。
2. attribute：这两个attribute 是描述视图矩形的对齐特征，如left、right、center、height、width等，如果第二个Item 为空，那么第二个attribute 值为NSLayoutAttributeNotAnAttribute
3. relatedBy:即描述两个attribute 的关系
4. multiplier和constant:通过这两个参数可以灵活的描述两个视图间的约束关系，如一个视图是另一个视图的一半，如一个视图偏移另一个视图多少像素点等。

讲到这个地方，大家对于这些参数还是很不明白。事实上，对于这样一个构造NSLayoutConstraint对象的类方法，我们事实上可以用这样一个数学表达式来描述：

视图.属性 R 视图.属性*缩放比例+常数

        其中R是 ==  >=  <=三个中之一

那么这个数学表达式是什么意思？举个例子：视图B的左边应位于视图A的右边15个像素点的地方，我们可以数学表达式这样表达:

视图B的左边 == 视图A的右边 + 15

换做代码描述：

[NSLayoutConstraint constraintWithItem:viewA attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:viewB attribute:NSLayoutAttributeLeading multiplier:1 constant:15];

又如：将一个视图的宽度设置为100px
数学表达式：

视图的宽度 == 100

代码示例：

[NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];

相信讲到这里，大家对构造一个，对于这样一个构造NSLayoutConstraint对象的类方法已经有了清晰的认识，但是却不知道NSLayoutAttributeWidth、NSLayoutAttributeNotAnAttribute 这些长长的名词是个什么鬼？OK，接下来一个表格，将为大家介绍：

类型	解释	值
属性	视图的左边、右边以及顶部和底部	NSLayoutAttributeLeft, NSLayoutAttributeRight, NSLayoutAttributeTop,NSLayoutAttributeBottom,
属性	视图的前边和后边，对应于左边和后边	NSLayoutAttributeLeading, NSLayoutAttributeTrailing,
属性	视图的宽度和高度	NSLayoutAttributeWidth,NSLayoutAttributeHeight
属性	视图在X轴上的中心点和视图在Y轴上的中心点	NSLayoutAttributeCenterX, NSLayoutAttributeCenterY,
属性	视图的基线，指视图底部基线	NSLayoutAttributeBaseline
属性	占位符	NSLayoutAttributeNotAnAttribute
关系	约束，表示：==、>=、<=	NSLayoutRelationLessThanOrEqual NSLayoutRelationEqual, NSLayoutRelationGreaterThanOrEqual

---

OK，相信到现在为止，大家已经掌握了，如何构造一个NSLayoutConstraint对象，事实目前位置，你对AutoLayout 的了解是刚刚起步！下篇文章，将会给大家讲解如何将这些构造好的NSLayoutConstraint对象，添加我们的视图上。如果已经有基础的童鞋，可以直接略过此部分，看我优酷空间上的教学视频，点击进入!

敬请期待下篇博客！