iOS开发之微信聊天页面实现

  在上篇博客iOS开发之微信聊天工具栏的封装中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写。在聊天页面中主要用到了TableView的知识,还有如何在俩天中显示我们发送的表情,具体请参考之前的博客:IOS开发之显示微博表情,在这儿就不做赘述啦。在聊天页面用到了三对,六种Cell,不过cell的复杂度要比之前的新浪微博(IOS开发之新浪围脖)简单的多。废话少说吧,还是先来几张效果图,在给出实现代码吧。

聊天界面的效果图如下:在下面的聊天界面中中用到了3类cell,一类是显示文字和表情的,一类是显示录音的,一类是显示图片的。当点击图片时会跳转到另一个Controller中来进行图片显示,在图片显示页面中添加了一个捏合的手势(关于手势,请参考:iOS开发之手势识别)。点击播放按钮,会播放录制的音频,cell的大学会根据内容的多少来调整,而cell中textView的高度是通过约束来设置的。

  一,定义我们要用的cell,代码如下:

1,显示表情和text的cell,代码如下,需要根据NSMutableAttributedString求出bound,然后改变cell上的ImageView和TextView的宽度的约束值,动态的调整气泡的大小,具体代码如下:

 

2.显示图片的cell,通过block回调把图片传到Controller中,用于放大图片使用。

 

3.显示录音的cell,点击cell上的button,播放对应的录音,代码如下:

 

 

  二,cell搞定后要实现我们的ChatController部分 

1.ChatController.m中的延展和枚举代码如下:

 

2.实现工具栏中的回调的代码如下,通过Block,工具栏和ViewController交互,具体ToolView的Block实现,请参考上一篇博客(iOS开发之微信聊天工具栏的封装),聊天工具栏使用代码如下:

 

3.把聊天工具栏中返回的内容显示在tableView中,代码如下:

 

4.根据ToolView中回调接口,获取工具栏中textView的ContentSize,通过ContentSize来调整ToolView的高度约束,代码如下:

 

5.从本地获取图片,并显示在相应的Cell上,代码如下:

 

6.把NSString 转换成NSMutableAttributeString,用于显示表情,代码如下:

 

7.根据Cell显示内容来调整Cell的高度,代码如下:

 

8.根据cell内容和用户类型,来选择Cell,代码如下:

 

9.点击发送的图片来放大图片代码如下:

 

10.根据键盘的高度来调整ToolView的位置,代码如下:

 

  三,代码有点多,不过在关键的部分都加有注释,在图片显示View中通过捏合手势来调整图片的大小,代码如下:

 

上面的东西是在本地做的测试,没有加上XMPP即时通讯协议,以后的博客会通过服务器转发来进行聊天,并且会继续对微信进行完善,感兴趣的小伙伴继续关注吧。转载请注明出处。

Demo地址:https://github.com/lizelu/WeChat

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 8 收藏 1 评论

关于作者:青玉伏案

乐于分享,广交善缘。走在技术的路上,一直在学习中。(http://www.cnblogs.com/ludashi/)https://github.com/lizeluQQ群:310800319 个人主页 · 我的文章 · 3 ·    

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部