iOS中的布局方法整理

一般来说分为绝对布局和相对布局。

绝对布局一般通过 frame 改变组件的位置和大小，相对布局是参考组件周围的元素来确定组件的大小或位置，相对布局即约束和周围组件的距离来布局的。

可视化编程的相对布局一般用 al 来进行。

简单介绍一下Autolayout：

Autolayout是一种“自动布局”技术，专门用来布局UI界面的

Autolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有

得到很大推广

自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升

苹果官方也推荐开发者尽量使用Autolayout来布局UI界面

Autolayout能很轻松地解决屏幕适配的问题

在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性

较大，有些任务根本无法完成

相比之下，Autolayout的功能比Autoresizing强大很多

代码也可实现Autolayout：

利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点
要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前，一定要保证相关控件都已经在各自的父控件上
不用再给view设置frame

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;

view1 ：要约束的控件
attr1 ：约束的类型（做怎样的约束）
relation ：与参照控件之间的关系
view2 ：参照的控件
attr2 ：约束的类型（做怎样的约束）
multiplier ：乘数
c ：常量

自动布局有个核心公式
obj1.property1 =（obj2.property2 * multiplier）+ constant value

添加约束的规则：

在创建约束之后，需要将其添加到作用的view上

在添加时要注意目标view需要遵循以下规则：

1）对于两个同层级view之间的约束关系，添加到它们的父view上

2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上

3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

贴上代码实现约束的例子：

// 1.添加控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];

UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];

// 2.约束蓝色
// 2.1.高度
NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];
[blueView addConstraint:blueHeight];
// 2.2.左边间距
CGFloat margin = 20;
NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
[self.view addConstraint:blueLeft];
// 2.3.顶部间距
NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
[self.view addConstraint:blueTop];
// 2.4.右边间距
NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
[self.view addConstraint:blueRight];

// 3.约束红色
// 3.1.让红色右边 == 蓝色右边
NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
[self.view addConstraint:redRight];

// 3.2.让红色高度 == 蓝色高度
NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
[self.view addConstraint:redHeight];

// 3.3.让红色顶部 == 蓝色底部 + 间距
NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
[self.view addConstraint:redTop];

// 3.4.让红色宽度 == 蓝色宽度 * 0.5
NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
[self.view addConstraint:redWidth];

VFL 简单介绍：

VFL全称是Visual Format Language，翻译过来是“可视化格式语言”

VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

示例：

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox]-[yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；
再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。
（竖线“|” 表示superview的边缘）

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views;

format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)

贴上 VFL生成约束示例代码：

// 1.添加控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];

UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];

// 2.VFL生成约束
NSDictionary *mertrics = @{@"margin" : @20}; // 参数\数值
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];

NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:@{@"blueHeight" : @40, @"margin" : @20} views:views];
[self.view addConstraints:conts];
[self.view addConstraints:conts2];

基于Autolayout的动画：

在修改了约束之后，只要执行下面代码，就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
[添加了约束的view layoutIfNeeded];
}];

另外介绍一些自动布局的框架：Masonry，keep layout，ZXPAutoLayout。这里就不一一讲解使用了，推荐几个教程。

ZXPAutoLayout：/article/6475320.html

Masonry：http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/

Keep Layout：http://www.it165.net/pro/html/201503/35625.html

自动布局autolayout使用总结（源码含swift版本）：

/article/2732961.html

Xcode6中如何对scrollview进行自动布局（autolayout）：

/article/1225931.html