iOS 實現(xiàn)優(yōu)酷視頻的評論回復(fù)功能

一、概述

通過學(xué)習(xí)前面筆者提供的兩種方法來實現(xiàn)類似微信朋友圈的評論回復(fù)功能后,首先,筆者來分析兩者兩者的優(yōu)缺點,以及兩者的使用場景。其次,筆者將通過方式一即用段頭+Cell+段尾 的方法來實戰(zhàn)優(yōu)酷視頻的評論回復(fù)功能,主要分析里面的業(yè)務(wù)邏輯數(shù)據(jù)處理以及細節(jié)處理。最后,希望能為廣大開發(fā)者提供一點思路,少走一些彎路,填補一些細坑。

  • 方式一:使用段頭+Cell+段尾推薦使用

    • 優(yōu)點:評論回復(fù)cell(MHCommentCell)發(fā)揮出了UITableViewCell的重用機制;評論回復(fù)cell(MHCommentCell)的事件傳遞相比方式二少了一層嵌套;ModelFrame的計算針對性強。
    • 缺點:要實現(xiàn)tableView代理的- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section以及- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section方法,以及設(shè)置對應(yīng)的高度,代碼上略微繁瑣。
    • 使用場景:支持無限評論回復(fù)的情況下。
  • 方式二:使用UITableViewCell嵌套UITableView

    • 優(yōu)點:控制器的代碼相比方式一的簡單。
    • 缺點:外層的UITableView發(fā)揮了重用機制,但是Cell嵌套的UITableView未發(fā)揮重用機制,如果有1000條評論回復(fù),那么嵌套的UITableViewCell(MHCommentCell)就得創(chuàng)建1000次,相當(dāng)不合理,性能不好;ModelFrame的計算稍微復(fù)雜,實現(xiàn)的計算好內(nèi)層嵌套的tableView的尺寸;評論回復(fù)cell(MHCommentCell)的事件傳遞,存在兩層代理嵌套。
    • 使用場景:顯示評論回復(fù)有限的情況下。
  • 傳送門

二、效果圖
youkuComment.gif
三、頁面分析
  1. 效果圖
MHYouKuControllers.jpg
  1. 圖中字符對應(yīng)的Controller
    A:MHYouKuController
    B:MHYouKuTopicController (紅色框區(qū)域)
    C:MHYouKuTopicDetailController
    D:MHYouKuCommentController
    注意:文章統(tǒng)一用字符代替對應(yīng)的Controller,怪我懶,望體諒。

  2. 評論面板(MHYouKuInputPanelView

MHYouKuInputPanelView@2x.png
四、需求分析
  1. A控制器和B控制器的的評論數(shù)據(jù)來源問題。
    首先,A控制器和B控制器存在父子關(guān)系,即:[A addChildViewController:B] ,具體使用細節(jié)請參考文末的Demo鏈接。其次,A控制器里面的tableView無法支持下拉刷新上拉加載功能,B控制器里面的tableView支持的,這種需求在視頻類App非常常見,A控制器只是顯示部分評論數(shù)據(jù),點擊評論數(shù)按鈕跳轉(zhuǎn)到B控制器來顯示更多評論數(shù)據(jù)數(shù)據(jù)。終上所述,筆者采取的是在B控制器里面一旦下拉刷新獲取數(shù)據(jù)后,通過代理或者通知,將評論數(shù)據(jù)回調(diào)給A控制器處理即可(PS:筆者在此采用的通知:MHCommentRequestDataSuccessNotification)。

    數(shù)據(jù)來源@2x.png

  2. 評論Cell顯示查看全部xx條回復(fù)的實現(xiàn)問題。
    筆者這里采取了一種巧妙的方式,配置一個前端事先制定的MHComment即可。詳細配置如下

    /** topic --- topicFrame */
    - (MHTopicFrame *)_topicFrameWithTopic:(MHTopic *)topic
    {
        // 這里要判斷評論個數(shù)大于2 顯示全部評論數(shù)
        if (topic.commentsCount>2) {
        // 設(shè)置假數(shù)據(jù)
        MHComment *comment = [[MHComment alloc] init];
        // MHAllCommentsId是前端設(shè)定的
        comment.commentId = MHAllCommentsId;
        comment.text = [NSString stringWithFormat:@"查看全部%zd條回復(fù)" , topic.commentsCount];
        // 添加假數(shù)據(jù)
        [topic.comments addObject:comment];
    }
    
        MHTopicFrame *topicFrame = [[MHTopicFrame alloc] init];
        // 傳遞話題模型數(shù)據(jù),計算所有子控件的frame
        topicFrame.topic = topic;
        return topicFrame;
    }
    
  3. D控制器對視頻,評論成功后,A控制器和B控制器的數(shù)據(jù)同步問題(即:兩者在評論數(shù)據(jù)上保持一致,從而保證在界面上顯示一致)。
    點擊A控制器和B控制器的評論框,即可跳轉(zhuǎn)到D控制器,即D控制器是一對多的關(guān)系。若D控制器對視頻評論成功后,筆者通過通知(通知名字:MHCommentSuccessNotification)的方式,來告知AB控制器作相應(yīng)的操作即可。

    視頻評論@2x.png

  4. 若對AB以及C控制器里面的某個視頻評論進行回復(fù)或者針對某條視頻評論的回復(fù)進行評論,如何保證A控制器和B控制器的數(shù)據(jù)同步問題(即:兩者在評論數(shù)據(jù)上保持一致,從而保證在界面上顯示一致)。
    關(guān)鍵:AB以及C控制器持有的是同一個模型(MHTopicFrame),這樣我們無論對數(shù)據(jù)做了任何操作,只要監(jiān)聽到改變時,刷新數(shù)據(jù)源方法即可。

    評論Or回復(fù)@2x.png

  5. 視頻評論和回復(fù)成功后的數(shù)據(jù)處理問題。
    由于查看全部xx條回復(fù)是前端自己配置,伴隨著視頻的評論Or回復(fù)成功后,數(shù)據(jù)需要做相應(yīng)的判斷(MHYouKuInputPanelViewDelegate)。

    - (void) inputPanelView:(MHYouKuInputPanelView *)inputPanelView attributedText:(NSString *)attributedText
    {
         // 發(fā)送評論 模擬網(wǎng)絡(luò)發(fā)送
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.25f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            // 評論或者回復(fù)成功
            MHComment *comment = [[MHComment alloc] init];
            comment.mediabase_id = self.mediabase_id;
            comment.commentId = [NSString stringWithFormat:@"%zd",[NSObject mh_randomNumber:0 to:100]];
            comment.text = attributedText;
            comment.creatTime = [NSDate mh_currentTimestamp];
        
            MHUser *fromUser = [[MHUser alloc] init];
            fromUser.userId = [AppDelegate sharedDelegate].account.userId ;
            fromUser.avatarUrl = [AppDelegate sharedDelegate].account.avatarUrl;
            fromUser.nickname = [AppDelegate sharedDelegate].account.nickname;
            comment.fromUser = fromUser;
            // 只有回復(fù)  toUser 有值
            if (inputPanelView.commentReply.isReply) {
                MHUser *toUser = [[MHUser alloc] init];
                toUser.avatarUrl = inputPanelView.commentReply.user.avatarUrl;
                toUser.userId = inputPanelView.commentReply.user.userId;
                toUser.nickname = inputPanelView.commentReply.user.nickname;
                comment.toUser = toUser;
            }
            // 這里需要插入假數(shù)據(jù) 提高用戶的體驗度
            MHCommentFrame* newCommentFrame = [[MHTopicManager sharedManager] commentFramesWithComments:@[comment]].lastObject;
            // 這里要插入話題數(shù)據(jù)源中去
            // 修改評論回復(fù)數(shù)目
            self.selectedTopicFrame.topic.commentsCount  =  self.selectedTopicFrame.topic.commentsCount + 1;
            // 判斷數(shù)據(jù)
            if (self.selectedTopicFrame.topic.comments.count>2) 
                // 有查看全部xx條回復(fù) 
                // 插入數(shù)據(jù)
                NSInteger count = self.selectedTopicFrame.commentFrames.count;
                NSInteger index = count - 1;
                [self.selectedTopicFrame.commentFrames insertObject:newCommentFrame atIndex:index];
                [self.selectedTopicFrame.topic.comments insertObject:comment atIndex:index];
    
                // 取出最后一條數(shù)據(jù) 就是查看全部xx條回復(fù) 修改為xx+1條即可
                MHComment *lastComment = self.selectedTopicFrame.topic.comments.lastObject;
                lastComment.text = [NSString stringWithFormat:@"查看全部%zd條回復(fù)" , self.selectedTopicFrame.topic.commentsCount];
             }else if (self.selectedTopicFrame.topic.comments.count == 2) {
                    // 添加數(shù)據(jù)源
                    [self.selectedTopicFrame.commentFrames addObject:newCommentFrame];
                    [self.selectedTopicFrame.topic.comments addObject:comment];
                
                    // 設(shè)置假數(shù)據(jù)
                    MHComment *lastComment = [[MHComment alloc] init];
                    lastComment.commentId = MHAllCommentsId;
                    lastComment.text = [NSString stringWithFormat:@"查看全部%zd條回復(fù)" , self.selectedTopicFrame.topic.commentsCount];
                    MHCommentFrame *lastCommentFrame =  [[MHTopicManager sharedManager] commentFramesWithComments:@[lastComment]].lastObject;
                    // 添加假數(shù)據(jù)
                    [self.selectedTopicFrame.commentFrames addObject:lastCommentFrame];
                    [self.selectedTopicFrame.topic.comments addObject:lastComment];
                }else{
                    // <2的情況 直接添加即可 
                    // 添加數(shù)據(jù)源
                    [self.selectedTopicFrame.commentFrames addObject:newCommentFrame];
                    [self.selectedTopicFrame.topic.comments addObject:comment];
                }
            // 發(fā)送評論回復(fù)成功的通知
            [MHNotificationCenter postNotificationName:MHCommentReplySuccessNotification object:nil userInfo:@{MHCommentReplySuccessKey:self.selectedTopicFrame}]; 
        };
    }
    
五、期待
  1. 文章若對您有點幫助,請給個喜歡??,畢竟碼字不易;若對您沒啥幫助,請給點建議??,切記學(xué)無止境。
  2. 針對文章所述內(nèi)容,閱讀期間任何疑問;請在文章底部評論指出,我會火速解決和修正問題。
  3. GitHub地址:https://github.com/CoderMikeHe
六、代碼

MHDevelopExample_Objective_C - MHYouKuController.h/m

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,791評論 6 545
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,795評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,943評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,057評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,773評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,106評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,082評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,282評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,793評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,507評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,741評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,220評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,929評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,325評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,661評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,482評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,702評論 2 380

推薦閱讀更多精彩內(nèi)容