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

一、概述
  • iOS开发中,相信许多开发者都遇到过,类似于像微信朋友圈的评论回复功能的开发,难点莫过于 Cell里面的子控件布局点击事件的回调评论回复的逻辑处理
  • 笔者将通过 两种方法来实现微信朋友圈评论回复功能,也将通过一个仿优酷视频评论和回复的Demo 来实战一番,本文将通过利用UITableViewCell嵌套UITableView来实现,希望能为广大开发提供一点思路,少走一些弯路,填补一些细坑。
  • iOS实现微信朋友圈评论回复功能(一)
  • iOS 实现优酷视频的评论回复功能
二、效果图
效果图.gif
三、利用UITableViewCell嵌套UITableView来实现
1. 页面分析
Cell嵌套tableView@2x.png
2. 技术分析
  • 列表展示数据流

    • 列表通常利用tableView来实现。
    • tableview实现又分为自动布局绝对布局(即Frame布局
      自动布局:个人推荐利用Masonry+UITableView-FDTemplateLayoutCell的方案来实现自动布局。
      Frame布局: 事先计算出Cell子控件的Frame以及Cell的高度,存入ModelFrame里面,虽然计算稍微复杂,但是性能好,可控性强,易动画,扩展维护成本低
      两种布局方式不是本文的重点,依旧个人喜好,笔者偏好是Frame布局,本文案例也将采用这种方式。
  • Cell里面的昵称支持点击跳转用户信息

    • 首先明确内容支持 attributedString(富文本)而不是text(普通文本)
    • 可以使用 UILabelattributedText,或者采用第三方框架TYAttributedLabelYYText,笔者在此采用的是YYText
  • Cell里面嵌套tableView

    • UITableView也是继承UIView,可以拿他当做普通的View来使用,无非要设置tableView.delegate = selftableView.dataSource = self并实现其代理数据源方法即可。
    • 需要设置嵌套的tableView.scrollEnable = NO,让其不可滚动。
4. 技术难点
  • Frame布局计算复杂
    1. 实际项目中,我们从服务器获取的数据,转换为数据模型(Model),对应的数据有些不能直接显示在视图(View)上,需要二次处理。tableviewCell高度计算,是tableView使用以及优化的重点对象,最好的方式莫过于高度缓存,笔者这里为每个模型(Model)配备一个模型尺寸(ModelFrame),主要用来计算tableViewCell的高度(cellHeight),以及子控件的尺寸(frame),而且保证模型(Model)的纯净性以及减少胖模型的生成。
    2. ModelFrame模型持有Model,并开放cell中各个子控件的Frame属性,,以及cellHeight缓存cell高度。注意:这里属性应该设置为readonly来修饰更为合理。
    3. 重写ModelFrameModelsetter方法,计算tabelViewCell子控件的Frame以及缓存cell的高度cellHeight
    4. tableViewCell自身持有各自ModelFrame模型,在tableView的数据源给tableViewCellCell时,确定tabelViewCell的子控件的布局(Frame)以及数据。
  • Cell的事件传递的复杂性
    其中评论用户信息点击评论cell点击采用的是代理嵌套代理的方式实现。应为这两个事件是在嵌套tableview评论taleview)的cell上,中间有个嵌套关系,暂时没有找到方法,可以减少这一层嵌套。个人认为,两层代理嵌套,是可接受的,并不会太混乱,如有更好的方式,请在评论区回复。详情事件处理请查看文章下方给出的Demo地址。
cell嵌套tableView的事件传递@2x.png
四、技术难点
  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 - MHTopicTwoController.h/m

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 118,716评论 1 241
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 51,755评论 1 200
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 73,983评论 0 167
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 36,280评论 0 127
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 43,096评论 1 206
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 35,774评论 1 125
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 27,750评论 2 207
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 26,881评论 0 119
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 25,847评论 5 172
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 29,937评论 0 178
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 27,142评论 1 168
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 28,402评论 1 178
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 22,706评论 0 25
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 25,320评论 2 164
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 29,167评论 3 172
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 24,161评论 0 4
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 24,200评论 0 113
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 30,371评论 2 189
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 30,793评论 2 188

推荐阅读更多精彩内容

  • 一、概述 iOS开发中,相信许多开发者都遇到过,类似于像微信朋友圈的评论回复功能的开发,难点莫过于 Cell里面的...
    CoderMikeHe阅读 32,948评论 115 243
  • 转载微信朋友圈评论列表功能简单实现 概述 最近朋友问了一个微信朋友圈评论列表的实现,加之以前也做过类似的功能,这两...
    阶前梧叶阅读 5,606评论 1 26
  • 2017.02.22 可以练习,每当这个时候,脑袋就犯困,我这脑袋真是神奇呀,一说让你做事情,你就犯困,你可不要太...
    Carden阅读 1,199评论 0 1
  • 今天这个游记主要写的是威尼斯 但是讲真,一同游览的另一个海边小镇希尔苗内的体验甚至比威尼斯更好~所以题目其实想表达...
    伊伦迪尔阅读 588评论 0 0