实现:QQ聊天界面程序


源代码下载地址:点击打开链接


1、QQ聊天界面




2、初步思路



1> 搭建界面

1. 拖入程序图标和启动图片

2. Storyboard中添加UITableView和下面的UIView

2> 设置UITableView代理

3> 建立HMMessageModel模型

1. 注:将type(表示谁发的),定义成一个枚举变量,不要使用BOOL或者int

4> 建立HMMessageCell自定义Cell

1. 注:在Cell中关于UI的属性一般用weak

2. 在initWithStyle函数(模板自动生成)中初始化

3.注:使用了weak以后,不能使用以下方法初始化

self.time = [[UILabelalloc] init];

此时,由于是weak,对象一创建,又马上被销毁,但是若采用下面的方法创建,则对象已经添加到self.contentView中,因此只要父窗口没有被销毁,子窗口就不会被销毁。


iOS 聊天框架 ios 聊天界面_UITableView



4. 在Cell中添加类方法,快速创建Cell,注意要有可重用标识符

5> 在ViewController中实现数据源代理,做初步测试


3、添加Frame模型 - 每个Cell行高需要根据模型计算



1> 在HMMessageModel属性的setter方法中,计算每个控件的位置(注意使用readOnly),并且一定不要忘记加上:_message = message;

2> 增加一个Constant.h头文件,用于保存所有常量,如屏幕宽度,常用高度

#define kScreenWidth [[UIScreen mainScreen] bounds].size.width

#define kNomalHeight 44

注1:到此为止的基本思路同微博界面。

注2:要显示多行文本,必须将label.numberOfLines = 0;


4、界面优化



1> Cell不可选中

self.tableView.allowSelection = NO;

2> 隐藏相同的时间

1. 在HMMessage模型中添加一个BOOL属性,判断是否需要隐藏

2. 在取出模型的时候,比较当前模型的时间和前一个模型的时间,若相同则隐藏(设置其Frame为0即可)


iOS 聊天框架 ios 聊天界面_iOS开发_02



3> 输入栏布局

4> 设置Cell中文字按钮的背景图片

1. 设置文字内间距(按钮中文字区域与整个按钮的内间距)

btn.contentEdgeInsets = …

2. 重新设置按钮的frame


iOS 聊天框架 ios 聊天界面_iOS开发_03



3. 文字按钮背景图片拉伸 --- 重要

详见博客:点击打开链接


iOS 聊天框架 ios 聊天界面_iOS开发_04




注:可将此方法抽出来作为UIImage的分类方法

4. 在Cell的初始化函数中,将Cell的背景色清空


iOS 聊天框架 ios 聊天界面_iOS 聊天框架_05




5. 在ViewController设置TableView的背景颜色和取消分隔线


iOS 聊天框架 ios 聊天界面_UITableViewCell_06



5、键盘处理


5.1 通知机制


详见博客:点击打开链接


1> 通知中心 & 通知


iOS 聊天框架 ios 聊天界面_iOS 聊天框架_07


iOS 聊天框架 ios 聊天界面_UITableViewCell_08


2> 注册通知监听器


iOS 聊天框架 ios 聊天界面_iOS开发_09


iOS 聊天框架 ios 聊天界面_iOS开发_10


3> 发布通知


iOS 聊天框架 ios 聊天界面_图片拉伸_11


4> 取消注册监听通知器


iOS 聊天框架 ios 聊天界面_UITableViewCell_12


5.2 通知和代理的区别 --- 重要


iOS 聊天框架 ios 聊天界面_UITableView_13


5.3 键盘通知


iOS 聊天框架 ios 聊天界面_iOS 聊天框架_14


iOS 聊天框架 ios 聊天界面_UITableViewCell_15



5.4 键盘处理思路


思路:在键盘出现的时候,将控制器的View向上挪动键盘的高度,即可以使得键盘不遮盖输入框。

1> 注册监听通知器


iOS 聊天框架 ios 聊天界面_iOS 聊天框架_16



注:上面的键盘通知应该是willChange…

2> 滚动tableView结束编辑


iOS 聊天框架 ios 聊天界面_UITableViewCell_17


3> 键盘的通知的userInfo --- 注意位置信息


iOS 聊天框架 ios 聊天界面_UITableView_18


4> 监听方法


iOS 聊天框架 ios 聊天界面_图片拉伸_19



5.5 改变window背景色 --- 重要


问题:由于window默认黑色,Controller的View都是建立在window之上,因此当键盘出现隐藏,TableView滚动的时候,会出现一条黑边。

解决:将window的背景色设置为TableView的背景色。


iOS 聊天框架 ios 聊天界面_UITableView_20


注:这句话要在tableView对象生成以后。


5.6 输入框光标左移一小段距离


iOS 聊天框架 ios 聊天界面_图片拉伸_21


5.7 改变键盘显示


iOS 聊天框架 ios 聊天界面_UITableView_22


6、自动回复处理


6.1 发送文本实现



思路:点击发送后,更新模型数据,重新刷新tableView

1> 让控制器称为textField的代理,并实现代理以下方法


iOS 聊天框架 ios 聊天界面_iOS开发_23


2> 点击发送后,添加模型数据


iOS 聊天框架 ios 聊天界面_UITableView_24


3> 刷新数据 & 上移表格


iOS 聊天框架 ios 聊天界面_iOS 聊天框架_25



注:此刷新方法试试用团购中下拉刷新的方法代替insertRowAtIndexPath:

4> 点击发送后,清空文本框

self.inputView.text = nil;



6.2 自动回复实现


1> 抽取上述添加数据模型的方法

2> 懒加载导入自动回复数组

3> 遍历输入框的文字,判断是否有字符与自动回复中的数据匹配


iOS 聊天框架 ios 聊天界面_UITableView_26


4> 根据上述匹配结果,添加自动回复数据模型,并更新数据