聊天界面主要是cell的动态高度计算和效率的问题,参考网上的两篇文章:

1.优化UITableViewCell高度计算的那些事  http://www.cocoachina.com/ios/20150518/11854.html

2.动态计算UITableViewCell高度详解  http://www.cocoachina.com/industry/20140604/8668.html

因为对Autolayout也有一定的了解,决定一试,把动态调整高度交给ios自己处理。最后发现这个方案还是很好的。

一、在xib中布局,添加约束

1.添加四种view,同样需要先拖UILabel

@IBOutlet weak var bubbleImage: UIImageView!

@IBOutlet weak var time: UILabel!

@IBOutlet weak var icon: UIImageView!

@IBOutlet weak var content: UILabel!

2.设置view间的约束,要想让ios能自动调整高度,关键是高度方向的约束要连续完整,包括距离顶部,还有底部的距离。

a.从上到下,先设置time的约束:与顶部距离,高度

b.设置icon: 宽高 = 40,icon.top = time.bottom

c.设置bubbleImage: bubbleImage.top 与 icon.top对齐 ,与cell底部距离=4

d.设置content约束在bubbleImage内部:为了居中设置二者的centerX与centerY对齐,再设置content.leading >= bubble.leading+20,

content.top >= bubble.top+15 即可

注意点:

1.uilabel的preferredMaxLayoutWidth在xib和代码中设置都可以

2. uilabel会根据文字内容自动调整大小,但是好像只能放大。实测发现只有一个字母的时候,应该变小的,但是还是显示xib初始布局的大小。

而xib中启用autolayout就无法改变frame的初始宽高了。所以拖进去时最好将初始frame设小点。

cell配置代码:

class ChatTableViewCellA: UITableViewCell {

    @IBOutlet weak var bubbleImage: UIImageView!
@IBOutlet weak var time: UILabel!
@IBOutlet weak var icon: UIImageView!
@IBOutlet weak var content: UILabel!
var height:CGFloat! class func initChatCell(tableView:UITableView,message:TextMessage,iconname:String) -> ChatTableViewCellA?{ let Identifier = message.role == .Me ? "ChatTableViewCellAMe" : "ChatTableViewCellAOther"
var t:UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(Identifier) if t == nil{
let index = message.role == .Me ? 1 : 0
t = NSBundle.mainBundle().loadNibNamed("ChatTableViewCellA", owner: nil, options: nil)[index] as? UITableViewCell
}
let cell:ChatTableViewCellA = t as! ChatTableViewCellA cell.time.text = message.time
cell.icon.image = UIImage(named: iconname) cell.content.text = message.text let bgImage = message.role == .Me ? UIImage(named:"chat_send_nor@2x")! : UIImage(named:"chat_recive_nor@2x")!
let H = floor(bgImage.size.height*0.5)
let W = floor(bgImage.size.width*0.5)
let insets = UIEdgeInsetsMake(H, W, bgImage.size.height-H-1, bgImage.size.width-W-1)
cell.bubbleImage.image = bgImage.resizableImageWithCapInsets(insets) cell.layoutIfNeeded()
cell.height = max(cell.bubbleImage.frame.maxY,cell.icon.frame.maxY) return t as? ChatTableViewCellA
} override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
self.backgroundColor = UIColor.whiteColor() self.time.textColor = UIColor.darkGrayColor()
self.time.font = UIFont.systemFontOfSize(13)
self.content.preferredMaxLayoutWidth = UIScreen.mainScreen().bounds.width - 120
self.content.numberOfLines = 0
self.content.lineBreakMode = .ByWordWrapping
} override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated) // Configure the view for the selected state
}
}

  关于cell的重用机制,为了提高效率,重用的cell应该只负责改变内容,其它固定不变的设置放在awakeFromNib中比较好。

在ViewController中实现代理方法和估算高度,根据cell的类型,估计的高度也可以比较准了:

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
// let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath)
//debugPrint("Configure row:\(indexPath.row)")
// Configure the cell...
let msg = GlobalMsgCache.sharedInstance.getMessageAt(other.name!, index: indexPath.row) ?? BaseMessage()
if msg is TextMessage{
let message = msg as! TextMessage
let icon = (message.role == Role.Me ? self.me.icon:self.other.icon) ?? "defaulticon"
let cell:ChatTableViewCellA = ChatTableViewCellA.initChatCell(self.tableView, message: message,iconname: icon)!
return cell
}
else if msg is ProgressMessage{
let message = msg as! ProgressMessage
let icon = (message.role == Role.Me ? self.me.icon:self.other.icon) ?? "defaulticon"
let cell:ChatTableViewProgressCellA = ChatTableViewProgressCellA.initChatCell(self.tableView, message: message,iconname: icon)!
return cell
}
else{
let message = msg as! TipMessage
let cell:ChatTableViewTipCellA = ChatTableViewTipCellA.initChatCell(self.tableView, message: message)!
return cell
}
} func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
//debugPrint("row:\(indexPath.row),estimateheight\(cellHeightCache[indexPath.row] ?? 80)")
let msg = GlobalMsgCache.sharedInstance.getMessageAt(other.name!, index: indexPath.row) ?? BaseMessage()
if msg is TextMessage{
return 80
}
else if msg is ProgressMessage{
return 80
}
else{
return 50
}
}

  

聊天界面之气泡文本cell(二)使用Autolayout的更多相关文章

  1. 聊天界面之气泡文本cell(一)

    在实现qq聊天界面的过程中,使用UITableViewCell碰到了不少问题,这里还是记录一下以免遗忘. 气泡聊天cell的实现,网上最多的方法还是: 1.手动计算设置frame的值,文本的size使 ...

  2. C#+ html 实现类似QQ聊天界面的气泡效果

    /**定义两个人的头像*/ Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>&qu ...

  3. 聊天界面之进度条cell(一)

    ProgressCell用于显示文件传输的进度,困难点在于根据下载进度更新cell的进度条,先后尝试了几种方法: 1.有新的下载进度时,直接调用reloadData() 2.使用reloadRowsA ...

  4. QQ聊天界面的布局和设计(IOS篇)-第一季

    我写的源文件整个工程会再第二季中发上来~,存在百度网盘, 感兴趣的童鞋, 可以关注我的博客更新,到时自己去下载~.喵~~~ QQChat Layout - 第一季 一.准备工作 1.将假数据messa ...

  5. Android学习笔记(十二)——实战:制作一个聊天界面

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...

  6. android 仿QQ气泡聊天界面

    1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...

  7. Objective-c——UI基础开发第八天(QQ聊天界面)

    一.知识点: QQ聊天界面 双模型的使用(dataModel和frameModel) UITextField的使用 通知的使用 拉伸图片的两种方法(slicing/image对象的resizeable ...

  8. iOS开发——UI_swift篇&TableView自定义聊天界面

    TableView自定义聊天界面   1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 ...

  9. Swift - 自定义单元格实现微信聊天界面

    1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...

随机推荐

  1. IE10 透明背景的div无法遮罩

    在IE10中无法遮罩button按钮 <input type="button" value="76576" /> <div style=&qu ...

  2. [转]Android Studio系列教程六--Gradle多渠道打包

    转自:http://www.stormzhang.com/devtools/2015/01/15/android-studio-tutorial6/ Android Studio系列教程六--Grad ...

  3. Spring 源码从github导入源码到idea2016

    步骤 安装git或者github客户端 java环境JDK安装(必须是1.8) gradle下载安装(选择的最新版3.1) git clone github上spring源码 import导入proj ...

  4. linux环境下配置java WEB项目运行环境,jdk8+tomcat8+mysql5.7.11 新手向

    一:安装jdk 1.下载jdk  在oracle下载东西的时候因为oracle的一些验证机制,所以需要在链接前面添加一些参数 wget --no-check-certificate --no-cook ...

  5. python 安装easy_install和pip

    做个记录 easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安装easy_install 下载地址:https://pypi.python.org/ ...

  6. JAVA经典算法40题(1-20)

    [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?   1.程序分析:   兔子的规律 ...

  7. Eclipse中实现JAVA代码的自动提示功能

    1.打开Eclipse,在.出现时进行代码提示换成任意字母+.出现时的代码提示了(.abcdefghijklmnopqrstuvwxyz):

  8. REST实战:SeverClient项目+RESTful理论

    理解一个新的技术,无疑就是使用它了,下面我们就通过一个可执行的demo来展现REST的原理和使用. 一 Demo 1.1 服务器端 1 主程序MainServer.java负责启动一个REST服务组件 ...

  9. maven私有库配置

    私有库的配置 协同开发过程中私有库可以为团队提升很大效率,之前我的私有库一直存在问题导致jar包导入异常.现在在这分享一下私有库配置的几个点,可能因为我们学校比较简陋所以配置的比较简单,欢迎大家补充 ...

  10. 如何在Linux中查看所有正在运行的进程

    如何在Linux中查看所有正在运行的进程 FROM:http://os.51cto.com/art/201101/244090.htm 进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系 ...