masonry使用方法，masonry布局多控件横向或纵向一次性布局

使用Masonry进行横向或者纵向的多控件的规律性布局。 使用：
    

/**     <#(MASAxisType)#> 为 MASAxisTypeHorizontal 时：     即横向排列:withFixedItemLength 控件宽度              leadSpacing         首个控件的left              tailSpacing         末尾控件的right          <#(MASAxisType)#> 为 MASAxisTypeVertical 时：     即纵向排列:withFixedItemLength 控件宽度              leadSpacing         首个控件的top              tailSpacing         末尾控件的bottom     */        [viewArrs mas_distributeViewsAlongAxis:<#(MASAxisType)#> withFixedItemLength:<#(CGFloat)#> leadSpacing:<#(CGFloat)#> tailSpacing:<#(CGFloat)#>];            /**    <#(MASAxisType)#> 为 MASAxisTypeHorizontal 时：    即横向排列:withFixedSpacing 相邻两个控件之间的间距             leadSpacing      首个控件的left             tailSpacing      末尾控件的right        <#(MASAxisType)#> 为 MASAxisTypeVertical 时：    即纵向排列:withFixedSpacing 相邻两个控件之间的间距             leadSpacing      首个控件的top             tailSpacing      末尾控件的bottom     */    [viewArrs mas_distributeViewsAlongAxis:<#(MASAxisType)#> withFixedSpacing:<#(CGFloat)#> leadSpacing:<#(CGFloat)#> tailSpacing:<#(CGFloat)#>];

需要注意的是：这两个方法中的控件必须是2个极其以上。masonry中有明确规定，否则这里会崩溃。

#import "NSArray+MASAdditions.h"    if (self.count < 2) {        NSAssert(self.count>1,@"views to distribute need to bigger than one");        return;    }

所以，当对一个控件进行布局时：还是老老实实的用

mas_makeConstraints:<#^(MASConstraintMaker *make)block#>

 或着自带的

 initWithFrame:<#(CGRect)#> 

方法。


下面是我写的栗子:


EG1:

/**     MASAxisTypeHorizontal  横向排列     */   NSMutableArray *viewArrs = [[NSMutableArray alloc]init];    for (int i = 0; i < 4; i ++) {        UIButton *btn = [[UIButton alloc]init];        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];        [btn setBackgroundColor:[UIColor blueColor]];        [btn setTitle:[NSString stringWithFormat:@"横向 %d",i] forState:UIControlStateNormal];        [self.view addSubview:btn];        [viewArrs addObject:btn];    }        [viewArrs mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:2.0 leadSpacing:10.0 tailSpacing:10.0];    [viewArrs mas_makeConstraints:^(MASConstraintMaker *make) {        make.top.equalTo(self.view).offset(30);        make.height.equalTo(50);    }];

    
这个是blueColor背景的横向Btn布局，采用的是相邻控件固定间距的布局；父控件是self.view， 所以leadSpacing和tailSpacing 分别为距离屏幕左、右的间距。tailSpacing不需要携程负数，Masonry会自己处理。

#import "NSArray+MASAdditions.h"    if (i == self.count - 1) {//last one        make.right.equalTo(tempSuperView).offset(-tailSpacing);    }

EG2：

/**     MASAxisTypeVertical  纵向排列     */    viewArrs = [[NSMutableArray alloc]init];    for (int i = 0; i < 4; i ++) {        UIButton *btn = [[UIButton alloc]init];        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];        [btn setBackgroundColor:[UIColor orangeColor]];        [btn setTitle:[NSString stringWithFormat:@"纵向 %d",i] forState:UIControlStateNormal];        [self.view addSubview:btn];        [viewArrs addObject:btn];    }        [viewArrs mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:6.0 leadSpacing:90.0 tailSpacing:10.0];    [viewArrs mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.equalTo(self.view).offset(20);        make.width.equalTo(80);    }];

这个是orangeColor背景的纵向Btn布局，采用的是相邻控件固定间距的布局；父控件是self.view， 所以leadSpacing和tailSpacing 为收个控件的top、和buttom、


EG3:

/**     MASAxisTypeVertical  纵向排列     */    viewArrs = [[NSMutableArray alloc]init];        UIButton *btn = [[UIButton alloc]init];    [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];    [btn setBackgroundColor:[UIColor orangeColor]];    [btn setTitle:@"btn" forState:UIControlStateNormal];    [self.view addSubview:btn];    [viewArrs addObject:btn];        UILabel *label = [[UILabel alloc]init];    [label setText:@"Lab"];    [label setBackgroundColor:[UIColor orangeColor]];    [self.view addSubview:label];    [viewArrs addObject:label];    UIImageView *imgView = [[UIImageView alloc]init];    [imgView setBackgroundColor:[UIColor orangeColor]];    [imgView setImage:[UIImage imageNamed:@"pat_limit_icon"]];    [self.view addSubview:imgView];    [viewArrs addObject:imgView];        [viewArrs mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:90.0 leadSpacing:90.0 tailSpacing:10.0];    [viewArrs mas_makeConstraints:^(MASConstraintMaker *make) {        make.leading.equalTo(self.view).offset(110);        make.width.equalTo(80);    }];

这个栗子同样是orangeColor背景的纵向布局，不同的是viewArrs 由全部UIButton 变成了 三个不同控件（UIButton、UILabel、UIImageView）；
效果图如下：


看起来两个纵向的两中布局效果比较相似、其实还是有区别的、横屏之后就看出来了。如图：




采用固定间距的布局（纵向左1） 控件的大小发生了改变、容易引发控件高度过小，影响美观度和操作度。
采用固定大小的布局（纵向左2） 控件的间距发生了改变、容易引发控件之间相互连接或者覆盖住。
下图是我把控件调到40个的界面样式、

所以在布局时、应结合相应的情况来选择至合适的方法。

自己Mark一下。