iOS使用Masnory完成自适应高度，附带实现简易聊天界面

前言：在项目开发过程中，经常会遇到需要完成cell高度自适应的需求，比如：聊天，评论等等。我们经常使用的方法是在模型中计算cell高度，随后加载。现在介绍的方法是使用优秀的三方布局框架Masonry完成自适应高度。（最后附带源码地址）

背景及问题：近期使用Masnory实现Cell自适应高度，遇到了个小坑。当前苹果最新系统版本12.1，在12.0以上系统版本完美运行(iOS11的系统暂未找到合适机型测试，欢迎其他小伙伴来补充测试结果)，但是在iOS10的系统上，无法进行约束，cell依然为默认的高度。

先展示下实现的效果：

单控件文本自适应高度展示

简易聊天界面实现效果

接下来谈谈代码的具体实现方案：

1.单控件实现方案：

可以加在cell自带的属性视图contentView上，也可以直接加到cell上面，代码如下

- (void)addOwnViews{
    _contentLab = [[UILabel alloc] init];
    _contentLab.numberOfLines = 0;
    [self.contentView addSubview:_contentLab];
    [self layoutIfNeeded];// 布局
}

//cell高度自适应
- (void)layoutSubviews{
    [_contentLab mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView).offset(12);
        make.bottom.equalTo(self.contentView).offset(-12);
        make.left.equalTo(self.contentView).offset(15);
        make.right.equalTo(self.contentView).offset(-15);
    }];
    [self.contentView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self);
    }];
}

2.多控件简易聊天界面实现方案：

对于不定高度的contentLab不要去设置它的高度，但是一定要有相对的top和bottom约束，在建立上下约束的过程中，注意不要遗漏了cell.contentView的上下约束，缺一不可。在检查约束的时候，可以当做contentLab的高度已知，检查一下是否能够确认cell上下部的位置。具体约束代码，示例如下

- (void)addOwnViews{
    _headImageView = [[UIImageView alloc] init];
    _nickLab = [[UILabel alloc] init];
    _nickLab.font = [UIFont systemFontOfSize:12];
    _nickLab.textColor = [UIColor colorWithWhite:0.7 alpha:1];

    _bubbleImageView = [[UIImageView alloc] init];
    [self setBubbleShowStyle];
    
    _contentLab = [[UILabel alloc] init];
    _contentLab.font = [UIFont systemFontOfSize:15];
    _contentLab.numberOfLines = 0;
    _contentLab.lineBreakMode = UILineBreakModeCharacterWrap;

    [self.contentView addSubview:_headImageView];
    [self.contentView addSubview:_nickLab];
    [self.contentView addSubview:_bubbleImageView];
    [self.contentView addSubview:_contentLab];
    
    [self layoutIfNeeded];// 布局
}

//cell高度自适应
- (void)layoutSubviews{
    [_headImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView).offset(15);
        make.left.equalTo(self.contentView).offset(12);
        make.width.mas_equalTo(40);
        make.height.mas_equalTo(40);
    }];
    
    [_nickLab mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_headImageView);
        make.left.equalTo(_headImageView.mas_right).offset(8);
        make.width.mas_equalTo(150);
        make.height.mas_equalTo(15);
    }];
    
    [_bubbleImageView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_nickLab.mas_bottom);
        make.bottom.equalTo(self.contentView).offset(-15);
        make.left.equalTo(_headImageView.mas_right);
        make.width.mas_equalTo(ScreenWidth*2/3);
        make.height.equalTo(_contentLab).offset(26);
    }];
    
    [_contentLab mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_bubbleImageView).offset(13);
        make.left.equalTo(_bubbleImageView).offset(20);
        make.right.equalTo(_bubbleImageView).offset(-13);
    }];
    
    [self.contentView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self);
    }];
}

聊天气泡通过点九图方案实现，代码如下

//设置气泡拉伸方式
- (void)setBubbleShowStyle{
    CGFloat top = 32;       // 顶端盖高度
    CGFloat bottom = 8;    // 底端盖高度
    CGFloat left = 15;     // 左端盖宽度
    CGFloat right = 15;    // 右端盖宽度
    UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);
    /*
     * Stretch  拉伸
     * Tile     平铺
     */
    UIImage *image = [[UIImage imageNamed:@"bubble_icon"] resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];
    [_bubbleImageView setImage:image];

}

可能遇到的问题：在ios11以下的版本可能遇到无法自适应的问题，解决以上适配低版本系统问题，其实核心就是需要设置预计cell高度，添加一句代码就能搞定了，代码如下

- (UITableView *)tableView
{
    if (_tableView == nil) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.tableFooterView = [[UIView alloc]initWithFrame:CGRectZero];
        _tableView.estimatedRowHeight = 70;//本句为适配ios12之前且ios10之后的系统，个人理解为它是为了告诉系统，我有一个预计的高度，你不要把cell高度定死了。注：数字非0即可，当然最好是贴近预期cell高度
        
    }
    return _tableView;
}

总结与核心思路：使用Masonry布局实现Cell高度自适应，核心就是，视不定高度文本控件的高度为已知，无遗漏的做好控件的top和bottom约束（重点！！！敲黑板了），其他均为常规操作。有问题欢迎评论，看到我会回复的！

附录：Demo源码地址：GitHub - 1628471142/AutoAdaptativeCellDemo: 一个使用Masonry进行自动布局的demo，里边包含模仿微信聊天界面的简易效果（觉得代码简明扼要的小伙伴，欢迎点上star哦）