快捷導(dǎo)航

IOS自適配利器Masonry使用指南

更新時(shí)間：2016年01月20日 08:46:22 作者：FlyElephant

如果說(shuō)自動(dòng)布局解救了多屏幕適配，那眾多三方庫(kù)的出現(xiàn)就解救了系統(tǒng)自動(dòng)布局的寫(xiě)法。Masonry就是其中一個(gè)。用法上也比較簡(jiǎn)單靈活，很大程度上替代了傳統(tǒng)的NSLayoutConstraint布局方式。下面我們就來(lái)具體探討下吧

關(guān)于iOS布局自動(dòng)iPhone6之后就是AutoLayOut，AutoLayOut固然非常好用，不過(guò)有時(shí)候我們需要在頁(yè)面手動(dòng)進(jìn)行頁(yè)面布局，VFL算是一種選擇，而且VFL不復(fù)雜，理解起來(lái)很容易，實(shí)際開(kāi)發(fā)中用的特別熟還好，要是第一次看估計(jì)要花點(diǎn)功夫才能搞定。Masonry算是VFL的簡(jiǎn)化版，用的人比較多，之前項(xiàng)目中用過(guò)一次，對(duì)手動(dòng)寫(xiě)頁(yè)面的開(kāi)發(fā)來(lái)說(shuō)算是福利。

基礎(chǔ)知識(shí)

首先我們看一個(gè)常見(jiàn)的問(wèn)題將一個(gè)子View放在的UIViewController的某個(gè)位置，通過(guò)設(shè)置邊距來(lái)實(shí)現(xiàn)，效果如下:

如果通過(guò)VFL我們代碼會(huì)是這樣的:

UIView *superview                               = self.view;
 
UIView *view1                                   = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor                           = [UIColor redColor];
[superview addSubview:view1];
 
UIEdgeInsets padding                            = UIEdgeInsetsMake(200, 50, 200, 50);
 
[superview addConstraints:@[
 
                            //約束
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeTop
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeTop
                                                        multiplier:1.0
                                                          constant:padding.top],
 
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeLeft
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeLeft
                                                        multiplier:1.0
                                                          constant:padding.left],
 
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeBottom
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeBottom
                                                        multiplier:1.0
                                                          constant:-padding.bottom],
 
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeRight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeRight
                                                        multiplier:1
                                                          constant:-padding.right],
 
                            ]];

只是簡(jiǎn)單的設(shè)置了一個(gè)邊距，如果視圖的關(guān)系比較復(fù)雜，維護(hù)起來(lái)會(huì)是一個(gè)很痛苦的事情，我們看一下Masonry是如何實(shí)現(xiàn)的，導(dǎo)入Masonry.h頭文件，約束的代碼:

UIView  *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先將子View加入在父視圖中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50);
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(weakSelf.view).with.insets(padding);
}];

通過(guò)mas_makeConstraints設(shè)置邊距有種鳥(niǎo)槍換炮的感覺(jué)，我們即將開(kāi)啟一段新的旅程，可以緊接著看下面比較實(shí)用的功能~

實(shí)用知識(shí)

1.View設(shè)置大小

UIView  *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先將子View加入在父視圖中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    //設(shè)置大小
    make.size.mas_equalTo(CGSizeMake(100, 100));
    //居中
    make.center.equalTo(weakSelf.view);
}];

效果如下:

這里友情其實(shí)一個(gè)小內(nèi)容，目前我們?cè)O(shè)置約束都是通過(guò)mas_makeConstraints用來(lái)創(chuàng)建約束,mas_updateConstraints用來(lái)更新約束，mas_remakeConstraints重置約束，清除之前的約束，保留最新的約束,如果想深入解釋下，可以閱讀下面的英文解釋~

/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created MASConstraints
 */
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
 
/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
 *  If an existing constraint exists then it will be updated instead.
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created/updated MASConstraints
 */
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
 
/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
 *  All constraints previously installed for the view will be removed.
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created/updated MASConstraints
 */
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

2.設(shè)置高度，這里設(shè)置左右邊距，因此不設(shè)置寬度，如果想單獨(dú)設(shè)置width可參考高度的設(shè)置方式:

UIView  *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先將子View加入在父視圖中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    //距離頂部44
    make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
    //距離左邊30
    make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
    //距離右邊30，注意是負(fù)數(shù)
    make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
    //高度150
    make.height.mas_equalTo(@150);
}];

3.子視圖之間的位置設(shè)置:

UIView  *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先將子View加入在父視圖中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
    //距離頂部44
    make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
    //距離左邊30
    make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
    //距離右邊30，注意是負(fù)數(shù)
    make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
    //高度150
    make.height.mas_equalTo(@150);
}];
//地址:http://www.cnblogs.com/xiaofeixiang/
UIView *nextView=[UIView new];
[nextView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:nextView];
[nextView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(childView.mas_bottom).with.offset(30);
    make.right.equalTo(childView.mas_right).with.offset(-30);
    make.width.mas_equalTo(@100);
    make.height.mas_equalTo(@100);
}];

4.鏈?zhǔn)綄?xiě)法，算是一個(gè)便利的寫(xiě)法:

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor greenColor]];
    //先將子View加入在父視圖中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.left.mas_equalTo(weakSelf.view).with.offset(100);
        make.bottom.and.right.mas_equalTo(weakSelf.view).with.offset(-100);
        //第二種寫(xiě)法更簡(jiǎn)單，相對(duì)于就是父視圖
//        make.top.and.left.mas_equalTo(100);
//        make.bottom.and.right.mas_equalTo(-100);
    }];
     
    UILabel *label=[UILabel new];
    [label setText:@"博客園-FlyElephant"];
    [label setTextColor:[UIColor redColor]];
    [label setTextAlignment:NSTextAlignmentCenter];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(weakSelf.view).with.offset(10);
        make.height.mas_equalTo(20);
        make.right.mas_equalTo(weakSelf.view).with.offset(-10);
        make.bottom.mas_equalTo(weakSelf.view).with.offset(-50);
    }];

　網(wǎng)上關(guān)于Masonry的教程很多，給的例子的也很多，這幾種情況基本上滿足了開(kāi)發(fā)中的需求，不會(huì)有太多的出入，算是一個(gè)簡(jiǎn)易版的教程，Masonry的中屬性和iOS中的屬性是有對(duì)應(yīng)的關(guān)系，不過(guò)因?yàn)楹芎?jiǎn)單，基本上沒(méi)怎么看，下圖是一個(gè)對(duì)照關(guān)系:

總結(jié)：

可以給控件添加left/right/top/bottom/size/height/width/insert約束；
庫(kù)提供了三個(gè)方法，mas_makeConstraints添加約束，mas_updateConstraints修改約束，mas_remakeConstraints清除以前約束并添加新約束；
可以通過(guò)view.mas_bottom獲得view的某個(gè)約束；
在約束的block中，使用make來(lái)給當(dāng)前控件添加約束。

您可能感興趣的文章: