Masonry学习札记

Masnory学习札记

　　在之前的文章里有草草提到过Masonry自动布局，可这么重要第三方布局框架的怎么可以怎么随便带过呢！昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分，所以趁热打铁写下了这篇札记，记录一下方便日后回忆。

一、概念

　　Autolayout最重要的是约束：UI元素之间关系的数学表达式。约束包括尺寸、由优先级和阈值管理的相对位置。但约束冲突和约束不足都会造成布局无法确定，从而产生异常报错。

　　Masonry是公认非常简洁优美的一款Autolayout框架，也是纯手写代码关于页面布局经历了MagicNumber -> autoresizingMask -> autolayout三个时期后的优秀产物。在Apple的Developer的官方文档中是这么描述Auto Layout的，“Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.”（自动布局根据视图上的约束动态计算视图层次结构中所有视图的大小和位置）。Masonry作为一个轻量级的布局框架 ，拥有自己的描述语法 ，采用更优雅的链式语法封装自动布局， 简洁明了 并具有高可读性， 而且同时支持 iOS 和 Max OS X。【此处要区别于jsp、html等其他环境下的Masonry，我将要描述的是在ios开发环境下的Masonry】。虽然在.storyboard的Interface Bulider Document面板上有Auto Layout的选项，但在实际项目中往往是团队合作此时控件拖拽的开发模式就被摒弃了，因为纯手写代码更容易规范化也易于团队协作，这样Masonry的好处就显露出来了。

二、使用

1.Masonry 支持的属性与NSLayoutAttrubute的对照表

2.基本使用

• mas_makeConstraints:添加约束
• mas_updateConstraints：更新约束、亦可添加新约束（需触发）

• mas_remakeConstraints：重置之前的约束

• multipler属性表示约束值为约束对象的乘因数, dividedBy属性表示约束值为约束对象的除因数，可用于设置view的宽高比

• priorityLow()设置约束优先级
• #define MAS_SHORTHAND_GLOBALS 使用全局宏定义，可以使equalTo等效于mas_equalTo
• #define MAS_SHORTHAND 使用全局宏定义, 可以在调用masonry方法的时候不使用mas_前缀

　　--注意约束视图对象只有在被addSubview之后，才能给视图添加约束--

3.项目中的例子

　　为了适应可以动态变化的页面，我给注册按钮增加了布局约束的更新操作。实现效果如下：

　　

    //未展开情况下的注册按钮的masonry

      [self addSubview:_registerBtn];//添加约束对象
     [_registerBtn mas_makeConstraints:^(MASConstraintMaker *make) {//添加约束
         make.top.equalTo(_password.mas_bottom).offset( * kScaleH);
         make.left.equalTo(self).offset();
         make.right.equalTo(self).offset(-);
         make.height.mas_equalTo();
     }];
       [_referrerBtn addTarget:self action:@selector(registerBtnClicked:) forControlEvents:UIControlEventTouchUpInside];

     //展开后收起按钮的设置
     UIButton *arrow=[[UIButton alloc]init];
     [arrow setImage:[UIImage imageNamed:@"log_ic_triangle_up.png"] forState:UIControlStateNormal];
     [arrow addTarget:self action:@selector(closeClick:) forControlEvents:UIControlEventTouchUpInside];
     [rf addSubview:arrow];
     [arrow mas_makeConstraints:^(MASConstraintMaker *make){
         make.centerY.equalTo(rf);
         make.right.equalTo(rf).offset(-*kScaleH);
         make.height.mas_equalTo();
     }];

     //打开推荐人cell
 -(void)openClick:(UIButton *)sender{
     _referrerBtn.hidden=YES;
     rf.hidden=NO;
     [_registerBtn mas_updateConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(_password.mas_bottom).offset( * kScaleH);
     }];
 }

 //收起推荐人cell
 -(void)closeClick:(UIButton *)sender{
     _referrerBtn.hidden=NO;
     rf.hidden=YES;
     [_registerBtn mas_updateConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(_password.mas_bottom).offset( * kScaleH);
     }];
 

参考网页：Masonry介绍与使用实践、iOS Autolayout之Masonry解读、Masonry使用注意篇、iOS Auto Layout官方文档

Mac Gif制作软件良心推荐：Giphy Capture (免费)【好看又好用，最关键免费啊！！！】