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: constant:];
           

又如：将一个视图的宽度设置为100px

数学表达式：

视图的宽度 == 100

代码示例：

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

相信讲到这里，大家对构造一个，对于这样一个构造

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

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

敬请期待下篇博客！