美文网首页
iOS 布局类Masory

iOS 布局类Masory

作者: 安静的抉择 | 来源:发表于2017-02-17 11:43 被阅读124次

    原文出自别人之手,只做个人记录而已!

    一、导入方式

            可以自己下载拖进去,或者cocoapods导入

    二、关于Masonry的一些东西

        1、常见约束的各种类型

        1.尺寸:width、height、size

        2.边界:left、leading、right、trailing、top、bottom (leading、 trailing与left、right意义相同,一般使用后者)

        3.中心点:center、centerX、centerY

        4.边界:edges

        5.偏移量:offset、insets、sizeOffset、centerOffset

        6.priority()约束优先级(0~1000),multipler乘因数, dividedBy除因数

        2、常见约束的三种方法

        //这个方法只会添加新的约束

    [view mas_makeConstraints:^(MASConstraintMaker *make)  {

    }];

        // 这个方法会将以前的所有约束删掉,添加新的约束

    [view mas_remakeConstraints:^(MASConstraintMaker *make) {

    }];

        // 这个方法将会覆盖以前的某些特定的约束

    [view mas_updateConstraints:^(MASConstraintMaker *make) {

    }];

        tag : 看到block小伙伴们是不是下意识的想到使用 __weak typeof (self) weakSelf = self 来避免循环引用啊,很显然Masonry这么NB的框架怎么可能会出现这么低的撸点呢,笔者经过验证,Masonry内block是局部的引用,block内部引用self不会造成循环引用的,所以骚年们请放心大胆的使用self吧!

    三、常见情况举例

    Case 1: 并排两个label,宽度由内容决定。父级View宽度不够时,优先显示左边label的内容

    遇到这种跟内容压缩、优先级有关的布局,就不得不提Autolayout中的两个重要的属性“Content Compression Resistance”和“Content Hugging”。

    1、Content Compression Resistance = 不许挤我!

    这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不小所有的View的时候,Content Compression Resistance优先级越高的,现实的内容越完整。

    2、Content Hugging = 抱紧!

    这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

    分析

    根据要求,可以将约束分为两个部分:

    1、整体空间足够时,两个label的宽度由内容决定,也就是说,label的“Content Hugging”优先级很高,而且没有固定的Width属性。

    2、整体空间不够时,左边的label更不容易被压缩,也就是“Content Compression Resistance”优先级更高。

    重点:

    1、label不设置具体的宽度(width)属性,宽度由内容决定。

    2、显示的优先级由“Content Compression Resistance”属性的高低决定。

    约束示例图

    关键代码

    关键的代码如下:(label1是左边的label,label2是右边的)

    设置位置 设置内容约束

    小节:灵活运用“Content Compression Resistance”和“Content Hugging”属性。

    Case 2: 让子视图保持父视图的某个比例

    关键词:multipliedBy

    在Masonry里面,其实有个函数“multipliedBy”,就是用来设置multipler属性的(跟原本的NSLayoutConstraint的对应)。

    [subView mas_makeConstraints:^(MASConstraintMaker *make) {

    //上下左贴边

    make.left.equalTo(_containerView.mas_left);

    make.top.equalTo(_containerView.mas_top);

    make.bottom.equalTo(_containerView.mas_bottom);

    //宽度为父view的宽度的一半

    make.width.equalTo(_containerView.mas_width).multipliedBy(0.5);

    }];

    小节:multipliedBy在Masonry的Github主页里面没有=。=

    所以要养成读头文件的习惯~

    相关文章

      网友评论

          本文标题:iOS 布局类Masory

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