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真正的高度了。