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

  下载

  NSLayoutConstraints的缺点

  NSLayoutConstraints是一个强大且灵活的自动布局架构,可是通过代码创建的约束是十分冗余,下面我们通过一段代码来实现你想要一个视图铺满它的父视图。但是边距为10

 

  1. UIView *superview = self;
  2.  
  3. UIView *view1 = [[UIView alloc] init];
  4. view1.translatesAutoresizingMaskIntoConstraints = NO;
  5. view1.backgroundColor = [UIColor greenColor];
  6. [superview addSubview:view1];
  7.  
  8. UIEdgeInsets padding = UIEdgeInsetsMake(, , , );
  9.  
  10. [superview addConstraints:@[
  11.  
  12. //view1 constraints
  13. [NSLayoutConstraint constraintWithItem:view1
  14. attribute:NSLayoutAttributeTop
  15. relatedBy:NSLayoutRelationEqual
  16. toItem:superview
  17. attribute:NSLayoutAttributeTop
  18. multiplier:1.0
  19. constant:padding.top],
  20.  
  21. [NSLayoutConstraint constraintWithItem:view1
  22. attribute:NSLayoutAttributeLeft
  23. relatedBy:NSLayoutRelationEqual
  24. toItem:superview
  25. attribute:NSLayoutAttributeLeft
  26. multiplier:1.0
  27. constant:padding.left],
  28.  
  29. [NSLayoutConstraint constraintWithItem:view1
  30. attribute:NSLayoutAttributeBottom
  31. relatedBy:NSLayoutRelationEqual
  32. toItem:superview
  33. attribute:NSLayoutAttributeBottom
  34. multiplier:1.0
  35. constant:-padding.bottom],
  36.  
  37. [NSLayoutConstraint constraintWithItem:view1
  38. attribute:NSLayoutAttributeRight
  39. relatedBy:NSLayoutRelationEqual
  40. toItem:superview
  41. attribute:NSLayoutAttributeRight
  42. multiplier:
  43. constant:-padding.right],
  44.  
  45. ]];

  即使一个简单的例子所需的代码都相当冗长,当你有超过 2 或 3 视图时变得不可读,另一种选择是使用可视化格式语言 (VFL),有点不太冗长。然而,ASCII 类型语法上有它自己的陷阱并且作为 NSLayoutConstraint constraintsWithVisualFormat: 添加动画效果 返回一个数组也有点难。

  Masonry的优点

  下面是使用MASConstraintMaker创建同样的约束

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[self.subview mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self.view.mas_top).with.offset(padding.top);

make.left.equalTo(self.view.mas_left).with.offset(padding.left);

make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);

make.right.equalTo(self.view.mas_right).with.offset(-padding.right);

}];

  更短代码实现

  1. [self.subview mas_makeConstraints:^(MASConstraintMaker *make) {
  2. make.edges.equalTo(self.view).with.insets(padding);
  3. }];

此外还需注意使用NSLayoutConstraints时调用了[superview addConstraints:... ] 方法,在Masonry库中是自动向当前视图添加约束的,我们也可以通过self.subview.translatesAutoresizingMaskIntoConstraints = NO来手动设置。

  并不是所有创建都一样

.equalTo               等价于 NSLayoutRelationEqual

.lessThanOrEqualTo      等价于  NSLayoutRelationLessThanOrEqual

.greaterThanOrEqualTo 等价于  NSLayoutRelationGreaterThanOrEqual

  这些三个等式约束可以是下列任一操作作为一个参数

1. MASViewAttribute

MASViewAttribute NSLayoutAttribute
view.mas_left NSLayoutAttributeLeft
view.mas_right NSLayoutAttributeRight
view.mas_top NSLayoutAttributeTop
view.mas_bottom NSLayoutAttributeBottom
view.mas_leading NSLayoutAttributeLeading
view.mas_trailing NSLayoutAttributeTrailing
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX
view.mas_centerY NSLayoutAttributeCenterY
view.mas_baseline NSLayoutAttributeBaseline
  1.  

2. UIView/NSView

如果你想要view.left大于或等于label.left可以

make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);

3. NSNumber

自动布局允许宽度和高度设置为常量值。如果你想要将视图具有最小值和最大宽度设置你可以

  1. //width >= 200 && width <= 400
  2. make.width.greaterThanOrEqualTo(@);
  3. make.width.lessThanOrEqualTo(@)

然而自动布局不允许对齐属性如左对齐、 右对齐,centerY等将设置为常量值

  1. //creates view.left = view.superview.left + 10
  2. make.left.lessThanOrEqualTo(@)
  1. make.top.mas_equalTo();
  2. make.height.mas_equalTo();
  3. make.size.mas_equalTo(CGSizeMake(, ));
  4. make.edges.mas_equalTo(UIEdgeInsetsMake(, , , ));
  5. make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(, , , ));

您可以使用基元和结构打造你的约束替代 NSNumber。默认情况下,支持自动装箱的宏均以 mas_ 作为前缀。没有前缀的版本均可通过导入之前定义 MAS_SHORTHAND_GLOBALS。

4. NSArray

  1. make.height.equalTo(@[view1.mas_height, view2.mas_height]);
  2. make.height.equalTo(@[view1, view2]);
  3. make.left.equalTo(@[view1, @, view3.right]);

  

  优先原则

.priority 允许你指定优先级

.priorityHigh等价于 UILayoutPriorityDefaultHigh高优先级

.priorityMedium 中等优先级

.priorityLow 等价于 UILayoutPriorityDefaultLow

  1. make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
  2.  
  3. make.top.equalTo(label.mas_top).with.priority();

组成

Masonry也提供了几个方便的方法,同时创建多个约束,被称为 MASCompositeConstraints。

edges

  1. // make top, left, bottom, right equal view2
  2. make.edges.equalTo(view2);
  3.  
  4. // make top = superview.top + 5, left = superview.left + 10,
  5. // bottom = superview.bottom - 15, right = superview.right - 20
  6. make.edges.equalTo(superview).insets(UIEdgeInsetsMake(, , , ))

center

  1. // make centerX and centerY = button1
  2. make.center.equalTo(button1)
  3.  
  4. // make centerX = superview.centerX - 5, centerY = superview.centerY + 10
  5. make.center.equalTo(superview).centerOffset(CGPointMake(-, ))
  1. // All edges but the top should equal those of the superview
  2. make.left.right.and.bottom.equalTo(superview);
  3. make.top.equalTo(otherView);

Masonry自动布局使用的更多相关文章

  1. Masonry自动布局

    介绍,入门: http://www.cocoachina.com/ios/20141219/10702.html 下载: http://code.cocoachina.com/detail/30114 ...

  2. Masonry自动布局与UIScrolView适配

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

  3. Masonry自动布局:复合约束

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  4. IOS Masonry自动布局

    之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...

  5. 【iOS】Masonry 自动布局 MASViewConstraint.m:207 错误

    问题详情: Assertion failure 报错原因: make.right.equalTo([_imageView superview]).right.with.offset(-); make. ...

  6. Coding源码学习第四部分(Masonry介绍与使用(三))

    接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 #import "TableViewController.h" #import "Tes ...

  7. masonry使用问题

    2015年11月3日 coreData的学习练习中复习使用masonry自动布局 masonry自动布局发现问题: 两个控件的相对布局: 如果被参考对象用这个带anchor的属性,就会报这样一个错误: ...

  8. iOS masonry 不规则tagView布局 并自适应高度

    在搜索页面经常会有不规则的tag出现,这种tagView要有点击事件,单个tagView可以设置文字颜色,宽度不固定根据内容自适应,高度固定,数量不固定.总高度就不固定.最近对于masonry的使用又 ...

  9. Masonry学习札记

    Masnory学习札记 在之前的文章里有草草提到过Masonry自动布局,可这么重要第三方布局框架的怎么可以怎么随便带过呢!昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分,所以趁热打铁写 ...

随机推荐

  1. How to convert a byte to its binary string representation

    How to convert a byte to its binary string representation For example, the bits in a byte B are 1000 ...

  2. 如何在Windows服务程序中添加U盘插拔的消息

    研究了下这个问题,主要要在一般的windows服务程序中修改两个地方: 一.调用RegisterServiceCtrlHandlerEx VOID WINAPI SvcMain( DWORD dwAr ...

  3. Android 和 iOS 应用程序开发对比 [持续更新]

    1.Android 用字典模式统一管理应用程序中UI上用到的所有字符串. 比如文本框的默认文本.按钮的名字等等.表现形式:XML文件 Android中 "@string/text_filed ...

  4. winform 给textbox 增加 或 减小字体大小 z

    private void btnAddFont_Click(object sender, EventArgs e) { float fSize = this.txtResult.Font.Size; ...

  5. 自定义兼容多种Protobuf协议的编解码器

    <从零开始搭建游戏服务器>自定义兼容多种Protobuf协议的编解码器 直接在protobuf序列化数据的前面,加上一个自定义的协议头,协议头里包含序列数据的长度和对应的数据类型,在数据解 ...

  6. hdu2444The Accomodation of Students (最大匹配+推断是否为二分图)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...

  7. 1.1.6版本Druid连接MSSQLServer 2008 R2报错The query timeout value -1 is not valid. #2210

    https://github.com/alibaba/druid/releases/tag/1.1.8问题已修复,请使用新版本 xhhwc commented on 21 Dec 2017 1.1.6 ...

  8. SVG 文字居中整理

    一.基于SVG文档的文字居中 text-anchor: middle; //水平方向居中 dominant-baseline: middle; //垂直居中 1.使用内联样式配置居中 <svg ...

  9. Svg.Js 父类的基础操作

    一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...

  10. Html、Asp、Php、Jsp禁止页面缓存

    html:<meta http-equiv="pragma" content="no-cache"><meta http-equiv=&quo ...