Masonry布局及UITableViewCell优化动态高度

说明

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

  • Masonry(OC)
  • Masonry(swift)
  • FDTemplateLayoutCell
    当然也可以用 pod 'Masonry' 来导入工程,详细见三方库的github上的介绍,最好在iOS8以上的系统上使用

使用方法及注意点

基本用法

  • 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]);

#参考文档
* 
* 
* 

你可能感兴趣的:(Masonry布局及UITableViewCell优化动态高度)