Masonry的故事

Masonry是什么

在前端工作中,UI布局是不可或缺的一环。一种好的布局方式可以让UI布局变得轻松自如,减少BUG的产生。与绝对布局不同是,Masonry不单纯的采用坐标和大小来确定某一部件的位置,因为这样往往很难去做适配的工作。所以相对布局的优势就可以体现出来,我们可以不定义某个部件的大小和位置,而是通过一些约束来达到同样的效果。

Masonry的故事

班上新来了一位老师找一位同学回答问题, 让第三排第四列的那个同学起来回答问题,然后小明起来回答了问题,然后老师又找同学回答第二个问题,这次让小明前面那个同学回答,因为老师知道小明的位置。

第一个同学可以简单理解为绝对布局(3,4)。第二个同学可以理解为相对布局(小明前面的那个同学)。为什么说容易适配呢?试想一下如果班级换到一个不规则教室,通过绝对布局的方式确定某个人就很难了,但是相对布局的方法仍然可用。(直接叫名字的方法当然更快,但是我们这里只是讲解一下相对布局和绝对布局的区别。)

提前准备工作:

首先将背景设置为黑色,其次创建一个UIView,背景颜色设置成黄色,并且添加到self.view中


    self.view.backgroundColor = [UIColor blackColor];
    UIView* bgView = [[UIView alloc]init];
    bgView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:bgView];

约束类型:

  • 尺寸
    width、height、size
 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        //1、
            make.width.mas_equalTo(100);        //宽度约束,设置宽度为100
            make.height.mas_equalTo(100);        //高度约束,设置高度为100
        //2、
            make.size.mas_equalTo(CGSizeMake(100,100)); //大小约束,大小 = 宽度 + 高度
        //3、
            make.width.height.mas_equalTo(100);  //宽度高度约束合并
        }];
    //以上三种方法实现效果相同,只是设置尺寸大小,出现的位置默认为左上。

实现效果图:
在这里插入图片描述

  • 边界
    left、right、top、bottom
  [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.left.mas_equalTo(self.view).offset(50);
           make.right.mas_equalTo(self.view).offset(-50); //注意负数
           make.top.mas_equalTo(self.view).offset(50);
           make.bottom.mas_equalTo(self.view).offset(-50);  //注意负数
       }];

   //当参照物是self.view的时候,可以省略部分代码,如下,
   //实现的效果相同。但要参照物的父类是self.view才可以。
   //推荐上面那种写法,代码的可阅读性能比较高。

   [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.left.mas_equalTo(50);
           make.right.mas_equalTo(-50); //注意负号,但距离右侧是20
           make.top.mas_equalTo(50);
           make.bottom.mas_equalTo(-50); //注意负数
       }]

实现效果图:
距离四周的距离都是50

  • 中心点
    center、centerX、centerY
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.size.equalTo(self.view).multipliedBy(0.5);//大小是父视图的0.5倍
       //1、
           make.center.mas_equalTo(self.view);//中心点和父视图相同
       //2、
           make.centerX.mas_equalTo(self.view); //中心点横坐标对齐父视图中心点
           make.centerY.mas_equalTo(self.view); //中心点纵坐标对齐父视图中心点
      //3、
           make.center.mas_equalTo(0); //屏幕中间的点为(0,0)
       }];
   //以上三种方法实现效果相同,可以自行尝试只对齐centerX或者centerY的实现效果

实现效果图:
在这里插入图片描述

  • 内边距
    edges
 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(100, 100, 100, 100));
 }];

//感觉可以用边界的实现效果代替

实现效果图:
在这里插入图片描述

  • 相对偏移量
    offset 边看边解释,来不及了快上车吧。
    UIView* fgView = [[UIView alloc]init];
   fgView.backgroundColor = [UIColor redColor];
   [self.view addSubview: fgView];   //额外增加一个红色背景的视图

 [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.mas_equalTo(50);
     make.top.mas_equalTo(50);
     make.height.mas_equalTo(100);
     make.width.mas_equalTo(100);
 }];                              //设置bgView的大小和边距

 [fgView mas_makeConstraints:^(MASConstraintMaker *make) {
     make.left.mas_equalTo(bgView.mas_right).offset(50);  //这句是重点:fgView左侧距离bgView的右侧有100的边距
     make.top.mas_equalTo(50);
     make.height.mas_equalTo(100);
     make.width.mas_equalTo(100);
 }];                               //设置fgView的大小和边距

实现效果图:
在这里插入图片描述

  • mas_前缀修饰符
    • mas_equalTo 和 equalTo
      mas_equalTo有自动包装功能,比如自动将100包装成为@100.
      因为OC中只能接受对象类型的参数,所以这样使用更方便。
      equalTo没有自动包装功能
      mas_equalTo(100) 等同于 equalTo(@100)
      mas_equalTo的功能强于equalTo,所以可以一直使用mas_equalTo
    • mas_width 和 width
      width是make对象的一直属性,用来添加宽度约束的。
      mas_width是一个属性值,可以用来当做mas_equalTo的参数
make.width.mas_equalTo(100); //给属性用常量赋值

make.width.mas_equalTo(self.view.mas_width);  //用属性值给我属性赋值
make.height.mas_equalTo(self.view.mas_height);//用属性值给我属性赋值

Masonry的学习至此先告一段落,这些目前应该足够用了,老铁你会了吗。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值