美文网首页
Masonry学习报告

Masonry学习报告

作者: Vison丶H | 来源:发表于2017-05-09 15:06 被阅读0次

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是做不到的。

相关文章

  • Masonry学习报告

    Masonry 源码:https://github.com/Masonry/Masonry 如果是使用cocoa ...

  • Masonry学习

    Masonry是一个轻量级的OC布局框架, 拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了,并具有...

  • masonry学习

    如果不加入MAS_SHORTHAND_GLOBALS那么equalTo代表的是一个函数 这个函数还没有组装数据结构...

  • masonry学习

    使用: 1,先创建一个View 2,添加到父视图上 3,设置约束 4,创建了一个新的View,添加到上一个view...

  • Masonry 学习

    现在iPhone手机屏幕越来越多, 屏幕适配也越来越重要. Masonry就是为屏幕适配而生的三方框架. Maso...

  • iOS Autolayout之Masonry解读

    Masonry Masonry是公认非常简洁优美的一款Autolayout框架 我推荐大家重点学习这个框架 我会把...

  • iOS - Masonry使用中的一些整理

    [置顶]iOS - Masonry使用中的一些整理 标签:iOS资源大全iOS常用方法iOS学习资料Masonry...

  • Masonry 介绍 2018-01-29

    介绍 Masonry 源码:https://github.com/Masonry/Masonry Masonry是...

  • 关于Masonry小记

    Masonry 源码:https://github.com/Masonry/Masonry Masonry是一个轻...

  • Masonry的用法

    Masonry 源码:https://github.com/Masonry/Masonry; 看一下Masonry...

网友评论

      本文标题:Masonry学习报告

      本文链接:https://www.haomeiwen.com/subject/ndpbtxtx.html