使用环信demo实现类似QQ那样的会话界面效果

使用环信即时聊天,将昵称和聊天信息显示样式更改成类似QQ的效果。
如图:
更改后的.png

也就是图片的上半部分显示昵称,昵称下面紧跟着聊天信息的效果。如果你还不了解这种效果的话,那么你打开你的手机QQ进入一个群看下就明白了。

注意:我使用的是环信2.0,不是3.0
 
1、更改昵称的位置
全局搜索找到EMChatViewBaseCell.h文件,在该文件中的layoutSubviews方法里面进行更改。

layoutSubviews.png

2、在layoutSubviews更改完成之后,还是在该文件中,然后在setMessageModel方法里面进行一个更改。代码如下图显示。
setmodel.png

3、这样昵称就显示出来了。如果是别人的信息(左侧),昵称在图片的右侧;自己发送的信息,昵称在图片的左侧。到目前位置,显示昵称及位置已经好了,但是问题出现了,聊天信息会遮住了昵称,那么就要往下看了。
4、找到EMChatViewCell.h文件,EMChatViewCell是继承于EMChatViewBaseCell的一个子类,这里主要是显示聊天信息的一个view。在这个文件里面进行聊天信息位置的设定即可。代码如下:
找到EMChatViewCell文件中的layoutSubviews方法,在这个里面进行设置即可。
将bubbleFrame.origin.y = self.headImageView.frame.origin.y;
改成
bubbleFrame.origin.y = self.headImageView.frame.origin.y + 15;即可
这layoutSubviews方法里面有俩个地方要改。如下图显示

viewset.png

 


 如果上面更改成功了,那么就完成了,可以看看效果了。如图

更改后的.png

 
 
 

3 个评论

这位开发者写得很快,非常棒,已打赏16,非常感谢开发者们的分享。
之前就琢磨 实现这个功能,还没做出来呢。少侠好本领,赞赏16圆!
没提呢!我就提了上一个给我打赏的。

要回复文章请先登录注册

知识价值的认可,源自您的赞赏

扫描二维码,你的支付将由imGeek代收后转给对方

×