iOS 纯代码玩转自动布局

无论是移动端还是PC端开发，炫酷的UI直接提高了应用的档次，下面来说说我iOS开发中，是如何优雅的布局的

一、Masonry

先上一段代码感受一下，这是设置视频播放器下面的工具条的布局

- (void)updateBottomToolbarView
{
    // 底部工具条
    [_bottomToolbar mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self).with.offset(0);
        make.right.equalTo(self).with.offset(0);
        make.height.mas_equalTo(40);
        make.bottom.equalTo(self).with.offset(0);
    }];
    
    // 开始按钮
    [_playOrPauseBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bottomToolbar).with.offset(0);
        make.height.mas_equalTo(40);
        make.bottom.equalTo(self.bottomToolbar).with.offset(0);
        make.width.mas_equalTo(40);
    }];
    
    // 进度条
    [self.progressSlider mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bottomToolbar).with.offset(45);
        make.right.equalTo(self.bottomToolbar).with.offset(-45);
        make.height.mas_equalTo(40);
        make.top.equalTo(self.bottomToolbar).with.offset(0);
    }];
    
    // 时间Label
    [self.timeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.bottomToolbar).with.offset(45);
        make.right.equalTo(self.bottomToolbar).with.offset(-45);
        make.height.mas_equalTo(20);
        make.bottom.equalTo(self.bottomToolbar).with.offset(0);
    }];

    // 全屏按钮
    [_fullScreenBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.bottomToolbar).with.offset(0);
        make.height.mas_equalTo(40);
        make.bottom.equalTo(self.bottomToolbar).with.offset(0);
        make.width.mas_equalTo(40);
    }];
}

所有的Frame的设置都在block里面，自动布局又方便维护，MASConstraintMaker这个是关键类，有以下属性方法

@property (nonatomic, strong, readonly) MASConstraint *left;// 左间距
@property (nonatomic, strong, readonly) MASConstraint *top; // 上间距
@property (nonatomic, strong, readonly) MASConstraint *right;// 右间距
@property (nonatomic, strong, readonly) MASConstraint *bottom;// 下间距
@property (nonatomic, strong, readonly) MASConstraint *leading;// 左对齐
@property (nonatomic, strong, readonly) MASConstraint *trailing;// 右对齐
@property (nonatomic, strong, readonly) MASConstraint *width;// 宽
@property (nonatomic, strong, readonly) MASConstraint *height;// 高
@property (nonatomic, strong, readonly) MASConstraint *centerX;// X居中对齐
@property (nonatomic, strong, readonly) MASConstraint *centerY;// Y居中对齐
@property (nonatomic, strong, readonly) MASConstraint *baseline;// 基线

获取相应的属性值是这样的

@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;
@property (nonatomic, strong, readonly) MASViewAttribute *(^mas_attribute)(NSLayoutAttribute attr);

我们可以这样玩
1.设置间距后用offset添加偏移量

make.left.equalTo(self.view.mas_left).offset(0);

2.设置宽的比例

make.width.equalTo(self.view.mas_width).multipliedBy(0.5)

3.设置参照的视图等宽高

make.width.and.height.equalTo(self.imageView);

4.设置内边距

make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

二、SDAutoLayout

这个库也比较好用，链式编程风格，还能自适应tableViewCell的高度，较轻量级，有兴趣可以学习学习，先上一段代码

     expressionImage.sd_layout
    .topSpaceToView(scrollView,0)
    .leftSpaceToView(scrollView,0)
    .rightSpaceToView(scrollView,0)
    .heightIs(150);
    
    expressionName.sd_layout
    .topSpaceToView(expressionImage,10)
    .leftSpaceToView(scrollView, 15)
    .heightIs(30)
    .widthIs(80);
    
    expressionDownLoad.layer.cornerRadius = 3.0;
    expressionDownLoad.sd_layout
    .topEqualToView(expressionName)
    .rightSpaceToView(scrollView,20)
    .widthIs(80)
    .heightIs(30);
    
    expressionDetail.sd_layout
    .leftEqualToView(expressionName)
    .rightSpaceToView(scrollView,20)
    .topSpaceToView(expressionName,10)
    .autoHeightRatio(0);

// 自适应最后一个控件的高度
    [scrollView setupAutoHeightWithBottomView:expressionItemView bottomMargin:20];

属性一看就知道，大家都是成年人，不用多说了吧

需要注意点：
1.要先加到父视图上，再设置布局
2.可以一个个的add，也可以调sd_addSubviews一次性add
3.布局要能确定View的位置和大小，不然可能不会显示