环信 - 进阶篇之自定义cell(一)

作者: 带你去旅行 | 来源:发表于2017-06-20 09:35 被阅读1149次

    环信 - 进阶篇之自定义cell(二)  

    更新:(1)缩略图宽度不够导致定制cell内控件挤压 -2017.06.29

    现在的即时通讯,普通的聊天越来越难以满足变态的需求了,这里加个按钮、这里加个时间、那里加个禁言、那里加个匿名私聊......

    今天就给大家介绍下怎么对cell中的各种需求的定制处理

    大家觉得满意的请点个❤️❤️

    例:我就拿之前帮人解决的一个案例来讲解方法及实现,大家可以借鉴处理的过程及思路,如有不妥之处,请大家及时留言告知,谢谢。

    效果图

    类型一:在现有会话cell上修改UI效果

    类似于上面给出的截图,我们有时候需要对环信官方给出的cell进行些许的调整。例如:项目中加入了不同于普通群聊或者聊天室的功能需求

    话题聊天室

    点击话题聊天,大家加入聊天室,这里发出的各种就是不同于普通聊天,普通的聊天只需展示文字、地址、图片等等,但是这里的需求是得加上时间、私聊按钮,没砍需求之前是还有点赞和取消赞的按钮。

    案例

    我们在普通聊天的基础上新建几个cell,文字、语音、图片、地图等等,不能和原有的普通cell混合起来,因为需求有普通聊天。

    定制cell EaseBubbleView

    直接把普通聊天cell中的代码拷贝过来,再在此基础上进行cell的UI自定义处理,就拿文字聊天时的处理情况为例:

    1、拷贝复制原有普通聊天cell内的代码

    2、把需要的新增的UI控件初始化

    3、适配各类控件

    4、传值及赋值

    5、新增按钮点击和本身cell的点击效果处理(别和cell上的点击效果混到一起)

    6、耐心调整cell上UI效果

    以上基本就是简单的自定义cell步骤了,有基础的小伙伴看下步骤应该就有思路了

    类型二:类似于红包和名片Cell的UI效果

    通常在我们项目中,并不只有文字、图片等等这些简单的聊天内容,有时候我们需要把自己的信息作为一张名片发给对方、发个红包给好朋友、发一个项目中的一个模块介绍给对方等等功能要求。

    范例

    我们就拿雷哥的这张假名片为例:😂😂😂😂😂😂😂😂😂😂😂😂

    /*!

    @method

    @brief 新增一个新的功能按钮

    @discussion

    @param image 按钮图片

    @param highLightedImage 高亮图片

    @param title 按钮标题

    @result

    */

    - (void)insertItemWithImage:(UIImage*)image

    highlightedImage:(UIImage*)highLightedImage

    title:(NSString*)title;

    /*!

    @method

    @brief 修改功能按钮图片

    @discussion

    @param image 按钮图片

    @param highLightedImage 高亮图片

    @param title 按钮标题

    @param index 按钮索引

    @result

    */

    - (void)updateItemWithImage:(UIImage*)image

    highlightedImage:(UIImage*)highLightedImage

    title:(NSString*)title

    atIndex:(NSInteger)index;

    /*!

    @method

    @brief 根据索引删除功能按钮

    @discussion

    @param index 按钮索引

    @result

    */

    - (void)removeItematIndex:(NSInteger)index;

    新增的功能

    因为我们不好去修改环信的会话类型

    *  消息体类型

    typedef enum{

    EMMessageBodyTypeText  = 1,    /*! \~chinese 文本类型 \~english Text */

    EMMessageBodyTypeImage,        /*! \~chinese 图片类型 \~english Image */

    EMMessageBodyTypeVideo,        /*! \~chinese 视频类型 \~english Video */

    EMMessageBodyTypeLocation,      /*! \~chinese 位置类型 \~english Location */

    EMMessageBodyTypeVoice,        /*! \~chinese 语音类型 \~english Voice */

    EMMessageBodyTypeFile,          /*! \~chinese 文件类型 \~english File */

    EMMessageBodyTypeCmd,          /*! \~chinese 命令类型 \~english Command */

    }EMMessageBodyType;

    如果环信把这个开放出来,或许我们就更加简单了我们只需自己修改成自己对应的类型即可。但是这个目前就想想,所以我们可以在以上类型中找一个出来,在它的基础上做些文章,变成我们想要的类型。

    红包和名片最像什么。。。。对,不就和图片差不多嘛,不过小伙伴也不要以为只能拿图片来做文章,其他的我们都可以拿来用,这里就拿文字类型来作为例子(原理都一样)。

    名片类型

    这里我们只简要介绍怎么根据会话类型来显示名片,具体传值等怎么做,有基础的小伙伴应该都懂,不懂的小伙伴见文章底部。

    1、我们需要在发送名片时,在拓展消息里面存一个名片的字段,这个字段可以被用来判断是名片、红包等等。

    2、名片、红包等等中内容,同样也存在拓展属性中(这里不做过多介绍)

    3、我们在展示自己的消息和接收到对方的消息时,在文字类型的基础上再进一步判断是什么类型,加载对应类型的视图,如果是红包就加载红包的view,如果是名片就展示名片view......

    加载不同类型的cell

    好了,以上就是我们所要介绍的两种不同类型cell的处理办法。

    以下是补充自定义cell时遇到的各种情况及处理:

    1、cell上语音、图片等原始点击和新增按钮点击冲突处理:

    注释掉原有的点击方法,把原有的点击方法放到具体的控件上去,避免cell上多个控件点击的冲突

    重点:记得把气泡上的点击权限打开

    _backgroundImageView.userInteractionEnabled = YES;

    解决点击冲突

    2、cell上语音气泡长度的改变,避免过段影响布局

    我们只需把原有语音上的语音长度Label距语音图片控件调大一点距离就能自动把语音类气泡拉长。(其他类型一样处理原理)

    语音气泡拉长

    3、因新增控件导致在原有cell上高度的变化处理

    /*! @method @brief 根据消息的内容,获取当前cell的高度 @discussion @param model        消息对象model @result 返回cell高度 */

    + (CGFloat)cellHeightWithModel:(id)model

    在原cell高度处理的情况下,根据各种类型的判断进行cell高度的自适应。

    cell高度处理

    4、文字类型气泡长度的处理

    我暂时的处理方法:判断输入的文字长度,加入文字长度小于10,我会在后面自动补全5个空格,被动撑长气泡的长度。

    假如小伙伴们有更好的建议也可以留言

    5、缩略图宽度不够导致定制cell内控件挤压

    全局搜索kEMMessageImageSizeHeight这个字段,修改宽度即可。

    6、。。。。。。

    暂时没有想到要公布出的处理方法,如果小伙伴们有遇到的问题,可以及时在下方留言,如果我遇到过并处理过的会及时更新处理方法,谢谢大家。

    如果大家伙有自己的处理方法及见解也可以提出来,我会收录下来并且著名出自来源。

    (1)iOS 环信(3.1.5)快速集成单聊、群聊、视频及语音通话-新手

    (2)iOS 环信昵称、头像、群头像、群名称处理

    (3)购物车的逻辑及处理

    (4)iOS 下拉上划导航栏变化处理详解 + 头视图放大

    (5)购物首页类型界面原理及实现 - 初稿

      、、、、、、、、、、、、、、、、、、、

    有问题或者不理解的可以找我 ------ qq:1804094055 

    相关文章

      网友评论

        本文标题:环信 - 进阶篇之自定义cell(一)

        本文链接:https://www.haomeiwen.com/subject/psakqxtx.html