iOS 实现微信朋友圈评论回复功能（二）

一、概述

• iOS开发中，相信许多开发者都遇到过，类似于像微信朋友圈的评论回复功能的开发，难点莫过于 Cell里面的子控件布局 、 点击事件的回调 和 评论回复的逻辑处理。
• 笔者将通过 两种方法来实现微信朋友圈评论回复功能，也将通过一个仿优酷视频评论和回复的Demo 来实战一番，本文将通过利用UITableViewCell嵌套UITableView来实现，希望能为广大开发提供一点思路，少走一些弯路，填补一些细坑。
• iOS实现微信朋友圈评论回复功能（一）
• iOS 实现优酷视频的评论回复功能

二、效果图

效果图.gif

三、利用UITableViewCell嵌套UITableView来实现

1. 页面分析

Cell嵌套tableView@2x.png

2. 技术分析

• 列表展示数据流

  • 列表通常利用tableView来实现。
  • tableview实现又分为自动布局和绝对布局（即Frame布局）
    自动布局:个人推荐利用Masonry+UITableView-FDTemplateLayoutCell的方案来实现自动布局。
    Frame布局: 事先计算出Cell子控件的Frame以及Cell的高度，存入ModelFrame里面，虽然计算稍微复杂，但是性能好，可控性强，易动画，扩展维护成本低。
    两种布局方式不是本文的重点，依旧个人喜好，笔者偏好是Frame布局，本文案例也将采用这种方式。

• Cell里面的昵称支持点击跳转用户信息

  • 首先明确内容支持 attributedString（富文本）而不是text（普通文本）。
  • 可以使用 UILabel的attributedText，或者采用第三方框架TYAttributedLabel和YYText，笔者在此采用的是YYText。

• Cell里面嵌套tableView

  • UITableView也是继承UIView，可以拿他当做普通的View来使用，无非要设置tableView.delegate = self和tableView.dataSource = self并实现其代理和数据源方法即可。
  • 需要设置嵌套的tableView.scrollEnable = NO，让其不可滚动。

4. 技术难点

• Frame布局计算复杂
  1. 实际项目中，我们从服务器获取的数据，转换为数据模型（Model）,对应的数据有些不能直接显示在视图（View）上，需要二次处理。tableviewCell高度计算，是tableView使用以及优化的重点对象，最好的方式莫过于高度缓存,笔者这里为每个模型（Model）配备一个模型尺寸（ModelFrame），主要用来计算tableViewCell的高度（cellHeight），以及子控件的尺寸（frame），而且保证模型（Model）的纯净性以及减少胖模型的生成。
  2. ModelFrame模型持有Model，并开放cell中各个子控件的Frame属性，,以及cellHeight缓存cell高度。注意：这里属性应该设置为readonly来修饰更为合理。
  3. 重写ModelFrame的Model的setter方法，计算tabelViewCell子控件的Frame以及缓存cell的高度cellHeight。
  4. tableViewCell自身持有各自ModelFrame模型，在tableView的数据源给tableViewCellCell时，确定tabelViewCell的子控件的布局（Frame）以及数据。
• Cell的事件传递的复杂性
  其中评论用户信息点击，评论cell点击采用的是代理嵌套代理的方式实现。应为这两个事件是在嵌套tableview（评论taleview）的cell上，中间有个嵌套关系，暂时没有找到方法，可以减少这一层嵌套。个人认为，两层代理嵌套，是可接受的，并不会太混乱，如有更好的方式，请在评论区回复。详情事件处理请查看文章下方给出的Demo地址。

cell嵌套tableView的事件传递@2x.png

四、技术难点

1. 设置文本的额外区域，防止文字过少，用户无法点中文本的bug。
   Label的额外区域@2x.png

  // 文本
  YYLabel *contentLabel = [[YYLabel alloc] init];

  // 设置文本的额外区域，修复用户点击文本没有效果
  UIEdgeInsets textContainerInset = contentLabel.textContainerInset;
  textContainerInset.top = MHVideoTopicVerticalSpace;
  textContainerInset.bottom = MHVideoTopicVerticalSpace;
  contentLabel.textContainerInset = textContainerInset;
  
  contentLabel.numberOfLines = 0 ;
  contentLabel.textAlignment = NSTextAlignmentLeft;
  [self.contentView addSubview:contentLabel];

2. 点击评论昵称获取用户模型（MHUser）

• 点击评论昵称，在评论模型（MHComment）中通过通知传递用户模型（MHUser）。虽获取用户模型（MHUser）简单，但使用通知会增加项目的耦合性。

// 文本高亮模型
      YYTextHighlight *toUserHighlight = [YYTextHighlight highlightWithBackgroundColor:[UIColor colorWithWhite:0.000 alpha:0.220]];
      // 这里痛过属性的userInfo保存User模型，后期通过获取模型然后获取User模型
      toUserHighlight.userInfo = @{MHCommentUserKey:self.toUser};
      
      // 点击用户的昵称的事件传递
//        toUserHighlight.tapAction = ^(UIView *containerView, NSAttributedString *text, NSRange range, CGRect rect)
//        {
//            // 这里通过通知把用户的模型传递出去
//        };

• 点击评论昵称，通过label的点击事件来获取，由于YYLable的highlightTapAction的事件，无法获取YYTextHighlight模型，但是通过KVC可以获取到YYTextHighlight模型，从而得到textHighlight.userInfo。这样一来通过delegate就可将用户模型（MHUser）传递出去。

__weak typeof(self) weakSelf = self;
    contentLabel.highlightTapAction = ^(UIView *containerView, NSAttributedString *text, NSRange range, CGRect rect) {
        
        // 利用KVC获取UserInfo 其实可以在MHComment模型里面利用 通知告知控制器哪个用户被点击了
        YYTextHighlight *highlight = [containerView valueForKeyPath:@"_highlight"];
        
        if (weakSelf.delegate && [weakSelf.delegate respondsToSelector:@selector(commentCell:didClickedUser:)]) {
            [weakSelf.delegate commentCell:weakSelf didClickedUser:highlight.userInfo[MHCommentUserKey]];
        }       
    };

五、期待

1. 文章若对您有点帮助，请给个喜欢❤️，毕竟码字不易；若对您没啥帮助，请给点建议💗，切记学无止境。
2. 针对文章所述内容，阅读期间任何疑问；请在文章底部评论指出，我会火速解决和修正问题。
3. GitHub地址：https://github.com/CoderMikeHe

六、代码

MHDevelopExample_Objective_C - MHTopicTwoController.h/m