Masonry的使用范例

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

一些实例

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容