iOS 布局类Masory

2017-02-17  本文已影响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主页里面没有=。=

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

上一篇 下一篇

猜你喜欢

热点阅读