Masonry

前言
     #纯手写代码所经历的关于页面布局的三个时期 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 就立马抛弃到一边了 因为实在过于的繁琐和啰嗦(有过经验的朋友肯定有同感)
直到iPhone6发布之后 我知道使用autolayout势在必行了 这时想起了以前在浏览Github看到过的一个第三方库Masonry 在花了几个小时的研究使用后 我就将autolayout掌握了(重点是我并没有学习任何的官方文档或者其他的关于autolayout的知识) 这就是我为什么要写下这篇文章来推荐它的原因.

正文

Masonry创建约束的方法有三个:

//新添加约束 如果之前有相关约束就可能会引起重复添加错误 如果其中一个约束改变 那么必须先卸载之前的约束 再用此方法添加 
1.- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//此方法只能用在约束没有改变参照的情况下 更新相关约束
2.- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//此方法回清空之前所有的约束 重置所有约束 相当于点击了故事板中的Clear Constraints
3.- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
  • 方法1是最常用也是用在最简单场景下的,例如我给一个UIImageView设定一个约束,
    [self.view addSubview:self.iconView]; [self.iconView mas_makeConstraints:^(MASConstraintMaker *make) { //设定iconView的水平中心与控制器view水平中心重合,底部距离控制器view上部160,宽高都为85 make.centerX.equalTo(self.view); make.bottom.equalTo(self.view).offset(-160); make.width.height.equalTo(@85); }];
    实际效果

    Paste_Image.png

  • 方法2是在某个约束需要被改变的时候,并且特别注意的是约束的参照不变的情况下了,约束参照如果改变的话会发生错误,下文举例。下面举个简单的动画,详述此方法
    // 第一个方法中列子已经添加了约束,那么我想做一个iamgeView向上的动画,更新约束 参照不能变 只能改变constant常数值
    [self.iconView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.view).offset(-([UIScreen mainScreen].bounds.size.height - 160));
    }];
    //改变了iamgeView的约束再运用一个简单的UIView动画 调用layoutifneed就可以了,
    //但要注意的是AutoLayout动画必须调用 layoutIfNeeded,layoutIfNeeded会根据约束重新设置frame
    [UIView animateWithDuration:5 delay:0.5 usingSpringWithDamping:0.2 initialSpringVelocity:2 options:0 animations:^{
    [self.view layoutIfNeeded];
    } completion:^(BOOL finished) {
    NSLog(@"动画完成"); }];
    实际效果(动画效果参数在UIView动画中设置)

    Paste_Image.png

  • 方法3是相当于先清除了所有约束然后根据你设置的约束确定控件的frame此处不再赘述,下面举例一种情况,在cell自适应高度中经常通过设置contentiVew的底部约束,这里就通过改变其底部约束其它约束不变的方法,达到tableViewCell高度自适应。
    首先简单结束一下tabelViewcell高度自适应的步骤:iOS8中引入一个UITableView的一项新功能 — selfSizeingCells:
    1.为原型单元格定义AutoLayout约束 contentView必须有底部依赖
    3.设置预估行高,tableView.estimatedRowHeight;
    2.指定tableView.rowHeight = UITableViewAutomaticDimension

  //此处首先需要设置一个全局变量记录
  @property (nonatomic, strong) MASConstraint *contentViewbottomConstraint;
  //搞一个全局属性接收contentView的底部约束 在需要卸载的地方卸载这个全局属性约束
    self.contentViewbottomConstraint = make.bottom.equalTo(self.view).offset(-160);
    make.width.height.equalTo(@85);
    }];

    // 在需要contenView改变其底部参照的时候,首先把刚才接收的全局变量卸载,再为   contenView添加新的底部参照和底部约束,这样contenView可以实现自适应,自定义cell高                     
    //  度也就实现了自适应
    [self.contentViewbottomConstraint uninstall];
    [self.iconView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.button.mas_bottom).offset(100);
      }];
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容