iOS开发 - 第02篇 - UI进阶 - 04 - QQ聊天界面
2016-05-21 14:30
288 查看
实现:QQ聊天界面程序
源代码下载地址:点击打开链接
![](http://img.blog.csdn.net/20160521144948153)
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中,因此只要父窗口没有被销毁,子窗口就不会被销毁。
![](http://img.blog.csdn.net/20160521144951936)
4. 在Cell中添加类方法,快速创建Cell,注意要有可重用标识符
5> 在ViewController中实现数据源代理,做初步测试
2> 增加一个Constant.h头文件,用于保存所有常量,如屏幕宽度,常用高度
#define kScreenWidth [[UIScreen mainScreen] bounds].size.width
#define kNomalHeight 44
注1:到此为止的基本思路同微博界面。
注2:要显示多行文本,必须将label.numberOfLines
= 0;
self.tableView.allowSelection = NO;
2> 隐藏相同的时间
1. 在HMMessage模型中添加一个BOOL属性,判断是否需要隐藏
2. 在取出模型的时候,比较当前模型的时间和前一个模型的时间,若相同则隐藏(设置其Frame为0即可)
![](http://img.blog.csdn.net/20160521144955013)
3> 输入栏布局
4> 设置Cell中文字按钮的背景图片
1. 设置文字内间距(按钮中文字区域与整个按钮的内间距)
btn.contentEdgeInsets = …
2. 重新设置按钮的frame
![](http://img.blog.csdn.net/20160521144959264)
3. 文字按钮背景图片拉伸 --- 重要
详见博客:点击打开链接
![](http://img.blog.csdn.net/20160521145002622)
注:可将此方法抽出来作为UIImage的分类方法
4. 在Cell的初始化函数中,将Cell的背景色清空
![](http://img.blog.csdn.net/20160521145005796)
5. 在ViewController设置TableView的背景颜色和取消分隔线
![](http://img.blog.csdn.net/20160521145009029)
1> 通知中心 & 通知
![](http://img.blog.csdn.net/20160521145012765)
![](http://img.blog.csdn.net/20160521145015732)
2> 注册通知监听器
![](http://img.blog.csdn.net/20160521145019577)
![](http://img.blog.csdn.net/20160521151228871)
3> 发布通知
![](http://img.blog.csdn.net/20160521151325337)
4> 取消注册监听通知器
![](http://img.blog.csdn.net/20160521151412608)
![](http://img.blog.csdn.net/20160521151459969)
![](http://img.blog.csdn.net/20160521151542776)
![](http://img.blog.csdn.net/20160521151603182)
1> 注册监听通知器
![](http://img.blog.csdn.net/20160521151739035)
注:上面的键盘通知应该是willChange…
2> 滚动tableView结束编辑
![](http://img.blog.csdn.net/20160521151745230)
3> 键盘的通知的userInfo --- 注意位置信息
![](http://img.blog.csdn.net/20160521151752176)
4> 监听方法
![](http://img.blog.csdn.net/20160521152120695)
解决:将window的背景色设置为TableView的背景色。
![](http://img.blog.csdn.net/20160521152240588)
注:这句话要在tableView对象生成以后。
![](http://img.blog.csdn.net/20160521152359027)
![](http://img.blog.csdn.net/20160521152404481)
1> 让控制器称为textField的代理,并实现代理以下方法
![](http://img.blog.csdn.net/20160521152601562)
2> 点击发送后,添加模型数据
![](http://img.blog.csdn.net/20160521152645813)
3> 刷新数据 & 上移表格
![](http://img.blog.csdn.net/20160521152650407)
注:此刷新方法试试用团购中下拉刷新的方法代替insertRowAtIndexPath:
4> 点击发送后,清空文本框
self.inputView.text = nil;
2> 懒加载导入自动回复数组
3> 遍历输入框的文字,判断是否有字符与自动回复中的数据匹配
![](http://img.blog.csdn.net/20160521152654078)
4> 根据上述匹配结果,添加自动回复数据模型,并更新数据
源代码下载地址:点击打开链接
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 发送文本实现
思路:点击发送后,更新模型数据,重新刷新tableView1> 让控制器称为textField的代理,并实现代理以下方法
2> 点击发送后,添加模型数据
3> 刷新数据 & 上移表格
注:此刷新方法试试用团购中下拉刷新的方法代替insertRowAtIndexPath:
4> 点击发送后,清空文本框
self.inputView.text = nil;
6.2 自动回复实现
1> 抽取上述添加数据模型的方法2> 懒加载导入自动回复数组
3> 遍历输入框的文字,判断是否有字符与自动回复中的数据匹配
4> 根据上述匹配结果,添加自动回复数据模型,并更新数据
相关文章推荐
- private static final long serialVersionUID
- Linkit 7688 DUO(四): 接上各种Arduino传感器和模块——基础篇
- Rails Mysql Incorrect string value
- 自定义一个UITableViewHeaderFooterView、UITableViewCell需要注意的一些方法。
- 阿里巴巴Druid数据源的配置与使用
- 单调队列 HDU 3530 Subsequence
- EF6 SQL Logging – Part 3: Interception building blocks | One Unicorn
- POJ 1239-Increasing Sequences(LIS 分割成上升序列-两次DP)
- 精简版、GHOST版win7,arduino驱动安装失败的解决方法分享
- UE4 自定义物理表面类型(Surface Type)
- easyUI常用API
- JAVA GUI随笔
- Arduino 和 ADXL335 三轴加速计 基本例程
- UISlider
- UI界面
- BZOJ 4511 Subsequences Summing to Sevens (前缀和)
- UIKeyboardTaskQueue waitUntilAllTasksAreFinished
- 基础算法1——分治(divide and conquer)【未完待续】
- StringBuffer-StringBuilder概述
- BlockingQueue深入分析