Masonry学习报告

Masonry 源码：https://github.com/Masonry/Masonry

如果是使用cocoa pod管理第三方库时，在Podfile文件里输入：

然后pod install即可

Masonry是一个用更好的语法包装自动布局的轻量级的布局框架，它拥有自己的布局描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性，同时支持 iOS 和 Max OS X。

以下是Masonry提供的属性，其中leading、trailing和baseline基本不会用到，暂时搁置一边不进行深入了解。

@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;   //首部

@property (nonatomic, strong, readonly) MASConstraint *trailing;   //尾部

@property (nonatomic, strong, readonly) MASConstraint *width;     //宽

@property (nonatomic, strong, readonly) MASConstraint *height;    //高

@property (nonatomic, strong, readonly) MASConstraint *centerX;  //横向居中

@property (nonatomic, strong, readonly) MASConstraint *centerY;  //纵向居中

@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线

接下来是Masonry所提供的进行约束相关操作的3个方法：

//新增约束，不能同时存在两条同样的约束，否则报错

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

//更新约束

- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清除之前的所有约束，只会保留最新的约束

- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

利用这3个函数，基本上可以应对任何情况了

接下来通过写几个例子来学习熟悉Masonry布局：

注意：

在添加约束之前，需要先将视图添加到父视图中，否则运行会出错

1、先是简单地写3个视图居中（视图大小固定）

代码图1

效果图1

2、视图与父视图的边缘的距离（视图大小随着模拟器的不同而变化，与屏幕边缘的距离固定）

对right和bottom的约束值要为负值

代码图2

效果图2

因为黄蓝视图的约束是相对红色视图的，所以改变红色视图的约束时，黄蓝视图也将随着发生变化：

效果图2.2

3、三个视图等间隙竖直排列

代码图3

效果图3

4、随着scrollview的滑动，另一视图位置保持不变

代码图4

效果图4

跟淘宝的商品详情网页的布局类似（个人猜测），在进行详情界面的拖拉时，下方那条含加入购物车和立即购买的视图一直保持在那个位置不变。

总结：Masonry是一款非常容易上手且方便好用的布局库，在学习完Masonry的使用之后，就已经可以立马做出一些简单的例子了，相比之前使用纯代码自己一步步计算各个点各个大小以及距离等等快了非常多，当然Masonry肯定还能实现各种复杂的布局，这需要自己发挥足够的想象力，相信没有什么布局Masonry是做不到的。