难点
- 因为聊天长度不一样,需要设置自适应高度
- 发送信息后,需要使tableView添加一条cell,并更新
- cell的所有子视图需要清除,否则会有bug(在最后会附上不清除子视图的效果)
- 键盘弹出界面上移,点击空白处键盘回收,界面下移
思路
- 聊天界面的对话其实就是一个tableView,创建一个可变数组记录每句话的高度,根据话语的高度设置单元格高度
- 按发送键时插入一条新cell在最底端,获取该条对话的高度,存入数组,并让界面随着消息上移
- 对话的label和聊天气泡的imageView随着对话的长度改变位置(这里没有什么一定的距离,自己观察在适合的顺眼的地方就成)
需要用到的方法的大致解析(只是简单的介绍,如果想要仔细理解推荐再去看看别的博客)
有的内容是我从别的博客中看到的,如有侵权请私聊我
有些我认为不太容易理解的方法在代码中也会有注释
-
boundingRectWithSize: options: attributes: context:
用于计算自适应高度
P1:文本显示的最大宽度和最大高度
P2:计算的类型 NSStringDrawingUsesLineFragmentOrigin 绘制文本时使用,一般使用这项
P3:文本属性
P4:包括一些信息,例如如何调整字间距以及缩放。该参数一般可为 nil -
NSDictionary *attri = @{NSFontAttributeName:[UIFont systemFontOfSize:18]};
设置字典数组字体大小为18
另外, 方法 NSForegroundColorAttributeName 为设置字典数组字体颜色
NSBackgroundColorAttributeName: 设置背景颜色 -
insertRowsAtIndexPaths: withRowAnimation:
在索引路径处插入行
P1: 想要该行数之后
P2: 指定插入单元格时要执行的动画类型
此处我们使用UITableViewRowAnimationBottom动画类型,从底部滑入或滑出
另外:
UITableViewRowAnimationFade, 淡入或淡出UITableViewRowAnimationRight, 从右侧滑入或滑出 UITableViewRowAnimationLeft,从左侧滑入或滑出UITableViewRowAnimationTop, 从顶部滑入或滑出UITableViewRowAnimationBottom, 从底部滑入或滑出UITableViewRowAnimationNone, 使用默认动画,上部或下部cell,上下移动覆盖掉要删除的cell
可参考简书 : UITableViewRowAnimation 描述及Demo -
NSNotificationCenter
观察者,在该代码中我们用于监测键盘的弹出及回收
具体了解可看苹果公司: NSNotificationCenter -
scrollToRowAtIndexPath: atScrollPosition: animated:
滚动视图至指定位置,该代码中我们用它来滚动视图(随着消息上移)
P1: 索引行
P2:标识row滚动结束时表视图中的相对位置
P3: 是否产生动画效果(即缓冲)
另外:
UITableViewScrollPositionNone 表格视图以最小的移动滚动感兴趣的行,使其完全可见。如果该行已完全可见,则不会进行滚动
UITableViewScrollPositionTop 表视图将感兴趣的行滚动到可见表视图的顶部。
UITableViewScrollPositionMiddle 表视图将感兴趣的行滚动到可见表视图的中间。
UITableViewScrollPositionBottom 表视图将感兴趣的行滚动到可见表视图的底部。 -
animateWithDuration: animations:
P1:动画持续时间
P2:方法, 这里让视图恢复原来的位置就好
前面说了这么多,下来放代码
GitHub地址
代码
此处我采用导航栏跳转的方式跳转至该界面,在第一个界面中设置点击跳转事件就好
ViewController.m 里:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
ChatViewController *chat = [[ChatViewController alloc]

本文详细介绍了如何在iOS应用中实现自适应高度的聊天界面,包括处理不同长度的消息、动态调整单元格高度、键盘弹出时界面调整等关键点。
&spm=1001.2101.3001.5002&articleId=98939510&d=1&t=3&u=e364733b1bdb4f04875052b1020e50dd)
925

被折叠的 条评论
为什么被折叠?



