無(wú)論是移動(dòng)端還是PC端開(kāi)發(fā)，炫酷的UI直接提高了應(yīng)用的檔次，下面來(lái)說(shuō)說(shuō)我iOS開(kāi)發(fā)中，是如何優(yōu)雅的布局的

一、Masonry

先上一段代碼感受一下，這是設(shè)置視頻播放器下面的工具條的布局

- (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);
    }];
    
    // 開(kāi)始按鈕
    [_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);
    }];
    
    // 進(jìn)度條
    [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);
    }];
    
    // 時(shí)間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的設(shè)置都在block里面，自動(dòng)布局又方便維護(hù)，<code>MASConstraintMaker</code>這個(gè)是關(guān)鍵類(lèi)，有以下屬性方法

@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;// 左對(duì)齊
@property (nonatomic, strong, readonly) MASConstraint *trailing;// 右對(duì)齊
@property (nonatomic, strong, readonly) MASConstraint *width;// 寬
@property (nonatomic, strong, readonly) MASConstraint *height;// 高
@property (nonatomic, strong, readonly) MASConstraint *centerX;// X居中對(duì)齊
@property (nonatomic, strong, readonly) MASConstraint *centerY;// Y居中對(duì)齊
@property (nonatomic, strong, readonly) MASConstraint *baseline;// 基線

獲取相應(yīng)的屬性值是這樣的

@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.設(shè)置間距后用offset添加偏移量

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

2.設(shè)置寬的比例

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

3.設(shè)置參照的視圖等寬高

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

4.設(shè)置內(nèi)邊距

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

二、SDAutoLayout

這個(gè)庫(kù)也比較好用，鏈?zhǔn)骄幊田L(fēng)格，還能自適應(yīng)tableViewCell的高度，較輕量級(jí)，有興趣可以學(xué)習(xí)學(xué)習(xí)，先上一段代碼

     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);

// 自適應(yīng)最后一個(gè)控件的高度
    [scrollView setupAutoHeightWithBottomView:expressionItemView bottomMargin:20];

屬性一看就知道，大家都是成年人，不用多說(shuō)了吧

需要注意點(diǎn)：
1.要先加到父視圖上，再設(shè)置布局
2.可以一個(gè)個(gè)的add，也可以調(diào)sd_addSubviews一次性add
3.布局要能確定View的位置和大小，不然可能不會(huì)顯示