无论是移动端还是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里面，自动布局又方便维护，<code>MASConstraintMaker</code>这个是关键类，有以下属性方法
@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的位置和大小，不然可能不会显示
