Masonry的基本使用

1

MagicNumber -> autoresizingMask -> autolayout

以上是纯手写代码所经历的关于页面布局的三个时期

在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size变，我们只需要简单计算一下相对位置就好了

在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场， 简单的适配一下即可

在iphone6+时代 window的width、height都发生了变化， 终于在这时候Autolayout走上了主流舞台。

Masonry是目前主流的自动布局的第三方库，对于屏幕旋转的自适应也做的很好，现在根据目前的项目简要的介绍一下这个第三方库的基本使用方法，后续如果有更多的使用途径，我会持续更新该博文。
下面的代码可能有点乱，但我每块内容都用注释隔开了，有兴趣的话仔细耐心看一下，基本的用法和知识点都在里面。

**

基本属性

**

left; 左
top; 上
right; 右
bottom; 下
leading; 左
trailing; 右
width; 宽
height; 高
centerX; x轴中心
centerY; y轴中心
baseline; 基线，没怎么用过

leftMargin; 左边默认边距好像是20，下面的类似
rightMargin;
topMargin;
bottomMargin;
leadingMargin;
trailingMargin;
centerXWithinMargins;
centerYWithinMargins;

----------- 分割线 ----------

edges;4周
size;大小
center;中心
----------- 分割线 ----------

自动根据bar 高度设置的引导属性值，举个例子：
存在navigationBar 时，mas_topLayoutGuideBottom 相当于 增加了44。
不存在navigationBar 时，mas_topLayoutGuideBottom 相对于 0 。

mas_topLayoutGuide;// navgationBar 相关，
mas_topLayoutGuideTop;
mas_topLayoutGuideBottom;

mas_bottomLayoutGuide;// tabbar toolbar 相关
mas_bottomLayoutGuideTop;
mas_bottomLayoutGuideBottom;

**

基本的使用方法

**

UIView *sv = [UIView alloc] init];
sv.backgroundColor = [UIColor blackColor];
[self.view addSubview: sv];//先添加，再约束
[sv mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(ws.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));                  make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];
    /*
    make.top.equalTo(sv).with.offset(10);
    make.left.equalTo(sv).with.offset(10);
    make.bottom.equalTo(sv).with.offset(-10);
    make.right.equalTo(sv).with.offset(-10);
    */

UIView *rightView = [UIView alloc] init];
rightView = [UIColor blueColor];
[rightView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(letfView);// rightView 上边 = leftView 上边（即上边对齐）
        make.right.mas_equalTo(self.view).mas_offset(-10);// rightView 右边 = self.view 右边 - 10
        make.left.mas_equalTo(letfView.mas_right).mas_offset(10);// rightView 左边 = leftView 右边 + 20
        make.width.mas_equalTo(letfView);// rightView 宽 = leftView 宽
        make.height.mas_equalTo(letfView);// rightView 高 = leftView 高
    }];




//mas_equalTo(XXX) 的 mas_width 与 width 比较
// mas_ 前缀的 是宏定义，封装好了直接可以使用 NSInteger，
// 而没有前缀的 需要使用 NSNumber
        make.width.mas_equalTo(100);
        make.width.equalTo(@100);



//mas_offset 与 with.offset 相比较
UIEdgeInsets edg = UIEdgeInsetsMake(10, 20, 30, 40);
    [self.letfView mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.mas_equalTo(self.view).mas_offset(edg);       make.edges.mas_equalTo(self.view).with.insets(edg);
    }];
// 使用 with. 需要区分 offset、insets、sizeOffset、centerOffset，分别使用偏移。
// 使用mas_offset 自动区分了上面的几种情况，自动匹配了
/*
关于 偏移 可以继续研究CoreGraphice 框架中的 CGGeometry,下次在写。
*/


定义以下两个宏,在使用Masonry框架时就不需要加mas_前缀了
(定义宏一定要在引入Masonry.h文件之前).
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS


//Masonry经常使用的三个方法，是三个block
[自定义的view mas_makeConstraints:^(MASConstraintMaker *make) {
    }];

[自定义的view mas_updateConstraints:^(MASConstraintMaker *make) {
    }];

[自定义的view mas_remakeConstraints:^(MASConstraintMaker *make) {
    }];
/*
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错 
mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
三种函数善加利用 就可以应对各种情况了
*/



//更新约束
[topView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.view).mas_offset(300);
    }];



 //使用Masonry添加兄弟控件约束不需要考虑父控件.
   [letfView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.offset(20);
        make.bottom.offset(-20);
        make.trailing.equalTo(rightView.mas_leading).offset(-20);
        make.height.equalTo(@100);
        make.height.equalTo(rightView.mas_height);
    }];

    [rightView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.trailing.equalTo(self.view.mas_trailing).offset(-20);
        make.top.equalTo(letfView.mas_top);
        make.width.equalTo(letfView.mas_width);
    }];

    对于比例的使用

 //对同一个控件设置宽高比， width/height比为1/3，要求是同一个控件的属性比例
    [bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.mas_equalTo(bottomView);
        make.center.mas_equalTo(bottomView);
        // 注意，这个multipliedBy的使用只能是设置同一个控件的，比如这里的bottomInnerView，
        // 设置高/宽为3:1
        make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);    

//dividedBy()，除以某个量，用以实现按比例设置约束；multipliedBy()则是乘以某个量

  //设置优先级，priorityLow是系统中的，表示优先级最低，        make.width.height.mas_equalTo(bottomView).priorityLow();
make.top.mas_equalTo(self.topView.mas_bottom).priority(999);   
//可以自己写优先值，越大越优先（1000 是xib 默认值，也是系统默认最大值。）
    }];


//equalTo()内填写数组，可以实现对多个控件添加同一约束
make.height.equalTo(@[redView,greenView]);

//固定约束是与其他控件没有联系的，本质上和设置控件的frame差别不大。
[redView makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(CGPointMake(0, 50));
        make.size.equalTo(CGSizeMake(200, 100));
    }];

当存在多条相同意义的约束时，可以设置约束的优先级。
[redView makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.and.right.equalTo(self.view);
        make.height.greaterThanOrEqualTo(100).with.priorityHigh();//高小于等于100，约束优先级高
        make.height.equalTo(500).with.priorityLow();//高为500，约束优先级低
    }];

    [blueView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(redView.bottom);
        make.left.and.right.equalTo(redView);
        make.bottom.equalTo(self.view);
        make.height.equalTo(self.view).with.priorityHigh();//高占满全屏，约束优先级高
    }];
    /**
     因为约束存在优先级，所以编译器会做出如下判断：
     首先，蓝色视图的高要占满全屏；
     其次，红色视图的高至少要有100；
     最后，红色视图的高为500；
     但由于前两条约束已经完成了视图的布局，所以便忽略了优先级较低的约束。
     */