一股耽、概述
- iOS開發(fā)中颜曾，相信許多開發(fā)者都遇到過，類似于像
微信朋友圈的評論回復功能的開發(fā)缸血，難點莫過于Cell里面的子控件布局蜀铲、點擊事件的回調(diào)和評論回復的邏輯處理。 - 筆者將通過
兩種方法來實現(xiàn)微信朋友圈評論回復功能属百，也將通過一個仿優(yōu)酷視頻評論和回復的Demo來實戰(zhàn)一番记劝，本文將通過利用UITableViewCell嵌套UITableView來實現(xiàn)，希望能為廣大開發(fā)提供一點思路族扰，少走一些彎路厌丑，填補一些細坑。 - iOS實現(xiàn)微信朋友圈評論回復功能（一）
- iOS 實現(xiàn)優(yōu)酷視頻的評論回復功能
二渔呵、效果圖
效果圖.gif
三怒竿、利用UITableViewCell嵌套UITableView來實現(xiàn)
1. 頁面分析
Cell嵌套tableView@2x.png
2. 技術(shù)分析
-
列表展示數(shù)據(jù)流
- 列表通常利用
tableView來實現(xiàn)。 -
tableview實現(xiàn)又分為自動布局和絕對布局（即Frame布局）
自動布局:個人推薦利用Masonry+UITableView-FDTemplateLayoutCell的方案來實現(xiàn)自動布局扩氢。
Frame布局: 事先計算出Cell子控件的Frame以及Cell的高度耕驰，存入ModelFrame里面，雖然計算稍微復雜录豺，但是性能好朦肘，可控性強，易動畫双饥，擴展維護成本低媒抠。
兩種布局方式不是本文的重點，依舊個人喜好咏花，筆者偏好是Frame布局趴生，本文案例也將采用這種方式。
- 列表通常利用
-
Cell里面的昵稱支持點擊跳轉(zhuǎn)用戶信息- 首先明確內(nèi)容支持
attributedString（富文本）而不是text（普通文本）。 - 可以使用
UILabel的attributedText苍匆，或者采用第三方框架TYAttributedLabel和YYText刘急，筆者在此采用的是YYText。
- 首先明確內(nèi)容支持
-
Cell里面嵌套tableView-
UITableView也是繼承UIView浸踩，可以拿他當做普通的View來使用叔汁，無非要設(shè)置tableView.delegate = self和tableView.dataSource = self并實現(xiàn)其代理和數(shù)據(jù)源方法即可。 - 需要設(shè)置嵌套的
tableView.scrollEnable = NO民轴，讓其不可滾動。
-
4. 技術(shù)難點
-
Frame布局計算復雜- 實際項目中球订，我們從服務(wù)器獲取的數(shù)據(jù)后裸，轉(zhuǎn)換為數(shù)據(jù)模型（
Model）,對應(yīng)的數(shù)據(jù)有些不能直接顯示在視圖（View）上，需要二次處理冒滩。tableviewCell高度計算微驶，是tableView使用以及優(yōu)化的重點對象，最好的方式莫過于高度緩存,筆者這里為每個模型（Model）配備一個模型尺寸（ModelFrame）开睡，主要用來計算tableViewCell的高度（cellHeight）因苹，以及子控件的尺寸（frame），而且保證模型（Model）的純凈性以及減少胖模型的生成篇恒。 -
ModelFrame模型持有Model扶檐，并開放cell中各個子控件的Frame屬性，,以及cellHeight緩存cell高度胁艰。注意：這里屬性應(yīng)該設(shè)置為readonly來修飾更為合理款筑。 - 重寫
ModelFrame的Model的setter方法，計算tabelViewCell子控件的Frame以及緩存cell的高度cellHeight腾么。 -
tableViewCell自身持有各自ModelFrame模型奈梳，在tableView的數(shù)據(jù)源給tableViewCellCell時，確定tabelViewCell的子控件的布局（Frame）以及數(shù)據(jù)解虱。
- 實際項目中球订，我們從服務(wù)器獲取的數(shù)據(jù)后裸，轉(zhuǎn)換為數(shù)據(jù)模型（
-
Cell的事件傳遞的復雜性
其中評論用戶信息點擊攘须，評論cell點擊采用的是代理嵌套代理的方式實現(xiàn)。應(yīng)為這兩個事件是在嵌套tableview（評論taleview）的cell上殴泰，中間有個嵌套關(guān)系于宙，暫時沒有找到方法，可以減少這一層嵌套悍汛。個人認為限煞，兩層代理嵌套，是可接受的员凝，并不會太混亂署驻，如有更好的方式，請在評論區(qū)回復。詳情事件處理請查看文章下方給出的Demo地址旺上。
cell嵌套tableView的事件傳遞@2x.png
四瓶蚂、技術(shù)難點
- 設(shè)置文本的額外區(qū)域，防止文字過少宣吱，用戶無法點中文本的
bug窃这。
Label的額外區(qū)域@2x.png
// 文本
YYLabel *contentLabel = [[YYLabel alloc] init];
// 設(shè)置文本的額外區(qū)域，修復用戶點擊文本沒有效果
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]];
}
};
五望侈、期待
- 文章若對您有點幫助印蔬，請給個喜歡??，畢竟碼字不易脱衙；若對您沒啥幫助扛点，請給點建議??，切記學無止境岂丘。
- 針對文章所述內(nèi)容陵究，閱讀期間任何疑問；請在文章底部評論指出奥帘，我會火速解決和修正問題铜邮。
- GitHub地址：https://github.com/CoderMikeHe
