实现朋友圈回复功能

 
 

  
  

   
   
一、概述

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


   
   
二 、 效果图

   
   


    
    

    
    

     
     效果图.gif
    
    

   
   

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

   
   

页面分析

     
     


      
      

      
      
 
      

     
     


技术分析

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



   
   
3. 技术难点

   
   

Frame布局计算复杂

     
     
实际项目中，我们从服务器获取的数据，转换为数据模型（Model）,对应的数据有些不能直接显示在视图（View）上，需要二次处理。tableviewCell高度计算，是tableView使用以及优化的重点对象，最好的方式莫过于高度缓存,笔者这里为每个模型（Model）配备一个模型尺寸（ModelFrame），主要用来计算tableViewCell的高度（cellHeight），以及子控件的尺寸（frame），而且保证模型（Model）的纯净性以及减少胖模型的生成。 
       
 ModelFrame模型持有Model，并开放cell中各个子控件的Frame属性，,以及cellHeight缓存cell高度。注意：这里属性应该设置为readonly来修饰更为合理，防止外界修改对应的尺寸（Frame），切记：细节显能力。 
重写ModelFrame的Model的setter方法，计算tabelViewCell和headerView子控件的Frame以及缓存cell的高度cellHeight和headerView的高度height。 
 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地址。
   
   
四、细节处理
   
   
设置文本的额外区域，防止文字过少，用户无法点中文本的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];
点击评论昵称获取用户模型（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]];
  }       
};
   
   
五、期待
   
   
文章若对您有点帮助，请给个喜欢❤️，毕竟码字不易；若对您没啥帮助，请给点建议