文档章节

聊天界面-自适应文字

极光推送
 极光推送
发布于 2017/02/07 10:22
字数 1582
阅读 22
收藏 0

该篇文章主要介绍一个实现聊天界面的思路过程,源码可以在 源码链接 获得,该工程实现聊天的基本功能,功能还不够完善,欢迎大家提 PR,效果图如下所示:

我希望通过相对简单的方式实现界面的布局,没有复杂的计算达到自适应的效果。

iOS8 新功能介绍

虽然 self size cell 最终没有在我的工程中用到,但是这是我曾经挖过的坑,所以在此做了简单的介绍。

在iOS 8 中,UITableView 新增一项功能 self size cells,这是一项通过 UITableViewCell 的约束自动自动计算 UITableView contentSize 的技术。这个新特性给我们带来两个个好处。

  • 我们不再需要为了自适应文字,去计算每个 cell 中文字所需要的高度。
  • 而且有更高的性能。(因为 UITableView 每次 reloadData 的时候都会重新计算 cell 的高度,意味着如果有一万个 cell 要展示,需要 调用 heightForRowAtIndexPath 一万次,这效率是特别低的)

我们通过一个简单的 demo 来介绍一下 Self Size Cells 的用法,demo 源码
效果如图:

使用步骤是:

  • 为 UITableViewCell 添加约束
  • 设置 UITableView 的 estimatedRowHeight 属性
  • 设置 rowHeight 为 UITableViewAutomaticDimension
  • 有一点需要注意,代码中不能实现 heightForRowAtIndexPath 这个方法
    添加约束,有一个原则是,除了自适应 text 的高度不需要约束外,需要确定所有必要约束

用代码来说就是(这里用到第三方库 SnapKit 做代码约束 SnapKit 传送门)

textview.snp_makeConstraints{ (make)in
  make.top.equalTo(self.contentView).offset(15)
  make.width.equalTo(100)
  make.left.equalTo(self.contentView).offset(15)
  make.bottom.equalTo(self.contentView).offset(-15)
}

对于 UILabel 来说还需要把 numberOfLines 置为 0
然后设置 UITableView 的必要属性

messageTable.estimatedRowHeight=44
messageTable.rowHeight=UITableViewAutomaticDimension

以上便是,使用 self size cell 的所有步骤。

实战篇

接下来便是实战部分,我希望在聊天页面中使用 self size cell 这个功能,聊天页面的效果图

以下下是我为 messageCell 制作约束图,事实上用的是代码约束,详情可以查看我的源码

问题

如果我想实现 一个功能像微信一样下拉刷新,而且消息停留在原来的消息页面上,如下图所示

分析:在刷新数据后 调用 tableview.reloadData 方法,可以刷新 tableview 显示的数据,不过 tableview 会滚动到最顶部。幸运的是 tableView 是 UIScrollView 的子类,如果我们改变了内容,contentSize 这个属性一定会改变,也就是说系统一定会掉用 contentSize 的 set 方法。如果我们重新这个 set 方法,在每次掉用 setContentSize 的时候计算出之前视窗所在的位置,并且在设置完 contentSize 后移动到计算号的位置,就能平滑的上拉加载更多的历史消息了。

下面是实现平滑滚动的关键代码

@objc(JChatMessageTable)
class JChatMessageTable: UITableView {
  var isFlashToLoad:Bool! = false

  override var contentSize: CGSize {
    didSet {
        if self.isFlashToLoad != false {
          if !CGSizeEqualToSize(self.contentSize, CGSizeZero) {
            if oldValue.height < self.contentSize.height {
              var offset = self.contentOffset
              offset.y = self.contentSize.height - oldValue.height
              self.contentOffset = offset
            }
          }
        }
          self.isFlashToLoad = false
    }
  }
  override init(frame: CGRect, style: UITableViewStyle) {
    super.init(frame: frame, style: style)

  }

  required init?(coder aDecoder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
  }

  func loadMoreMessage() {
    self.isFlashToLoad = true
    self.reloadData()
  }
}

想法是好的,但是现实总是残酷的,在具体实行的时候出现了一个新的问题,因为我用的是 Self size cell 来自适应 UITableView 的 contentSize 的, Self size cell 在处理 UITableView 的 contentSize 时候并不是一次性赋值成功的,它是每 5 个点的增加 height(contentSize.height),直到合适的高度位置, 也就是说 contentSize 的 Set 方法会被掉用很多次,而且上面的代码完全没有作用(可以想象结果是只有最后一次掉用 contentSize 的 Set 方法起到了作用小于 5 个点的偏移量,由于这个变化真的很小,我也是在这个地方被坑了一次),由于 Self size cells 的这个特性,似乎很难实现这个功能。

此时我果断放弃了使用 Self Size Cells ,虽然比较心痛,不过我们大致了解了 Self size cell 是如何自适应高度的。
self size cell 主要给我们带来两个好处

  • 能够得到更高的执行效率
  • 我们不需要为文字的 frame 进行复杂的计算 ,只需要设置 width 的约束和位置,就能够得到自适应的 Size

由于 messageTable 消息的展示是通过分页加载消息的方式,第一次只会添加 20 条的消息,也就不会出现调用heightForRowAtIndexPath时间过长的卡顿问题。但是如果用户不断的下拉刷新heightForRowAtIndexPath 的执行时间也会出现线性的增加,所以为了减少这方面的时间开支,我们在每次成功加载一个新的 cell 的时候把高度缓存起来,这样就可以减少计算的时间,每次只需要计算新展现的历史消息高度就可以了。

  • 第一个问题经过分析我们可以通过缓存高度的方式提高性能.
  • 对于第二点,也是最重要的一点,如何不通过手动计算获得 UITableViewCell 所需要的高度,经过分析发现 UITableViewCell 有一个方法 systemLayoutSizeFittingSize 可以计算返回自身的高度,所以我接下来生成一个全局的 UITableViewCell 用于计算 UITableViewCell 的高度这样我们就不需要手动计算Cell的高度了。通过
    messageCell.systemLayoutSizeFittingSize(CGSizeZero).height + 1//这里的 +1 是为了弥补分隔线的高度
    返回的高度就是 UITableView 所需要的高度。

自适应输入框

接下来,我们需要实现如下图的效果,输入框能够自适应输入文字的大小 JChatInputView

我们需要输入框能够自适应文本的大小,我们

需要给 TextView 添加如下约束

inputTextView?.snp_makeConstraints(closure: { (make) ->Voidin
    make.right.equalTo(self.showMoreBtn.snp_left).offset(-5)
    make.left.equalTo(self.switchBtn.snp_right).offset(5)
    make.top.equalTo(inputWrapView).offset(5)
    make.bottom.equalTo(inputWrapView).offset(-5)
    make.height.greaterThanOrEqualTo(30)
    make.height.lessThanOrEqualTo(100)
})

inputWarpView 添加如下约束。不需要添加高度约束, 因为 inputWarpView 的高度由 TextView 的高度和其他约束计算得出

inputTextView?.snp_makeConstraints(closure: { (make) ->Voidin
    make.right.bottom.left.equalTo(superView)
})

到此介绍了一个聊天界面的自适应 UI 部分,灵活的使用约束可以减少大量的代码。

作者:HuminiOS(极光) 

© 著作权归作者所有

共有 人打赏支持
极光推送
粉丝 41
博文 127
码字总数 134660
作品 1
深圳
个人站长
iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三——纯代码的autoLayout及布局动画 一、引言 关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致。除了使用storyBoard进行布局约束的拖拽...

珲少
2015/10/30
0
3
手把手教你做蓝牙聊天应用(五)-界面使用ConnectionManager

第5节 界面使用ConnectionManager 已经设计完成了,它的价值需要在中体现出来。 5.1 监听ConnectionManager 实现对各个状态的监听,当的状态有变化、收到发送的数据时,需要让知道,它才能将...

anddlecn
2016/07/15
0
0
文字气泡自适应宽度

实现聊天气泡效果,如图所示: p的内容要自适应文字宽度所以不能设置固定宽度,但是要和左边的img显示在一行,用float实现,没有宽度是不行的,所以关键是给p标签外面加一层div,然后给这个d...

拉普拉斯婷
2016/06/17
16
0
聊天应用--Wire

Wire 是一款界面极简附有科技感又很酷的聊天应用,支持 Web、WindowsiOS、Android、OS X,有群组功能,可以语音通话,发送照片以及其独创性的打招呼方式 PING。 Wire 简洁到没有一根线条,通...

匿名
2016/08/01
2.4K
1
WPF+WCF一步一步打造音频聊天室(二):文字聊天和白板共享

这篇文章将讲述实现WPF的UI和WCF中的双工通信。实现文字部分的聊天功能和实现共享白板的功能。 画WPF的界面其实是一件麻烦的事情。虽然WPF和WindowsForm一样,能将控件拖到哪,它就在哪。我们...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

windbg调试C源码级驱动

联机方式不多说了。我博客里有,英文的。 windbg联机文档 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/debugger/debug-universal-drivers---step-by-step-lab--echo-kernel......

simpower
35分钟前
0
0
redis快照和AOF简介

数据持久化到硬盘:一是快照(snapshotting),二是只追加文件(append-only file AOF) 快照 核心原理:redis某个时间内存内的所有数据写入硬盘 场景:redis快照内存里面的数据 1. 用户发送bgsav...

拐美人
36分钟前
0
0
这个七夕,送你一份程序员教科书级别的告白指南

给广大爱码士们的高能预警: 今天,就是七夕了…… (单身非作战人群请速速退场!) 时常有技术GG向个推君抱怨 经过网民多年的教育 以及技术人持之以恒的自黑 冲锋衣狂热分子·格子衫骨灰级粉...

个推
41分钟前
0
0
python爬虫日志(15)cookie详解

转载:原文地址 早期Web开发面临的最大问题之一是如何管理状态。服务器端没有办法知道两个请求是否来自于同一个浏览器。那时的办法是在请求的页面中插入一个token,并且在下一次请求中将这个...

茫羽行
42分钟前
0
0
qlv视频格式转换器

  腾讯视频中的视频影视资源有很多,小编经常在里面下载视频观看,应该也有很多朋友和小编一样吧,最近热播的电视剧也不少,如《香蜜沉沉烬如霜》、《夜天子》还有已经完结的《扶摇》,这么...

萤火的萤火
45分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部