仿微信聊天界面小项目总结
从开始学习ios时,做这个小项目就卡了很久,到现在这个小项目算是我做的比较熟练的一个了,大概模型做出来了,做的比较粗糙,看起来挺挫的,呵呵。oc和swift两个版本都顺利完成了。因此总结一下曾经在这个小项目中遇到的种种问题!
效果图:
微信聊天界面主要内容有五部分构成:
1.TableView部分,设置好各种必须的代理;
2.TableViewCell部分,在自定义cell中要设置好三个控件的位置,这也是整个过程中最麻烦的部分;
3.设置TextField部分发送消息时,界面消息的刷新和TextField代理的设置。
4.设置ejabberd服务器。
5.通过xmpp实现通信。
第一部分:
主要设置TableView的必备代理;
cell的高度,section的数量,rownumber的数量,cell这几个简单的设置。需要注意的是:在设置单元格高度的时候需要计算出每次聊天内容的长度,通过聊天内容的高度来动态计算cell的高度。
第二部分:
在聊天过程中,由于两个人的头像和对话框在界面的两边,因此需要判断朋友和自己的不同位置。
在cell中主要设置三个控件的位置-->[头像(UIImageView),聊天气泡(UIImageView),聊天文字(UILabel)],通过动态计算各自控件的frame。
头像的大小固定设置,注意:聊天内容和气泡的大小,主要通过计算输入文字的长度,这个size的大小通过这个方法:
#define talkMax 200 @implementation UILabel (Resize) -(CGSize)Resize:(NSString *)message{ NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:17]}; CGSize size = [message boundingRectWithSize:CGSizeMake(talkMax, 1000) options:NSStringDrawingUsesLineFragmentOrigin attributes:attribute context:nil].size; return size; }
其次需要注意的是:气泡图片的如果按照原图设计会失真,因此通过类别为UIImage添加一个新方法:
-(UIImage *)Resize:(UIImage *)image{ float top = image.size.width * 0.6; float buttom = image.size.width * 0.5; float avar = image.size.width * 0.5; return [image resizableImageWithCapInsets:UIEdgeInsetsMake(top, avar, buttom, avar) resizingMode:UIImageResizingModeStretch]; }
第三部分:
自己消息的发送通过textfield的代理来推送实现,在nsmutablearray中添加新数据,并更新tableview数据。
由于每次编辑聊天内容时都会弹出键盘,遮住textfield,我们通过一个kvo广播来得到键盘的高度和弹出动画时间,然后加一个动画效果来实现键盘和textfield一起移动。具体实现在键盘高度设定那篇随笔中有详细描述。
第四部分:
ejabberd虚拟服务器的配置,只需要设置好自己的用户域名,添加一些好友进去就可以实现。好友的聊天客户端通过mac自带的Imessage或者Aduim添加一个ejabberd账户就可以了。
注:在使用ejabberd服务器时,登录页面并输入用户名和密码后并未出现登录页,不知道是否浏览器问题,需要再次start一次ejabberd,便可登录了。
第五部分:
使用xmpp来实现消息的收发和好友状态的改变,以及用户登录。
在xmpp简单介绍中有详细使用方法。
以上各点就是我在做这个小项目的过程中遇到的一些小问题。