一、概述

• iOS開發(fā)中高诺，相信許多開發(fā)者都遇到過碌识，類似于像微信朋友圈的評論回復功能的開發(fā)，難點莫過于 Cell里面的子控件布局 虱而、 點擊事件的回調 和 評論回復的邏輯處理筏餐。
• 筆者將通過 兩種方法來實現(xiàn)微信朋友圈評論回復功能，也將通過一個仿優(yōu)酷視頻評論和回復的Demo 來實戰(zhàn)一番牡拇，本文將通過利用UITableView的段頭+cell+段尾來實現(xiàn)魁瞪，希望能為廣大開發(fā)者提供一點思路穆律，少走一些彎路，填補一些細坑佩番。
• iOS實現(xiàn)微信朋友圈評論回復功能（二）
• iOS 實現(xiàn)優(yōu)酷視頻的評論回復功能

二 众旗、 效果圖

效果圖.gif

三、利用UITableView的段頭+cell+段尾實現(xiàn)

1. 頁面分析

2. 技術分析

• 列表展示數(shù)據(jù)流
  • 列表通常利用tableView來實現(xiàn)趟畏。
  • tableview實現(xiàn)又分為自動布局和絕對布局（即Frame布局）
    自動布局:個人推薦利用Masonry+UITableView-FDTemplateLayoutCell的方案來實現(xiàn)自動布局贡歧。
    Frame布局: 事先計算出Cell子控件的Frame以及Cell的高度，存入ModelFrame里面赋秀，雖然計算稍微復雜利朵，但是性能好，可控性強猎莲，易動畫绍弟，擴展維護成本低。
    兩種布局方式不是本文的重點著洼，依舊個人喜好樟遣，筆者偏好是Frame布局，本文案例也將采用這種方式身笤。
• Cell里面的昵稱支持點擊跳轉用戶信息
  • 首先明確內容支持 attributedString（富文本）而不是text（普通文本）豹悬。
  • 可以使用 UILabel的attributedText，或者采用第三方框架TYAttributedLabel和YYText液荸，筆者在此采用的是YYText瞻佛。

3. 技術難點

• Frame布局計算復雜

  1. 實際項目中，我們從服務器獲取的數(shù)據(jù)娇钱，轉換為數(shù)據(jù)模型（Model）,對應的數(shù)據(jù)有些不能直接顯示在視圖（View）上伤柄，需要二次處理。tableviewCell高度計算文搂，是tableView使用以及優(yōu)化的重點對象适刀，最好的方式莫過于高度緩存,筆者這里為每個模型（Model）配備一個模型尺寸（ModelFrame），主要用來計算tableViewCell的高度（cellHeight）煤蹭，以及子控件的尺寸（frame）笔喉，而且保證模型（Model）的純凈性以及減少胖模型的生成。
  2. ModelFrame模型持有Model疯兼，并開放cell中各個子控件的Frame屬性然遏，,以及cellHeight緩存cell高度贫途。注意：這里屬性應該設置為readonly來修飾更為合理吧彪，防止外界修改對應的尺寸（Frame），切記：細節(jié)顯能力丢早。
  3. 重寫ModelFrame的Model的setter方法姨裸，計算tabelViewCell和headerView子控件的Frame以及緩存cell的高度cellHeight和headerView的高度height秧倾。
  4. tableViewCell和headerView自身持有各自ModelFrame模型，在tableView的數(shù)據(jù)源給tableViewCellCell和headerView注入ModelFrame時傀缩，確定tabelViewCell和headerView的子控件的布局（Frame）以及數(shù)據(jù)那先。

• Cell寬度的修改
  只要重寫tableViewCell的frame的setter方法即可統(tǒng)一修改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地址料身。

四汤纸、細節(jié)處理

1. 設置文本的額外區(qū)域，防止文字過少芹血，用戶無法點中文本的bug贮泞。
   
   Label的額外區(qū)域@2x.png

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

  // 設置文本的額外區(qū)域，修復用戶點擊文本沒有效果
  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