Masonry tableviewCell布局
Posted 西贝了爷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Masonry tableviewCell布局相关的知识，希望对你有一定的参考价值。
前言
说到ios自动布局，有很多的解决办法。有的人使用xib/storyboard自动布局，也有人使用frame来适配。对于前者，笔者并不喜欢，也不支持。对于后者，更是麻烦，到处计算高度、宽度等，千万大量代码的冗余，对维护和开发的效率都很低。
笔者在这里介绍纯代码自动布局的第三方库：Masonry。这个库使用率相当高，在全世界都有大量的开发者在使用，其star数量也是相当高的。
效果图
本节详解Masonry的以动画的形式更新约束的基本用法，先看看效果图：
我们这里初始按钮是一个很小的按钮，点击就不断放大，最大就放大到全屏幕。
核心代码
看下代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
#import "TableViewController.h"
#import "TestCell.h"
@interface TableViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, strong) NSMutableArray *dataSource;
@end
@implementation TableViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView = [[UITableView alloc] init];
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self.view addSubview:self.tableView];
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.view);
}];
for (NSUInteger i = 0; i < 10; ++i) {
TestModel *model = [[TestModel alloc] init];
model.title = @"测试标题，可能很长很长，反正随便写着先吧！";
model.desc = @"描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，描述内容通常都是很长很长的，";
[self.dataSource addObject:model];
}
[self.tableView reloadData];
}
- (NSMutableArray *)dataSource {
if (_dataSource == nil) {
_dataSource = [[NSMutableArray alloc] init];
}
return _dataSource;
}
#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.dataSource.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"CellIdentifier";
TestCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (!cell) {
cell = [[TestCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
cell.indexPath = indexPath;
cell.block = ^(NSIndexPath *path) {
[tableView reloadRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationFade];
};
TestModel *model = [self.dataSource objectAtIndex:indexPath.row];
[cell configCellWithModel:model];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
TestModel *model = [self.dataSource objectAtIndex:indexPath.row];
return [TestCell heightWithModel:model];
}
@end
|
讲解
我们来看看这个计算行高的代码，看起来是不是很像配置数据的代理方法呢？
|
1
2
3
4
5
6
7
|
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
TestModel *model = [self.dataSource objectAtIndex:indexPath.row];
return [TestCell heightWithModel:model];
}
|
我们看看TestCell的声明，提供了一个计算行高的类方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
typedef void (^TestBlock)(NSIndexPath *indexPath);
@interface TestCell : UITableViewCell
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *descLabel;
@property (nonatomic, strong) NSIndexPath *indexPath;
@property (nonatomic, copy) TestBlock block;
- (void)configCellWithModel:(TestModel *)model;
+ (CGFloat)heightWithModel:(TestModel *)model;
@end
|
我们看一下计算行高的实现：
|
1
2
3
4
5
6
7
8
9
10
11
|
+ (CGFloat)heightWithModel:(TestModel *)model {
TestCell *cell = [[TestCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@""];
[cell configCellWithModel:model];
[cell layoutIfNeeded];
CGRect frame = cell.descLabel.frame;
return frame.origin.y + frame.size.height + 20;
}
|
我们只是创建了一个cell然后配置数据，然后调用layoutIfNeeded更新约束，以便获取到frame。当我们获取到以后，我们就可以计算出最后的cell真正的高度了。
以上是关于Masonry tableviewCell布局的主要内容，如果未能解决你的问题，请参考以下文章