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

一、概述

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

二 、 效果图

效果图.gif

三、利用UITableView的段头+cell+段尾实现

1. 页面分析

2. 技术分析

• 列表展示数据流
  • 列表通常利用tableView来实现。
  • tableview实现又分为自动布局和绝对布局（即Frame布局）
    自动布局:个人推荐利用Masonry+UITableView-FDTemplateLayoutCell的方案来实现自动布局。
    Frame布局: 事先计算出Cell子控件的Frame以及Cell的高度，存入ModelFrame里面，虽然计算稍微复杂，但是性能好，可控性强，易动画，扩展维护成本低。
    两种布局方式不是本文的重点，依旧个人喜好，笔者偏好是Frame布局，本文案例也将采用这种方式。
• Cell里面的昵称支持点击跳转用户信息
  • 首先明确内容支持 attributedString（富文本）而不是text（普通文本）。
  • 可以使用 UILabel的attributedText，或者采用第三方框架TYAttributedLabel和YYText，笔者在此采用的是YYText。

3. 技术难点

• Frame布局计算复杂

  1. 实际项目中，我们从服务器获取的数据，转换为数据模型（Model）,对应的数据有些不能直接显示在视图（View）上，需要二次处理。tableviewCell高度计算，是tableView使用以及优化的重点对象，最好的方式莫过于高度缓存,笔者这里为每个模型（Model）配备一个模型尺寸（ModelFrame），主要用来计算tableViewCell的高度（cellHeight），以及子控件的尺寸（frame），而且保证模型（Model）的纯净性以及减少胖模型的生成。
  2. ModelFrame模型持有Model，并开放cell中各个子控件的Frame属性，,以及cellHeight缓存cell高度。注意：这里属性应该设置为readonly来修饰更为合理，防止外界修改对应的尺寸（Frame），切记：细节显能力。
  3. 重写ModelFrame的Model的setter方法，计算tabelViewCell和headerView子控件的Frame以及缓存cell的高度cellHeight和headerView的高度height。
  4. tableViewCell和headerView自身持有各自ModelFrame模型，在tableView的数据源给tableViewCellCell和headerView注入ModelFrame时，确定tabelViewCell和headerView的子控件的布局（Frame）以及数据。

• Cell宽度的修改
  只要重写tableViewCell的frame的setter方法即可统一修改cell的尺寸。

   - (void)setFrame:(CGRect)frame
   {
         frame.origin.x = MHVideoTopicAvatarWH+2*MHVideoTopicHorizontalSpace;
         frame.size.width = MHMainScreenWidth - frame.origin.x - MHVideoTopicHorizontalSpace;
         [super setFrame:frame];
    }
  

• 复杂的事件回调
  事件传递三种方式delegate，notification，block。笔者项目采用的是代理delegate，将所有事件代理给viewController，事件的传递详情，请查看文章下方给出的Demo地址。

四、细节处理

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 - MHTopicOneController.h/m