Masonry的使用范例

作者: sqz316 | 来源:发表于2016-12-05 10:39 被阅读0次

Masonry的使用范例
Masonry
Masonry使用方法
10.4 Masonry使用-动画
第三方库--Masonry的基本使用
从 Masonry 的源代码看链式编程与函数式编程
Masonry学习报告
iOS Masonry布局UI之约束冲突解决
Autolayout、VFL、Masonry
java 8单例创建模板

本文先诉述一丢丢实例，然后介绍一丢丢重要的属性，再而使用中的一丢丢注意事项。

一些实例

1.让父视图随着子视图的内容高度的增加而增加

将superview的约束加上left,right，top，不设置底部或者高度。其高度的限制由子视图的最底部的子视图设置的位置关系控制；
再加上subview与superview的底部约束，以及高度的约束，如果subview的高度能够随着内容或者model自行layout，那么superview的高度就能够随着subview变化。
eg：subview是lab: 加上lab和superview的top和bottom约束，然后让其根据内容设置一下fitToSize。lab就会根据内容自动调整高度，然后superview也会根据约束而变化高度。

文字需要加行间隔的情况也可行，fitToSize前设置属性字符串即可。

2.设置ScrollView的contentSize

[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self.view);
  }];

  ...

[self.scrollView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.bottom.mas_equalTo(button.mas_bottom).offset(80).priorityLow();
    make.bottom.mas_greaterThanOrEqualTo(self.view);
  }];

我们设置了scrollview的bottom为button的底部+80个像素，但是其优先级为最低。然后又设置了scrollview的bottom要大于或者等于self.view，也就是说contentSize.height至少为屏高。
这样间接的就设置了contensize。

3.CollectionView的contentInset，内偏移

例如：我们会遇到给UIColletionView 加头部的情况，我们可能会将该HeaderView 直接添加到UIColletionView上然后让collectionView往下内偏移一个HeaderView的高度。
这个时候问题来了,因为这个头部的高度可能是不固定的,是由约束来控制的。而这个内偏移的值又不能通过约束来赋值，只能通过HeaderView的frame获得。而frame的值往往不是设置完约束之后可以立即得到的。

在ViewDidLoad中创建使用的约束，会在调用-(void)viewDidLayoutSubviews方法之后，或者在viewDidAppear时可以获得frame的更新。

正常子视图添加的约束，需要调用layoutIfNeeded 函数进行布局，然后所约束的控件才会按照约束条件，生成当前布局相应的frame和bounds。

小测试：通过延时的方法，获得frame
设置model,layout位置之后，延时0.1秒获得展示view的高度，发现也是可行的。说明不调用layoutIfNeeded方法也是有更新的，只是非立即更新。

4. UITableView 单元格Cell适配高度

1.和一部分父视图跟着子视图内容变化而调整高度类似，在cell创建的时候添加约束，设置lab的高度限制与Cell的关系

  [contentLab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(timeLab.mas_bottom).offset(8);
        make.right.equalTo(nameLab.mas_right);
        make.left.equalTo(levelLab.mas_left);

    }];

2.计算单元格高度，填充内容，并调用layoutIfNeeded方法，获得frame,并返回

+ (CGFloat)heightForModel:(BBSListModel *)model
{

    BBSListCell *cell=[[BBSListCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"BBSListCell"];

    [cell cellForModel:model];    

    [self.contentLab sizeToFit];//lab高度根据内容调整 numberOfLines设置为0

    [cell  layoutIfNeeded];

    return cell.contentLab.bottom + 5;//返回cell的高度为lab底部位置加5的间隙
}

5.等间距布局一组View

注意两个方法

  /**
     *  确定间距等间距布局
     *
     *  @param axisType     布局方向
     *  @param fixedSpacing 两个item之间的间距(最左面的item和左边, 最右边item和右边都不是这个)
     *  @param leadSpacing  第一个item到父视图边距
     *  @param tailSpacing  最后一个item到父视图边距
     */
     - (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;


 /**
     *  distribute with fixed item size
     *
     *  @param axisType  布局方向
     *  @param fixedItemLength 每个item的布局方向的长度
     *  @param leadSpacing  第一个item到父视图边距
     *  @param tailSpacing  最后一个item到父视图边距
     */
    - (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

方法一：固定间距计算空间宽度

    //背景
    UIView *bg=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 60)];
    bg.backgroundColor = [UIColor redColor];
    bg.center = self.view.center;
    [self.view addSubview:bg];

    //添加一组子View
    NSMutableArray *viewArray=[[NSMutableArray alloc] init];
    NSInteger numCount=3;
    for (int i=0; i<numCount; i++) {
        UIView *circleView=[[UIView alloc] initWithFrame:CGRectZero];
        circleView.backgroundColor= [UIColor greenColor];
        [bg addSubview:circleView];
        [viewArray addObject:circleView];
    }

    /**
     *  确定间距等间距布局
     *
     *  @param axisType     布局方向
     *  @param fixedSpacing 两个item之间的间距(最左面的item和左边, 最右边item和右边都不是这个)
     *  @param leadSpacing  第一个item到父视图边距
     *  @param tailSpacing  最后一个item到父视图边距
     */
    CGFloat viewWidth = 50;
    CGFloat spaceWidth = 10;


    if(viewArray.count>1)
        [viewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:spaceWidth leadSpacing:spaceWidth tailSpacing:spaceWidth ];

         //设置一下大小 和 高度
    for (int i=0; i<viewArray.count; i++) {

        UIView *circleView=viewArray[i];

        [circleView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo(@(viewWidth));
            make.top.equalTo(@((bg.frame.size.height - viewWidth)/2.));

            if (viewArray.count ==1) {
                make.width.equalTo(@(viewWidth));
                make.centerX.equalTo(bg.mas_centerX);
            }
        }];
    }

效果：

1-2.png

方法二：固定按钮宽度动态计算间距

/**
     *  distribute with fixed item size
     *
     *  @param axisType  布局方向
     *  @param fixedItemLength 每个item的布局方向的长度
     *  @param leadSpacing  第一个item到父视图边距
     *  @param tailSpacing  最后一个item到父视图边距
     */

    CGFloat viewWidth = 40;
    CGFloat spaceWidth = (bg.frame.size.width - viewWidth*numCount)/(numCount +1);
    if(viewArray.count>1)
        [viewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:viewWidth leadSpacing:spaceWidth tailSpacing:spaceWidth];

效果：

2-2.png

基本属性

基本属性：

mas_makeConstraints:添加约束
mas_updateConstraints：更新约束、亦可添加新约束
mas_remakeConstraints：重置之前的约束
priority :优先级 priorityLow()
mas_greaterThanOrEqualTo
mas_lessThanOrEqualTo
multipler表示约束值为约束对象的乘因数
dividedBy属性表示约束值为约束对象的除因数

优先级：
不得不提Autolayout中的两个重要的属性“Content Compression Resistance”和“Content Hugging”。

Content Compression Resistance = 不许挤我！（内容压缩阻力）
这个属性的优先级（Priority）越高，越不“容易”被压缩。也就是说，当整体的空间装不下所有的View的时候，Content Compression Resistance优先级越高的，显示的内容越完整。
Content Hugging = 抱紧！
这个属性的优先级越高，整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

 /设置label1的content hugging 为1000
[_label1 setContentHuggingPriority:UILayoutPriorityRequired
                           forAxis:UILayoutConstraintAxisHorizontal];
//设置label1的content compression 为1000
[_label1 setContentCompressionResistancePriority:UILayoutPriorityRequired
                                         forAxis:UILayoutConstraintAxisHorizontal];
//设置右边的label2的content hugging 为1000
[_label2 setContentHuggingPriority:UILayoutPriorityRequired
                           forAxis:UILayoutConstraintAxisHorizontal];
//设置右边的label2的content compression 为250
[_label2 setContentCompressionResistancePriority:UILayoutPriorityDefaultLow
                                         forAxis:UILayoutConstraintAxisHorizontal];

引用 case 地址:
http://www.cocoachina.com/ios/20150526/11936.html

eg:“width最少也大于200”，并且给这个约束设置优先级比 “右边要比父控件少50” 的优先级高，代码如下

[contentLbl2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.top.equalTo(blackView).with.offset(10);
    make.width.greaterThanOrEqualTo(@200).priority(900);
    make.right.equalTo(blackView).with.offset(-50).priority(800);
    make.height.equalTo(@30);
}];

方法2：使用priorityLow()

make.width.greaterThanOrEqualTo(@200);
make.right.equalTo(blackView).with.offset(-50).priorityLow();

方法3：

[contentLbl2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.top.equalTo(blackView).with.offset(10);
    make.right.equalTo(blackView).with.offset(-50).priority(990);
    make.height.equalTo(@30);
}];

[contentLbl2 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];

注意事项

约束对象只有在被addSubView之后，才能给视图添加约束
当你的所有约束都在 updateConstraints 内调用的时候，你就需要在此调用此方法，因为 updateConstraints方法是需要触发的

// 调用在view 内部，而不是viewcontroller
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}

/**
 *  苹果推荐 约束 增加和修改 放在此方法种
 */
- (void)updateConstraints {
    [self.growingButton updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];
    //最后记得回调super方法
    [super updateConstraints];
}

如果想要约束变换之后实现动画效果，则需要执行如下操作

// 通知需要更新约束，但是不立即执行
[self setNeedsUpdateConstraints];
// 立即更新约束，以执行动态变换
// update constraints now so we can animate the change
[self updateConstraintsIfNeeded];
// 执行动画效果, 设置动画时间
[UIView animateWithDuration:0.4 animations:^{
   [self layoutIfNeeded];
}];

关于更新的几个方法的区别

setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。
layoutIfNeeded：告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
layoutSubviews：系统重写布局
setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始
updateConstraintsIfNeeded：告知立刻更新约束
updateConstraints：系统更新约束

引用：
http://www.jianshu.com/p/1d1a1165bb04

Masonry的使用范例
本文先诉述一丢丢实例，然后介绍一丢丢重要的属性，再而使用中的一丢丢注意事项。一些实例 1.让父视图随着子视图的...
Masonry
Masonry使用方法Masonry的使用Masonry的github地址本篇文章 Masonry的基本使用方法...
Masonry使用方法
Masonry的使用 Masonry的github地址 Masonry的基本使用方法给控件添加约束使用Mason...
10.4 Masonry使用-动画
Masonry使用-动画会进行上下缩放 Masonry使用-动画1.png Masonry使用-动画2.png
第三方库--Masonry的基本使用
Masonry是目前最流行的AutoLayout框架. 使用：将Masonry文件包拖入项目使用Masonry...
从 Masonry 的源代码看链式编程与函数式编程
主 Bundle 栏调试区截屏 Masonry 中的链式编程与函数式编程代码范例: ViewController...
Masonry学习报告
Masonry 源码：https://github.com/Masonry/Masonry 如果是使用cocoa ...
iOS Masonry布局UI之约束冲突解决
想必Masonry是什么？就不用解释了。公司项目采用纯代码布局，使用的就是Masonry，当然使用Masonry布...
Autolayout、VFL、Masonry
适配 VFL语言 Masonry 代码实现Autolayout VFL代码 Masonry使用总结使用代码实现...
java 8单例创建模板
使用范例