实现: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中,因此只要父窗口没有被销毁,子窗口就不会被销毁。
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即可)
3> 输入栏布局
4> 设置Cell中文字按钮的背景图片
1. 设置文字内间距(按钮中文字区域与整个按钮的内间距)
btn.contentEdgeInsets = …
2. 重新设置按钮的frame
3. 文字按钮背景图片拉伸 --- 重要
详见博客:点击打开链接
注:可将此方法抽出来作为UIImage的分类方法
4. 在Cell的初始化函数中,将Cell的背景色清空
5. 在ViewController设置TableView的背景颜色和取消分隔线
5、键盘处理
5.1 通知机制
详见博客:点击打开链接
1> 通知中心 & 通知
2> 注册通知监听器
3> 发布通知
4> 取消注册监听通知器
5.2 通知和代理的区别 --- 重要
5.3 键盘通知
5.4 键盘处理思路
思路:在键盘出现的时候,将控制器的View向上挪动键盘的高度,即可以使得键盘不遮盖输入框。
1> 注册监听通知器
注:上面的键盘通知应该是willChange…
2> 滚动tableView结束编辑
3> 键盘的通知的userInfo --- 注意位置信息
4> 监听方法
5.5 改变window背景色 --- 重要
问题:由于window默认黑色,Controller的View都是建立在window之上,因此当键盘出现隐藏,TableView滚动的时候,会出现一条黑边。
解决:将window的背景色设置为TableView的背景色。
注:这句话要在tableView对象生成以后。
5.6 输入框光标左移一小段距离
5.7 改变键盘显示
6、自动回复处理
6.1 发送文本实现
思路:点击发送后,更新模型数据,重新刷新tableView
1> 让控制器称为textField的代理,并实现代理以下方法
2> 点击发送后,添加模型数据
3> 刷新数据 & 上移表格
注:此刷新方法试试用团购中下拉刷新的方法代替insertRowAtIndexPath:
4> 点击发送后,清空文本框
self.inputView.text = nil;
6.2 自动回复实现
1> 抽取上述添加数据模型的方法
2> 懒加载导入自动回复数组
3> 遍历输入框的文字,判断是否有字符与自动回复中的数据匹配
4> 根据上述匹配结果,添加自动回复数据模型,并更新数据