iOS开发 - 第02篇 - UI进阶 - 04 - QQ聊天界面

实现：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> 根据上述匹配结果，添加自动回复数据模型，并更新数据