说明
在这里主要是介绍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]);
#参考文档
* <http://tutuge.me/2015/05/23/autolayout-example-with-masonry>
* <https://github.com/zekunyan/AutolayoutExampleWithMasonry>
* <http://www.jianshu.com/p/24e4ff56bfea>