浅谈autolayout

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

Autolayout是基于约束的，描述性的布局系统。

关键词：

• 基于约束 － 和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等
• 描述性 － 约束的定义和各个view的关系使用接近自然语言或者可视化语言（稍后会提到）的方法来进行描述
• 布局系统 － 即字面意思，用来负责界面的各个元素的位置。

总而言之，AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。 总结：使用约束条件来描述布局，view的frame会依据这些约束来进行计算。

本文将从三个方面对autolayout的使用进行说明：

1. 基于xib或者storyboard的自动布局；2. 用VFL代码的自动布局；3. 用第三方类库的代码实现的自动布局。

Demo:

1. 在控制器View底部添加两个View，1个蓝色，1个红色；

2. 两个View宽度，高度永远相等；

3. 举例父控件左边，右边，下边间距和两个View之间的间距相等，且均为20px。

运行效果图:

竖屏：

横屏：

基于xib或者storyboard的自动布局

1. 蓝色View添加的约束如下(距离父控件的左边，下边均为20px，自己的高度为50px):

2. 蓝色View添加的约束如下(距离父控件的右边，下边均为20，距离蓝色View的右边距离也为20)

3. 添加两者之间的相对约束

按住Control键，并且从红色View拖拽鼠标到蓝色View，会弹出如上界面，然后分别选择"Equal Widths" 和 "Equal Heights", 这样就能保证他们宽高永远一致了。

如果你像在代码中改变约束的值，也可以通过拖线的形式来实现。 比如：我想在程序中动态的修改两个View的高度，使他们的高度变成100。

然后添加以下代码即可:

self.viewHeight.constant = 100;

上面的代码执行完毕，蓝色和红色的View高度均变为100了，因为他们是相互约束的。

用VFL(Visual format language)代码的自动布局。Apple的工程师很有爱，发明了这种哭笑不得的象形文字。感觉它就是种解析方式。

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];
    
    // 占位所用
    NSDictionary *metrics = @{@"margin":@20};
    //NSDictionary *views = @{@"blueView":blueView,@"redView":redView};
    // 下面的写法等价于上面的写法
    NSDictionary *views = NSDictionaryOfVariableBindings(redView,blueView);
    NSArray *constraint1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:views];
    
    [self.view addConstraints:constraint1];
    
    // 小括号里面的参数(水平方向定宽度，垂直方向定高度)
    NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==40)]-margin-|" options:0 metrics:metrics views:views];
    [self.view addConstraints:constraint2];

看到上面的写法，真是一眼难尽啊！！！

H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|

像这样的写法，可读性真是太差了。大家可作为了解，本人就不解释了。

用第三方类库的代码实现的自动布局

这里，我介绍两款：

一个是UIView+AutoLayout， 它是一个UIView的分类。下载地址：https://github.com/smileyborg/UIView-AutoLayout

代码实现：

[self.redView autoSetDimension:ALDimensionHeight toSize:50];
    [self.redView autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:20];
    [self.redView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];
    
    [self.blueView autoMatchDimension:ALDimensionHeight toDimension:ALDimensionHeight ofView:self.redView];
    [self.blueView autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:20];
    [self.blueView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];
    [self.blueView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.redView withOffset:20];
    [self.blueView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.redView];

对比VFL，可读性真是好多了。

另一个是 Masonry, 更加的面向对象了，而且很多都是用block实现的。 下载地址：https://github.com/SnapKit/Masonry

代码实现：

__weak typeof(self) ws = self;
    UIView *sv1 = [[UIView alloc] init];
    sv1.backgroundColor = [UIColor redColor];
    [self.view addSubview:sv1];
    
    UIView *sv2 = [[UIView alloc] init];
    sv2.backgroundColor = [UIColor blueColor];
    [self.view addSubview:sv2];
    
    CGFloat padding = 20;
    
    [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);
        make.left.mas_equalTo(ws.view.mas_left).with.offset(padding);
        make.right.mas_equalTo(sv2.mas_left).with.offset(-padding);
        make.height.mas_equalTo(50);
    }];
    
    [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);
        make.right.mas_equalTo(ws.view.mas_right).with.offset(-padding);
        make.height.mas_equalTo(sv1.mas_height);
        make.width.mas_equalTo(sv1.mas_width);
    }];