美文网首页
Masonry基础介绍

Masonry基础介绍

作者: 云飞君 | 来源:发表于2016-08-23 23:25 被阅读15次

    前言

    MagicNumber -> autoresizingMask -> autolayout

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

    在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了

    在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变

    在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单的适配一下即可

    在iphone6+时代 window的width也发生了变化(相对5和5s的屏幕比例没有变化) 终于是时候抛弃autoresizingMask改用autolayout了(不用支持ios5了 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)

    那如何快速的上手autolayout呢? 说实话 当年ios6推出的同时新增了autolayout的特性 我看了一下官方文档和demo 就立马抛弃到一边了 因为实在过于的繁琐和啰嗦(有过经验的朋友肯定有同感)

    介绍

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

    我们先来看一段官方的sample code来认识一下Masonry

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

               make.edges.equalTo(superview).with.insets(padding);

    }];

    看到block里面的那句话: make edges equalTo superview with insets

    通过链式的自然语言 就把view1给autolayout好了 是不是简单易懂?

    使用

    看一下Masonry支持哪一些属性

    @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中能够添加autolayout约束有三个函数

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

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

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

    /*

    mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错

    mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况

    mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束

    三种函数善加利用 就可以应对各种情况了

    */

    相关文章

      网友评论

          本文标题:Masonry基础介绍

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