美文网首页iOSmasonryiOS进阶
Masonry布局及UITableViewCell优化动态高度

Masonry布局及UITableViewCell优化动态高度

作者: 好迪 | 来源:发表于2016-11-20 16:06 被阅读537次

    说明

    在这里主要是介绍Masonry在UITableViewCell中的使用,并动态计算高度更好的去分离 Model 层与 UI(View)层,在这里附上需要第三方库地址

    使用方法及注意点

    基本用法

    • 1
    UIView *view = [[UIView alloc] init];
    [self.view addSubview:view];//必须先加入父View,否则crash
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));}
        /*
         * 等价于
            make.left.right.top.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
        */
        /*
         * 等价于
          make.left.equalTo(view.superview).offset(20);
          make.top.equalTo(view.superview).offset(20);
          make.right.equalTo(view.superview).offset(-20);
          make.bottom.equalTo(view.superview).offset(-20);
        */
    ];
    
    • 2

    mas_makeConstraints //第一次生成约束使用
    mas_updateConstraints //更新其中的约束
    mas_remakeConstraints //重新生成约束,会将之前的所有约束先去掉

    使用注意:在循环cell,如果有代码重复调用的地方,比如在Cell赋值Model的过程中,必须要使用mas_remakeConstraints或者用***下面的方法来更新约束***,以此防止循环的时候生成相同的约束,影响性能,甚至,能使用make的地方基本都可以用remake进行代替,防止生成无谓的约束
    

    // in public/private interface
    @property (nonatomic, strong) MASConstraint topConstraint;
    // when making constraints
    [view1 mas_makeConstraints:^(MASConstraintMaker make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);}];
    ...
    //
    * then later you can call 类似mas_remakeConstraints***
    [self.topConstraint uninstall];

    * 3 其他用法
    

    // 子控件宽高为父控件的一半(multipliedBy) 相当于乘以 0.5
    make.width.height.equalTo(view.superview).multipliedBy(0.5);
    make.width.height.equalTo(view.superview).dividedBy(2);// 除
    make.height.mas_equalTo(0.6);// 等价于 make.height.equalTo(@(0.6))

    * 4 NSArray 
    

    //水平布局
    [@[leadTextField,trailingTextField] mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:7.5 tailSpacing:7.5];
    [@[leadTextField,trailingTextField] mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@36);
    make.centerY.equalTo(textFieldView.mas_centerY);
    }];
    // - (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

    * 5 优先级priority 应该很容易理解
    

    make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
    make.top.equalTo(label.mas_top).with.priority(600);

    * 6 Autolayout中的两个重要的属性“**Content Compression Resistance**”和“**Content Hugging**”
    Content Compression Resistance 
    这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不下所有的View的时候,Content Compression Resistance优先级越高的,显示的内容越完整。
    Content Hugging 
    这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。
    根据要求,可以将约束分为两个部分:
    整体空间足够时,两个label的宽度由内容决定,也就是说,label的“Content Hugging”优先级很高,而且没有固定的Width属性。
    整体空间不够时,左边的label更不容易被压缩,也就是“Content Compression Resistance”优先级更高。
    ***重点:***
    label不设置具体的宽度(width)属性,宽度由内容决定。
    显示的优先级由“Content Compression Resistance”属性的高低决定。
    
    ####FDTemplateLayoutCell 用法
    具体使用方法在[github](https://github.com/forkingdog/UITableView-FDTemplateLayoutCell)的上面讲的很清楚,融合Masonry的使用吧
    

    pragma mark - tableView 代理

    // 在 Controller里面 实现UITableView代理

    • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
      return [tableView fd_heightForCellWithIdentifier:[WLProjectInboxViewCell cellIndentity] cacheByIndexPath:indexPath configuration:^(WLProjectInboxViewCell *cell) {
      cell.receiveProjectModel = _data[indexPath.section];
      }];
      }

    // 在自定义Cell 文件中
    @property (strong, nonatomic) MASConstraint *contentHeightConstraint;
    ...
    [_projectHeadView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.and.top.equalTo(weakSelf.contentView).with.offset(leftAndTopMargin);
    make.size.mas_equalTo(CGSizeMake(45, 45));
    // 默认 cell 高度
    make.bottom.mas_equalTo(self.contentView.mas_bottom).offset(-24).priorityMedium();
    }];

    [_noteView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(weakSelf.projectHeadView);
    make.top.equalTo(weakSelf.projectNeighborhood.mas_bottom).with.offset(9);
    make.right.equalTo(weakSelf.contentView.mas_right).with.offset(-rightMargin);
    //下面这句很重要 觉得 Cell 的高度
    _contentHeightConstraint = make.bottom.mas_equalTo(self.contentView.mas_bottom).offset(-rightMargin).priorityHigh();
    }];

    • (void)setReceiveProjectModel:(WLReceiveProjectModel *)receiveProjectModel{
      _receiveProjectModel = receiveProjectModel;
      if ([receiveProjectModel.comment length] > 0) {
      [_contentHeightConstraint install];
      }
      else{
      [_contentHeightConstraint uninstall];
      }
      }
    这样基本实现Cell在AutoLayout中动态高度布局
    
    ###问题
    看不懂下面代码意思 有待查证
    

    make.height.equalTo(@[view1.mas_height, view2.mas_height]);
    make.height.equalTo(@[view1, view2]);
    make.left.equalTo(@[view1, @100, view3.right]);

    #参考文档
    * <http://tutuge.me/2015/05/23/autolayout-example-with-masonry>
    * <https://github.com/zekunyan/AutolayoutExampleWithMasonry>
    * <http://www.jianshu.com/p/24e4ff56bfea>

    相关文章

      网友评论

      • 动感超人丶:作者看不懂的那部分,意思是不是取数组里最高的view和最左边的view?我也是推测

      本文标题:Masonry布局及UITableViewCell优化动态高度

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