本文我们将提到：
aotulayout（手码）
VFL
aotulayout（Xib）
Masonry（第三方框架）
是不是很期待呢？那就跟着小编走吧！
本文Demo地址：https://github.com/JinqianChina/aotulayoutDemo.git
一、AutoLayout介绍
UI布局对于iOS开发者来说并不陌生，在iOS6之前，大家都是通过UI控件的Frame属性和Autoresizing Mask来进行UI布局的。AutoLayout则是苹果公司在iOS6推出的一种基于约束的，描述性的布局系统。自从AutoLayout问世以来，逐步得到了iOS开发者们的青睐，尤其是iPhone6机型尺寸的出现，让AutoLayout从此走向人生巅峰，迎娶白富美，当上UI布局界的老大。~_~，好了，不扯淡了，下面来看看它的特殊之处。
AutoLayout占据UI布局的主要领导位置依赖于它的特殊性：
1).基于约束：和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等
2).描述性： 约束的定义和各个view的关系使用接近自然语言或者可视化语言（稍后会提到）的方法来进行描述
3).布局系统：即字面意思，用来负责界面的各个元素的位置。
总而言之，AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。 总的来说：使用约束条件来描述布局，view的frame会依据这些约束来进行计算。
二、AutoLayout使用原理：
创建约束，iOS6中新加入了一个类：NSLayoutConstraint。它的约束满足这个公式：
item1.attribute = multiplier ⨉ item2.attribute + constant
对应的代码为
//view_1(红色)top 距离self.view的top
NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:30];
这里对应的约束是“view_1的顶部（y）＝ self.view的顶部(y)*1 + 30”。
添加约束，在创建约束之后，需要将其添加到作用的view上。UIView添加约束的实例方法：
- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0);
用来将约束添加到view。在添加时唯一要注意的是添加的目标view要遵循以下规则：
1).对于两个同层级view之间的约束关系，添加到他们的父view上
Mou icon
2).对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
Mou icon
3).对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
Mou icon
刷新约束，可以通过-setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变，使UIView重新布局。
三、AutoLayout的不同使用方式
OK，到这里我们讲了一堆理论，相信对AutoLayout对不熟悉的童鞋依然比较迷茫，你必须要进行代码的洗礼，才会对它大彻大悟。好的，那么我们开始上代码吧！
如图1：我们需要布局红、绿、蓝三个view位置如图所示，他们距离父视图边距以及相互之间的距离都为30px，红色view和绿色view宽度相等，并且三个view的高度相等。并且在横屏时，他们的位置还是一样保持不变。
Mou icon
Mou icon
Mou icon
如果用传统布局方式利用Frame属性，则需要分情况来判断并改变控件Frame的值以达到适应屏幕的尺寸。下面来看看AutoLayout自动布局的实现方法：
AutoLayout（系统手码）
- (void)viewDidLoad {
[super viewDidLoad];
/*
* 需求
*
* 我们需要布局红(view_1)、绿(view_2)、蓝(view_3)三个view位置如图所示，
* 他们距离父视图边距以及相互之间的距离都为30px，红色view和绿色view宽度相等，
* 并且三个view的高度相等。并且在横屏时，他们的位置还是一样保持不变。
*
*/
//1.首先，创建视图控件，添加到self.view上
UIView *view_1 = [[UIView alloc] init];
view_1.backgroundColor = [UIColor redColor];
[self.view addSubview:view_1];
UIView *view_2 = [[UIView alloc] init];
view_2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view_2];
UIView *view_3 = [[UIView alloc] init];
view_3.backgroundColor = [UIColor blueColor];
[self.view addSubview:view_3];
//2.然后，记得要把AutoresizingMask布局关掉
view_1.translatesAutoresizingMaskIntoConstraints = NO;
view_2.translatesAutoresizingMaskIntoConstraints = NO;
view_3.translatesAutoresizingMaskIntoConstraints = NO;
//3.接着，添加约束，先添加边距约束，再添加宽高约束（个人习惯）
/*
* 添加约束 公式：item1.attribute = multiplier ⨉ item2.attribute + constant
*/
//view_1(红色)top 距离self.view的top
NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:30];
//view_1(红色)left 距离self.view的left
NSLayoutConstraint *view_1LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:30];
//view_1(红色)right 距离view_2(绿色)的left
NSLayoutConstraint *view_1RightToview_2Left = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeRight
multiplier:1
constant:30];
//view_1(红色)bottom 距离view_3(蓝色)的top
NSLayoutConstraint *view_1BottomToview_3Top = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:view_3
attribute:NSLayoutAttributeTop
multiplier:1
constant:- 30];
//view_2(绿色)right 距离self.view的right
NSLayoutConstraint *view_2RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:- 30];
//view_2(绿色)centerY 和 view_1(红色)的centerY 一致
NSLayoutConstraint *view_2CenterYToView_1CenterY = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0];
//view_3(蓝色)left 距离 self.view left
NSLayoutConstraint *view_3LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:30];
//view_3(蓝色)right 距离 self.view right
NSLayoutConstraint *view_3RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:- 30];
//view_3(蓝色)Bottom 距离 self.view bottom
NSLayoutConstraint *view_3BottomToSuperViewBottom = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:- 30];
//view_1(红色)width 和view_2(绿色)的width相等
NSLayoutConstraint *view_1WidthToview_2Width = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0];
//view_1(红色)height 和view_2(绿色)的height相等
NSLayoutConstraint *view_1HeightToview_2Height = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeHeight
|
|
收藏
淘帖
踩
