iOS 實現優酷視頻的評論回復功能

一、概述

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

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

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

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

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

  2. 評論面板(MHYouKuInputPanelView

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

    數據來源@2x.png

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

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

    視頻評論@2x.png

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

    評論Or回復@2x.png

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

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

MHDevelopExample_Objective_C - MHYouKuController.h/m

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

推薦閱讀更多精彩內容