美文网首页
Masonry还不使用就out了

Masonry还不使用就out了

作者: 那抹浮沉 | 来源:发表于2020-07-09 17:51 被阅读0次

最近在梳理技术点,又一次看到Masonry,实操一下,将来原理部分可能会添加

厌倦了天天计算frame的coder们,就不要犹豫了
举个 🌰吧


嘻嘻嘻嘻嘻嘻.png
  • 比如这样的效果,平时实现起来,屏幕宽度/2,再计算间距什么的,即使不是特别麻烦,但终归效率不高且代码有点冗余
  • 如果你依旧乐此不疲,那这里就帮你适当简化一下这样的代码
self.view.frame.origin.x   -> self.view.left

框架肯定不少,这里列2个我自己接触过的

  • YYKit 中有一个分支是有这个功能的,具体懒得看的
  • UIViewAdditions 使用了多年的一个小型第三方

进入正题之前提一下

iOS自动布局核心计算公式
Obj1.property1 = Obj2.property2 * multiplier + constant value

Masonry的设置方式
make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);

接下来进入正题

  • 示例1:
    UIView * redV = [[UIView alloc]init];
    redV.backgroundColor = [UIColor redColor];
    //约束后添加会崩溃
    [self.view addSubview:redV];

//    equalTo 和 mas_equalTo 等效
    [redV mas_makeConstraints:^(MASConstraintMaker *make) {
        //redV的顶部=self.view的顶部 * 1 + 20;
        make.top.equalTo(self.view.mas_top).multipliedBy(1.0).offset(20);
        make.left.equalTo(self.view.mas_left).offset(20);//.multipliedBy(1.0) 可以不写默认*1
        make.right.equalTo(self.view).offset(-20); //.mas_rightt 也可以不写,就是根据self.view设置make.right
        make.bottom.offset(-20);//.equalTo(self.view.mas_bottom) 也可以不写,默认相对于父控件
        
//       设置上左  左下 可以通过连写
//        make.top.and.left.offset(20);
//        make.left.bottom.offset(-20); //.and 可以删掉,默认就有,以及with
        
//        make.edges.equalTo(self.view)insets(UIEdgeInsetsMake(20, 20, -20, -20))
//        make.edges.insets(UIEdgeInsetsMake(20, 20, -20, -20));//.equalTo(self.view) 可以删掉
    }];

可以看出,基本代码可以简化在简化,但是为了提升阅读性,改怎么写,相信大家心里都有数,看一下效果图


示例1.png
  • 示例2:
        UIView * greeV = [[UIView alloc]init];
        greeV.backgroundColor = [UIColor greenColor];
        [self.view addSubview:greeV];
        
        [greeV mas_makeConstraints:^(MASConstraintMaker *make) {
            //普通写法
            make.width.equalTo(@100); //默认需要传入基本类型
            make.height.mas_equalTo(100); //将传入的基本类型包装成对象类型
            make.centerX.equalTo(self.view.mas_centerX);
            make.centerY.equalTo(self.view);//.mas_centerX 可以不写
            
            //简单写法
//            make.size.mas_equalTo(CGSizeMake(100, 100));
//            make.center.mas_equalTo(self.view);
            
        }];

看一下效果图


示例2.png
  • 示例3:
    也就是开局的那个效果
    UIView * blue = [[UIView alloc]init];
    blue.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blue];
    
    UIView * orange = [[UIView alloc]init];
    orange.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:orange];
    
    [blue mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.view.mas_left).offset(30);
        make.top.mas_equalTo(self.view.mas_top).offset(30);
        make.right.mas_equalTo(orange.mas_left).offset(-30);
        make.width.mas_equalTo(orange.mas_width);
        make.height.mas_equalTo(50);
    }];
    [orange mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(self.view).offset(-30);
        make.top.mas_equalTo(self.view).offset(30);
        make.height.mas_equalTo(50);
//
//        make.top.mas_equalTo(blue.mas_top);
//        make.bottom.mas_equalTo(blue.mas_bottom);

    }];

还是在看一眼效果吧


示例3.png
  • 对应的有设置,就有修改和删除
    //更新约束,有则更新,无则添加
    [greeV mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@600); //equalTo 默认需要传入基本类型

    }];
    
    //删除之前所有的约束,并在block内先加新的约束
    [greeV mas_remakeConstraints:^(MASConstraintMaker *make) {

    }];

相关文章

  • Masonry还不使用就out了

    最近在梳理技术点,又一次看到Masonry,实操一下,将来原理部分可能会添加 厌倦了天天计算frame的coder...

  • iOS中的链式编程

    之前一直没有使用Masonry,最近因为比较闲,就尝试使用了下Masonry,但是Masonry这种和Obje...

  • iOS Masonry布局UI之约束冲突解决

    想必Masonry是什么?就不用解释了。公司项目采用纯代码布局,使用的就是Masonry,当然使用Masonry布...

  • Masonry

    Masonry使用方法Masonry的使用Masonry的github地址 本篇文章 Masonry的基本使用方法...

  • 简单的链式编程(iOS)

    1.链式编程思想 最初接触Masonry框架的时候还不知道什么链式编程,最初的感觉就是Masonry使用起来很简洁...

  • 10.4 Masonry使用-动画

    Masonry使用-动画 会进行上下缩放 Masonry使用-动画1.png Masonry使用-动画2.png

  • Masonry使用方法

    Masonry的使用 Masonry的github地址 Masonry的基本使用方法 给控件添加约束使用Mason...

  • 第三方库--Masonry的基本使用

    Masonry是目前最流行的AutoLayout框架. 使用: 将Masonry文件包拖入项目 使用Masonry...

  • 还不会使用神州专车APP你就真的out了

    许多APP不仅是年轻人必不可缺的重要工作、生活工具,同样对咱们的父母也大有帮助。比如说出行这一项吧,年轻人忙于工作...

  • Masonry学习报告

    Masonry 源码:https://github.com/Masonry/Masonry 如果是使用cocoa ...

网友评论

      本文标题:Masonry还不使用就out了

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