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)#>]

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

Item

和

toItem

:约束中的两个视图对象，约束可能涉及到两个视图，也有可能只涉及到一个。所以对于

Item

一定不能为空，对于

toItem

可以为空。

attribute

：这两个

attribute

是描述视图矩形的对齐特征，如left、right、center、height、width等，如果第二个

Item

为空，那么第二个

attribute

值为NSLayoutAttributeNotAnAttribute

relatedBy

:即描述两个

attribute

的关系

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

对象，添加我们的视图上。如果已经有基础的童鞋，可以直接略过此部分，看我优酷空间上的教学视频，点击进入!

敬请期待下篇博客！