iOS 实现微信朋友圈评论回复功能(一)

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

二 、 效果图


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

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

     - (void)setFrame:(CGRect)frame
     {
           frame.origin.x = MHVideoTopicAvatarWH+2*MHVideoTopicHorizontalSpace;
           frame.size.width = MHMainScreenWidth - frame.origin.x - MHVideoTopicHorizontalSpace;
           [super setFrame:frame];
      }
    
  • 复杂的事件回调
    事件传递三种方式delegatenotificationblock。笔者项目采用的是代理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];
  1. 点击评论昵称获取用户模型(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的点击事件来获取,由于YYLablehighlightTapAction的事件,无法获取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

推荐阅读更多精彩内容