Masonry的层层进阶1 基础写法:2 进阶写法3 自动装箱的写法4 Masonry的练习4.1 设置居中5. 更新及重建约束6. Masonry的两个宏

Masonry的官方是这么描述自己的。

  • Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.
  • However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API. Masonry : https://github.com/SnapKit/Masonry SnapKit: https://github.com/SnapKit/SnapKit

2.1 Basic Grammar

mas_makeConstraints mas_updateContraints mas_remakeContraints

1 基础写法:

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
//equalTo 后面要求跟一个OC对象的数据,所以需要对数字进行包装。@将数字变成了NSNumber 类型。
        make.width.equalTo(@200);
        make.height.equalTo(@50);
    }];

make.xxxx属性.equalTo(参照对象.mas_属性【如果相同,可以省略】).offset(常数)

2 进阶写法

  • NSNumber只能装基本数据类型
  • NSValue可以装结构体等数据类型
// 进阶语法
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(200, 100)]);
    }];

3 自动装箱的写法

  • 装箱:把一个基本数据类型转换成为对象类型的过程叫做“装箱”,或者“包装”。
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 200));
    }];

4 Masonry的练习

4.1 设置居中

// create a imageview in the center of scrollview UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"001"]]; [scrollView addSubview:imageView]; [imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(scrollView); make.size.mas_equalTo(CGSizeMake(140, 140)); }];

4.2 让一个view略小于其superView(边距为20)

  • 假设redView 是View 的子控件
[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).offset(20); make.left.equalTo(self.view.mas_left).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.right.equalTo(self.view.mas_right).offset(-20); }];
  • 当约束控件属性和参照控件属性相同的时候,参照控件的属性可以不写
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(20);
        make.bottom.equalTo(self.view).offset(-20);
        make.right.equalTo(self.view.).offset(-20);
    }];
  • 如果参照的是自己的父控件,参照控件也可以省略不写
[imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.offset(20); make.left.offset(20); make.bottom.offset(20); make.right.offset(20); }];
  • 如果多个属性的offset数值一样,属性也可以连写
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.offset(20);
        make.bottom.right.offset(20);
    }];

4.3 通过更简单的内边距形式修改控件的位置和大小

    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

5. 更新及重建约束

  • update是更新约束:如果之前已经添加过,那么就是更新约束。但是如果之前没有设置过,有可能会造成约束冲突。
  • 修改完约束之后,需要让子控件根据约束调整frame才能生效
[imageView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.right.offset(-50);
    }];
    
//    播放两秒动画
    [UIView animateWithDuration:2 animations:^{
        //让这个控件立刻根据约束修改自己的frame
        [imageView layoutIfNeeded];
    }];

6. Masonry的两个宏

  • 如果想在使用Masonry框架时,省略mas_的前缀,需要定义以下宏:
  • #define MAS_SHORTHAND
  • 让equalTo,offset都带有自动装箱功能,需要定义以下宏:
  • #define MAS_SHORTHAND_GLOBALS

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一棹烟波

OpenCV亚像素角点cornerSubPixel()源代码分析

  上一篇博客中讲到了goodFeatureToTrack()这个API函数能够获取图像中的强角点。但是获取的角点坐标是整数,但是通常情况下,角点的真实位置并不...

4984
来自专栏AIUAI

Caffe2 - (三十二) Detectron 之 roi_data - 模型 minibatch blobs

5599
来自专栏wym

《OpenCV 3计算机视觉 Python语言实现》 第七章 利用python_opencv检测人学习笔记

import cv2 import numpy as np def is_inside(o,i): ox,oy,ow,oh=o ix,iy,iw,ih=...

1973
来自专栏大壮

iOS transform(基础)

1576
来自专栏LIN_ZONE

棋盘覆盖问题(转载)

在一个2^k×2^k 个方格组成的棋盘中,恰有一个方格与其他方格不同,称该方格为一特殊方格,且称该棋盘为一特殊棋盘。在棋盘覆盖问题中,要用图示的4种不同形态的L...

481
来自专栏落影的专栏

Metal视频处理——绿幕视频合成

Metal入门教程总结 Metal图像处理——直方图均衡化 本文介绍如何用Metal把一个带绿幕的视频和一个普通视频进行合并。

5543
来自专栏落影的专栏

Metal视频处理——绿幕视频合成

绿幕视频合成可以分为两步,首先是把视频读取成视频帧并做好对齐,其次是做两个图像的合成。 首先是从正常视频里面读取一帧图像,如下:

1873
来自专栏用户2442861的专栏

matlab使用

x=[7.0  10.5  13.0  17.5  34.0  40.5  44.5  48.0  56.0  61.0  68.5  76.5  80.5...

782
来自专栏cloudskyme

跟我一起ggplot2(1)

ggplot2 R的作图工具包,可以使用非常简单的语句实现非常复杂漂亮的效果。 qplot 加载qplot library(ggplot2) # 测试数据集,...

4087
来自专栏有趣的Python

8- OpenCV+TensorFlow 入门人工智能图像处理-浮雕效果&油画效果

4465

扫码关注云+社区