手把手教你实现评论回复功能（一）

概述

其实早都想写一篇关于评论回复功能的记录了，一直也没有时间，而且这块内容包含的东西还挺多，所以为了方便叙述，准备分两篇来记录这块内容。

功能

现在随着App的发展，各家的评论回复功能不尽相同，一般都是以单条的回复为主，如果想查看这条评论的回复内容，点开进入新的界面来展示评论回复内容。这是比较方便的设计方案，实现起来也相对逻辑清晰。

然后还有一种评论回复功能就相对复杂点了，有点类似于微信朋友圈的评论回复，所有的评论以及回复内容显示到当前的界面上以满足其评论内容的显示。

我今天想说的是第二种：类似于朋友圈的评论回复。

分析

以微信朋友圈为例，如下图：

微信朋友圈

主要以主评论与回复为主，回复在主评论下方，是全部展示出来的效果。看到这样的评论回复内容，首先关注的地方会在回复那个地儿，它到底是什么鬼？一条一条的展示出来，难不成是一个新的tableView？

对于这样的内容界面，貌似有了两种处理方案：

  • 使用UITableView进行回复的展示
  • 使用UILabel进行回复的布局展示

实现

以上说了辣么多，重点还是在这，如何去实现它呢？貌似两种方案都可行呢！好吧，那就都实现一下咯？（篇幅原因，这次主要先介绍第一种实现）

  • 使用UITableView进行回复的展示

    这样的效果貌似实现起来很舒服，因为tableView如果充当回复那块的内容的话，省了很多布局的琐事了，只需要对tableView进行内容高度更新既可，保证内容高度始终等于控件的frame，这样就不会出现一些奇奇怪怪的界面滚动问题了。先看看初期效果，如下：

评论回复初期效果.gif

以上回复的界面是通过嵌套tableView来实现的，效果貌似还不错，界面的层级也很简单，如下：

image.png

先看实现的代码，然后通过代码来说明实现过程。

外层cell实现

#import "LCCommentCell.h"
#import "Masonry.h"
#import "LCReplyCell.h"

static NSString *ReplyCellID = @"replyID";

@interface LCCommentCell ()<UITableViewDelegate,UITableViewDataSource>

@property (nonatomic,strong) UILabel *cmtContentLabel;  //这里的内容可以根据项目来进行配置

@property (nonatomic,strong) UITableView *replyView; //回复的界面

@end

@implementation LCCommentCell

- (void)awakeFromNib {
    [super awakeFromNib];
    
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        
        [self setUI];
    }
    
    return self;
}

#pragma -mark- setter and getter 
- (void)setReplyArray:(NSArray *)replyArray{

    _replyArray = replyArray;
    
    [self.replyView reloadData];
    
    //强制刷新回复界面，然后更新回复区域高度
    [self.replyView layoutIfNeeded];
    
    [self.replyView mas_updateConstraints:^(MASConstraintMaker *make) {
       
        make.height.mas_equalTo(self.replyView.contentSize.height);
    }];
    
    
    //获取当前的回复区域界面的高度
    self.cellHeight = self.replyView.frame.origin.y + self.replyView.contentSize.height + 60;
    
    NSLog(@"current height is %f",_cellHeight);
}

#pragma -mark- UI
- (void)setUI{

    [self.contentView addSubview:self.cmtContentLabel];
    [self.contentView addSubview:self.replyView];
    
    [self.cmtContentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.top.mas_equalTo(10);
        make.leading.mas_equalTo(10);
        make.trailing.mas_equalTo(-10);
    }];
    
    [self.replyView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.top.mas_equalTo(self.cmtContentLabel.mas_bottom).with.offset(8);
        make.leading.mas_equalTo(20);
        make.trailing.mas_equalTo(-10);
    }];
    
    
}

#pragma -mark- tableView delegate
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    NSLog(@"current count is %ld",self.replyArray.count);
    return self.replyArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    
    LCReplyCell *cell = [tableView dequeueReusableCellWithIdentifier:ReplyCellID];
    cell.cmtStr = self.replyArray[indexPath.row];

    
    return cell;
    
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    NSString *replyStr = self.replyArray[indexPath.row];
    
    CGRect bounds = [replyStr boundingRectWithSize:CGSizeMake([UIScreen mainScreen].bounds.size.width - 20, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]} context:nil];
    
    CGFloat height = ceil(bounds.size.height);
    
    
    return height;
}

#pragma -mark- lazy load
- (UILabel *)cmtContentLabel{

    if (!_cmtContentLabel) {
        _cmtContentLabel  = [UILabel new];
        _cmtContentLabel.text = @"大家好，我是新人，求罩";
        _cmtContentLabel.numberOfLines = 0;
    }
    
    return _cmtContentLabel;
}

- (UITableView *)replyView{

    if (!_replyView) {
        
        _replyView = [UITableView new];
        [_replyView registerClass:[LCReplyCell class] forCellReuseIdentifier:ReplyCellID];
        _replyView.layer.cornerRadius = 2;
        _replyView.layer.masksToBounds = YES;
        
        _replyView.separatorStyle = UITableViewCellSeparatorStyleNone;
        _replyView.scrollEnabled = NO;
        _replyView.delegate = self;
        _replyView.dataSource  = self;
        
        
    }
    
    return _replyView;
}


@end

内层回复界面cell的实现

#import "LCReplyCell.h"
#import "Masonry.h"

#define RGB(R,G,B,A) [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:A]

@interface LCReplyCell ()

@property (nonatomic,strong) UILabel *replyLabel;

@end

@implementation LCReplyCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{

    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        
        [self setUI];
    }
    
    return self;
}

- (void)setUI{

    [self.contentView addSubview:self.replyLabel];
    
    [self.replyLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    
        make.edges.mas_equalTo(0);
    }];
    
    
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

#pragma -mark- setter and getter 
- (void)setCmtStr:(NSString *)cmtStr{

    _cmtStr = cmtStr;
    
    self.replyLabel.text = cmtStr;
    
}

#pragma -mark- lazy load
- (UILabel *)replyLabel{

    if (!_replyLabel) {
        
        _replyLabel = [UILabel new];
        _replyLabel.backgroundColor = RGB(235, 235, 235, 1);
        _replyLabel.font = [UIFont systemFontOfSize:14];
        _replyLabel.numberOfLines = 0;
    }
    
    return _replyLabel;
}

@end

viewContrller中的实现使用

#import "ViewController.h"
#import "LCCommentCell.h"
#import "Masonry.h"

static NSString *CMTID = @"cmtID";

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

@property (nonatomic,strong) UITableView *tableView;

@property (nonatomic,strong) NSMutableArray *replyArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    [self.view addSubview:self.tableView];
    
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.top.mas_equalTo(20);
        make.leading.trailing.bottom.mas_equalTo(0);
    }];
    
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma -mark- tableView delegate
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return 10;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

    
    LCCommentCell *cell = [tableView dequeueReusableCellWithIdentifier:CMTID];
    cell.replyArray = self.replyArray;
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    LCCommentCell *cell = [[LCCommentCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CMTID];
    cell.replyArray = self.replyArray;
    
    
    return cell.cellHeight;
    
}

#pragma -mark- lazy load
- (UITableView *)tableView{

    if (!_tableView) {
        
        _tableView = [UITableView new];
        [_tableView registerClass:[LCCommentCell class] forCellReuseIdentifier:CMTID];
        
        _tableView.delegate = self;
        _tableView.dataSource = self;

    }
    
    return _tableView;
}

- (NSMutableArray *)replyArray{

    if (!_replyArray) {
        
        NSString *replyContent = @"陈慧回复吴东：简直了，神经病吧？";
        _replyArray = [NSMutableArray new];
        
        for (int i = 0; i<10; i++) {
           
            [_replyArray addObject:replyContent];
        }
        
        
        
    }
    
    return _replyArray;
}


@end

其中有几个技术点需要注意：

  • 如何计算评论回复的高度以及获取高度的时机

    可以这样分析，由于回复的控件是一个tableView，tableView所承载的是UILabel，这些label如果全部都填充完毕之后，那么对应的tableView的内容高度contentSize就是当前所要全部展示的内容，所以为了保证所有回复的内容全部展示完全，可以在更新回复界面的tableView之后更行它的frame的高度，让其frame的高度等于内容高度既可完成内容的展示，另外，为了保证滑动过程中显示回复的tableView界面没有拖动效果，可以禁用回复的tableView的bounce属性。
    需要注意的是在更新回复的frame的高度的时候是在当前回复全部刷新完成之后，由于tableView的刷新的部分回调是异步进行的，所以可能获取高度不准确，为了解决这样的问题，可以使用强制刷新来同步界面的刷新完成，之后再去更新frame。

  • 如何计算外层cell的高度以及获取高度的时机

    这里比较有意思的地方在与评论的外层cell的高度计算，这里如果使用纯代码进行所有控件的高度的计算，不免过于麻烦，涉及到各个控件的frame布局的计算。这里介绍一种新的方法来进行cell的高度计算，当然也仅供参考。
    可以这样去分析界面，如下图所示，实际上只要获取回复的tableView在布局以后的frame即可知道当前的cell高度，通过frame的y值加上当前的height再加底部的空白高度拿到了当前的cell 的高度。当然这是在cell布局之后才能获取。所以在计算cell的高度的时候我们可以借助这样一个思路进行。
    所以在进行tableView的高度的回调的时候，我们可以创建一个临时的cell，将对应的数据传给当前cell，然后cell布局之后，去获取当前的cell的高度，这个高度可以写在当前的cell中，高度的获取可以放在界面回复reply之后进行，相关代码如下：

外层计算cell高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    LCCommentCell *cell = [[LCCommentCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CMTID];
    cell.replyArray = self.replyArray;
    
    
    return cell.cellHeight;
    
}

cell属性设置


- (void)setReplyArray:(NSArray *)replyArray{

    _replyArray = replyArray;
    
    [self.replyView reloadData];
    
    //强制刷新回复界面，然后更新回复区域高度
    [self.replyView layoutIfNeeded];
    
    [self.replyView mas_updateConstraints:^(MASConstraintMaker *make) {
       
        make.height.mas_equalTo(self.replyView.contentSize.height);
    }];
    
    
    //获取当前的回复区域界面的高度
    self.cellHeight = self.replyView.frame.origin.y + self.replyView.contentSize.height + 60;
    
    NSLog(@"current height is %f",_cellHeight);
}
评论回复层级

这里需要说一点界面优化的内容，由于每次的高度获取都是实时的，所以针对于这一点内容，我们可以考虑将每次拿来的高度缓存起来，从而避免因高度的重复计算导致的性能问题。

小结

使用tableView进行回复布局省了很多事，包括数据内容的更新以及点击事件的处理，基本都使用了这样tableView自带的一些功能特性，可谓是物有所值。所以小伙伴，实现评论回复有思路了吗？以上仅供参考哟~~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335

推荐阅读更多精彩内容

  • 面包时间
    2017.02.22 可以练习，每当这个时候，脑袋就犯困，我这脑袋真是神奇呀，一说让你做事情，你就犯困，你可不要太...
    Carden阅读 1,306评论 0赞 1
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4赞 60
  • iOS开发系列--UITableView全面解析
    概述在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似...
    liudhkk阅读 8,908评论 3赞 38
  • 《我们是总被人欺负的逗比好姑娘》
    考完四级我内心是崩溃的，这意料之中的糟糕却依然让人沮丧。出来考场的路上，碰到同院认识的妹子，“唉，真的是裸考，但应...
    花裤子阅读 733评论 8赞 8
  • 寻找
    云寻找草原 雨寻找河流 风寻找森林 我寻找 能让我驻足的事物
    深浅之末阅读 221评论 0赞 2