备案控制台
探索云世界
开发者社区 云原生 文章 正文

Masonry整理

2017-11-22 1287
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

Masonry整理

Masonry是以AutoLayout为基础的轻量级布局框架更加简化了整个约束系统

Masonry三方下载
本文参考：
   地址1
   地址2
   地址3
   地址4

*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

(NSArray )mas_makeConstraints:(void(^)(MASConstraintMaker ))block;
(NSArray )mas_updateConstraints:(void(^)(MASConstraintMaker ))block;
(NSArray )mas_remakeConstraints:(void(^)(MASConstraintMaker make))block;

 /**
     *  mas_makeConstraints  只负责添加约束 AutoLayout不能同时存在两条针对同一对象的约束否则会报错
     *  mas_updateConstraints  针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
     *  mas_remakeConstraints  清除之前所有的约束只保留新的约束
     *
     *  三种函数要配合使用
     */

重点：
使用mas_makeConstrains方法的元素必须事先添加到父视图中

  • mas_equalTo和equalTo区别：前者比后者多了类型转换操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封装，equalTo适用于基本数据类型，而mas_equaalTo适用于类似UIEdgeInsetsMake 等复杂类型，基本上它可以替换equalTo。

  • 上左为正 下右为负 是因为坐标而来的 视图坐标左上为原点 X向右为正 Y向下为正

举例比较：
Make.left.equalTo(@64) 可以这么写才可以 字面量
make.left.mas_equalTo(64); 而mas_equalTo可以不用字面量

  1. 先试一下：一个View居中

 // 防止block循环引用
    __weak typeof (self)weakSelf = self;    UIView *yellow = [UIView new];
    yellow.backgroundColor = [UIColor yellowColor];// 切记添加到父视图中
    [self.view addSubview:yellow];
    [yellow showPlaceHolder];    /**
     *  设置约束
     *  使用mas_MakeConstraints:添加约束
     */
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {        // 1.make就是添加约束的控件
        // make.left.equalTo 的意思是左侧和谁相同 .offset则是偏移量 上左[为正]下右[为负] 
        make.top.equalTo(self.view.mas_top).offset(30);// 和父视图顶部间距30
        make.left.equalTo(self.view.mas_left).offset(30);// 和父视图左边间距30
        make.bottom.equalTo(self.view.mas_bottom).offset(-30);// 和父视图底部间距30
        make.right.equalTo(self.view.mas_right).offset(-30);// 和父视图右边间距30

        // 2. 2等价于1 edges边缘的意思 
        make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 30, 30, 30));        // 3. 还等价于
        make.top.left.bottom.and.right.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 30, 30, 30));      // 4.此处给yellow一个size 且让其居中make.size.mas_equalTo(CGSizeMake(300, 300));
make.center.equalTo(self.view);

    }];

size还可以这么写两者也相同

make.size.mas_equalTo(self.view).offset(-20);make.size.equalTo(self.view).offset(-20);

居中：

 make.centerX.equalTo(self.view.mas_centerX); make.centerY.equalTo(self.view.mas_centerY);

等同于：
make.center.mas_equalTo(self.view);

  1. 两个view

  2. 例1

1240

如图

1240

如图

  [green mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(200, 120));// green大小
        make.top.mas_equalTo(green.superview).offset(100);// green顶部到它父视图的偏移量

        make.bottom.mas_equalTo(yellow.mas_top).offset(-50);// 50如果为正就是green底部到yellow顶部距离为50 为负就是green下边到yellow上边为50
        make.centerX.equalTo(green.superview.mas_centerX);// 中心点的X坐标和父视图中心点的X相同 说人话就是在中间
    }];

    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {

        make.size.mas_equalTo(CGSizeMake(250, 30)); // 给个size
        make.centerX.equalTo(green.mas_centerX);// centerX和green一样



    }];

make.size.equalTo(green);两个view就相同大小
等同于

make.width.equalTo(green.mas_width);make.height.equalTo(green.mas_height);

  • 例2：

1240

两个view

    [green mas_makeConstraints:^(MASConstraintMaker *make) {
        // 添加大小约束
        make.size.mas_equalTo(CGSizeMake(100, 100));
        // 添加左上边距约束
        make.left.and.top.mas_equalTo(20);
    }];

    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        // 大小和上边距约束与green相同
        make.size.and.top.equalTo(green);
        // 添加右边距约束 上左为正下右为负
        make.right.mas_equalTo(-20);
    }];

这里的and和with都没有具体操作只是拿来增加程序可读性

  • 例3：

    1240

    例3

    [green mas_makeConstraints:^(MASConstraintMaker *make) {
      // 左上约束20 右侧约束-20
      make.left.and.top.mas_equalTo(20);
      // 右边约束为-20
      make.right.mas_equalTo(-20);
  }];

  [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
      // 下右约束-20
      make.bottom.and.right.mas_equalTo(-20);
      // 高度和green相同
      make.height.equalTo(green);
      // 顶部到green底部距离为20
      make.top.equalTo(green.mas_bottom).offset(20);
      // 左侧到视图中心的距离为20
      make.left.equalTo(weakSelf.view.mas_centerX).offset(20);
  }];

make.right.equalTo(weakSelf.view).offset(-20);
等同于
make.right.mas_equalTo(-20);

  • 例4:

1240

屏幕快照 2015-12-07 上午9.42.41.png

    UIView *gray = [UIView new];
    gray.backgroundColor = [UIColor grayColor];
    [self.view addSubview:gray];
    [gray showPlaceHolder];

    [gray mas_makeConstraints:^(MASConstraintMaker *make) {        // 左上下距离父视图都为0
        make.left.and.top.and.bottom.mas_equalTo(0);        // 宽度为200
        make.width.mas_equalTo(200);
    }];    UIView *w = [UIView new];
    w.backgroundColor = [UIColor colorWithWhite:0.228 alpha:1.000];
    [w showPlaceHolder];
    [self.view addSubview:w];    UIView *light = [UIView new];
    light.backgroundColor = [UIColor lightGrayColor];
    [light showPlaceHolder];
    [self.view  addSubview:light];

    [w mas_makeConstraints:^(MASConstraintMaker *make) {        // w底部距离父视图centerY的距离为10
        make.bottom.equalTo(weakSelf.view.mas_centerY).mas_equalTo(-10);        // 左侧距离gray距离为20
        make.left.equalTo(gray).offset(20);        // 右侧距离gray距离20
        make.right.equalTo(gray).offset(-20);
        make.height.mas_equalTo(100);
    }];
    [light mas_makeConstraints:^(MASConstraintMaker *make) {        // 顶部距离父视图centerY为10
        make.top.equalTo(weakSelf.view.mas_centerY).mas_equalTo(10);        // 左右和高度与w相同
        make.left.and.right.and.height.equalTo(w);

    }];

上下左右边距

make.top.left.bottom.right.equalTo(weakSelf.view).width.insets(UIEdgeInsetsMake(20, 20, 100, 20));
等价
make.edges.equalTo(weakSelf.view).width.insets(UIEdgeInsetsMake(20, 20, 100, 20));

  • 例5：

    1240

    屏幕快照 2015-12-07 下午3.04.56.png

     [green mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(weakSelf.view.mas_centerY);
        make.left.equalTo(weakSelf.view.mas_left).offset(10);
        make.right.equalTo(yellow.mas_left).offset(-10);
        make.height.mas_equalTo(150);
        make.width.equalTo(yellow);
    }];
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(weakSelf.view.mas_centerY);
        make.left.equalTo(green.mas_right).offset(10);
        make.right.equalTo(weakSelf.view.mas_right).offset(-10);
        make.height.mas_equalTo(@150);
        make.width.equalTo(green);
    }];

  • 例6：

1240

竖屏

1240

横屏

    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        //make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(30, 10, 300, 10));
        make.top.left.equalTo(@20);
        make.right.mas_equalTo(-10);

    }];

    [w mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(20);
        make.bottom.mas_equalTo(weakSelf.view).offset(-20);
        make.height.mas_equalTo(yellow);
        make.top.mas_equalTo(yellow.mas_bottom).offset(20);
        make.width.mas_equalTo(green);
        make.right.mas_equalTo(green.mas_left).offset(-20);

    }];

    [green mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(yellow.mas_bottom).offset(20);
        make.left.equalTo(w.mas_right).offset(20);
        make.right.equalTo(yellow.mas_right);
        make.height.mas_equalTo(or.mas_height);
    }];

    [or mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.mas_equalTo(yellow.mas_top).offset(20);
        make.left.mas_equalTo(yellow.mas_left).offset(30);
        make.width.mas_equalTo(bl.mas_width);

    }];

    [cy mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(or.mas_bottom).offset(30);
        make.left.mas_equalTo(or.mas_left);
        make.height.mas_equalTo(or.mas_height);
        make.width.mas_equalTo(or.mas_width);
        make.bottom.mas_equalTo(yellow).offset(-20);

    }];

    [bl mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(or.mas_top);
        make.left.mas_equalTo(or.mas_right).offset(20);
        make.bottom.mas_equalTo(cy.mas_bottom);
        make.right.mas_equalTo(weakSelf.view.mas_right).offset(-20);

    }];

  • ScrollView

1240

屏幕快照 2015-12-07 下午7.33.20.png

UIScrollView *scr = [UIScrollView new];
    scr.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:scr];
    [scr mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).width.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];

    UIView *container = [UIView new];
    [scr addSubview:container];
    [container mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(scr);
        make.width.equalTo(scr);
    }];    int count = 20;
    UIView *lastView = nil;    for (int i = 0; i <= count; i++) {
        UIView *subView = [UIView new];
        [container addSubview:subView];
        subView.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )saturation:( arc4random() % 128 / 256.0 ) + 0.5 brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:1];
        [subView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.and.right.equalTo(container);
            make.height.mas_equalTo(@(20 * i));            if (lastView) {               // lastView存在时 以其底部为下一个view的顶部
                make.top.mas_equalTo(lastView.mas_bottom);
            } else {                // lastView不存在时 以父视图的顶部为基准
                make.top.mas_equalTo(container.mas_top);
            }
        }];
        lastView = subView;
    }

    [container mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.mas_bottom);
    }];
键盘监听

如图：

1240

屏幕快照 2015-12-07 下午8.55.10.png

1240

屏幕快照 2015-12-07 下午8.55.22.png

mas_updateConstraints 利用它来更新约束
初始时约束：

  [_textField mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(200, 30));
        make.bottom.mas_equalTo(-40);
        make.centerX.equalTo(weakSelf.view.mas_centerX);
    }];

键盘弹出在消息方法里更新约束：

-(void)keyBoardWillShow:(NSNotification*)noti {    // 获取键盘基本信息（动画时长与键盘高度）
    NSDictionary *userInfo = [noti userInfo];    CGRect rect =
    [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];    CGFloat keyboardHeight = CGRectGetHeight(rect);    CGFloat keyboardDuration =
    [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];    // 修改下边距约束
    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(-keyboardHeight);
    }];    // 更新约束

    [UIView animateWithDuration:keyboardDuration animations:^{
        [self.view layoutIfNeeded];
    }];

}

键盘收起时在textField代理方法中再次更新约束

-(void)keyboardWillDisappear:(NSNotification *)noti {    // 获取键盘基本信息（动画时长与键盘高度）
    NSDictionary *userInfo = [noti userInfo];    CGRect rect =
    [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];//    CGFloat keyboardHeight = CGRectGetHeight(rect);
    CGFloat keyboardDuration =[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(-40);
    }];
    [UIView animateWithDuration:keyboardDuration animations:^{
        [self.view layoutIfNeeded];
    }];

}









本文转自 卓行天下  51CTO博客，原文链接：http://blog.51cto.com/9951038/1862750，如需转载请自行联系原作者
文章标签：
容器
余二五
目录
相关文章
小周sir
|
24天前
|
前端开发
CSS动画知识点学习
【4月更文挑战第2天】CSS动画知识点学习
小周sir
19 3
穆雄雄.
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
穆雄雄.
13 0
瑞崽崽崽
|
4月前
|
前端开发
前端知识笔记（三十一）———css实现水波纹效果（水球图）
前端知识笔记（三十一）———css实现水波纹效果（水球图）
瑞崽崽崽
76 0
前端随想
|
6月前
|
前端开发 容器
CSS学习之Grid布局的学习 | 青训营
CSS学习之Grid布局的学习 | 青训营
前端随想
36 0
haihonghong
|
前端开发 Linux 程序员
「CSS」知识点笔记：transition
「CSS」知识点笔记：transition
haihonghong
132 0
「CSS」知识点笔记：transition
征途黯然。
|
前端开发
Chart.js-零碎知识整理
Chart.js-零碎知识整理
征途黯然。
88 0
Chart.js-零碎知识整理
水冗水孚
|
前端开发
23个css动画效果，持续更新中...
23个css动画效果，持续更新中...
水冗水孚
333 0
前端歌谣
|
前端开发
前端知识案例学习1-css实现滚动贴合
前端知识案例学习1-css实现滚动贴合
前端歌谣
45 0
前端知识案例学习1-css实现滚动贴合
在下是云玩家
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记，比较基础。当然即便最基础的东西也欢迎各路高手指点，以防地基不稳大厦崩塌hhh
在下是云玩家
117 1
CSS基础1 | 青训营笔记
OBKoro1
|
前端开发 JavaScript
关于 CSS 的零碎知识点
写在前面： 这篇文章是本人学习过程中遇到css的零碎知识点2（就是以前自己不知道的），我都记下来了，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有所帮助。本文的受众是前端小白，大手子可以跳过。 1.scss编译css文件使用中文注释出现乱码： 在文件开头部分加上：@charset &quot;UTF-8&quot;; 注意：这里必须要加在文件开头部分，加在文件中部和结尾部分是无效的。 2.HTML input标签的 maxlength 属性 定义和用法： maxlength 属性规定输入字段的最大长度，以字符个数计。 maxlength 属性与 input type=&quot;text&quot; 或 input t
OBKoro1
157 0
关于 CSS 的零碎知识点

热门文章

最新文章

  • 1
    Linux查看进程的内存占用情况
  • 2
    大咖云集，技术宅开趴倒计时 —— 2017 Kubernetes Meetup | 成都站
  • 3
    ubuntu安装KVM虚拟机管理virt-manager
  • 4
    OpenCV4之C++入门详解 （上）
  • 5
    vue2中computed中无法获取到this
  • 6
    Visual Basic快速入门
  • 7
    HDU 4968 Improving the GPA
  • 8
    这56家公司共同发力智慧城市
  • 9
    书写高质量JavaScript代码的要义（The Essentials of Writing High Quality JavaScript）翻译
  • 10
    linux驱动开发--字符设备：信号量
  • 1
    【软件工程】融通未来的工艺：深度解析统一过程在软件开发中的角色
    14
  • 2
    IBM SPSS Modeler分类决策树C5.0模型分析空气污染物数据
    13
  • 3
    【软件工程】走进瀑布模型：传统软件开发的经典之路
    13
  • 4
    数据分享|R语言用lme4多层次（混合效应）广义线性模型（GLM），逻辑回归分析教育留级调查数据（下）
    11
  • 5
    【软件工程】走近演化过程模型：软件开发的不断进化之路
    86
  • 6
    【Mybatis】深入学习MyBatis：概述、主要特性以及配置与映射
    14
  • 7
    【MySQL】数据库规范化的三大法则 — 一探范式设计原则
    15
  • 8
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现（下）
    12
  • 9
    【MySQL】数据库中为什么使用B+树不用B树
    8
  • 10
    【MySQL】SQL优化
    10

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）