仿微信聊天界面小项目总结

从开始学习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简单介绍中有详细使用方法。

以上各点就是我在做这个小项目的过程中遇到的一些小问题。

秒客网

仿微信聊天界面小项目总结

相关文章