用 Swift 做一个智能机器人聊天 App (2)

534 查看

上一篇文章swift实现一个与智能机器人聊天的app(1)实现了聊天appUI的输入框部分，接下来我会教大家如何实现聊天窗口部分，也就是下图的第二部分:

UI结构

你可以在这里下载上一篇文章的源代码:
上一篇文章源代码

首先打开我们的项目，你可以找到用于实现该部分的文件：
MessageBubbleTableViewCell.swift和MessageSentDateTableViewCell.swift,分别用来实现消息发送时间的cell和聊天气泡的cell
首先实现消息发送时间的cell,打开MessageBubbleTableViewCell.swift文件，增加对SnapKit第三方库的引用:

1	import SnapKit

在类里增加一个UILabel的属性，用来显示时间:

1	let sentDateLabel: UILabel

在override init()方法中添加代码:

sentDateLabel = UILabel(frame: CGRectZero)

sentDateLabel.backgroundColor = UIColor.clearColor()

sentDateLabel.font = UIFont.systemFontOfSize(10)

sentDateLabel.textAlignment = .Center

sentDateLabel.textColor = UIColor(red: 142/255, green: 142/255, blue: 147/255, alpha: 1)

设置时间标签的背景色、字体，文字居中对齐、文字颜色。

super.init(style: style, reuseIdentifier: reuseIdentifier)

selectionStyle = .None

contentView.addSubview(sentDateLabel)

调用父类的构造方法。
我们将该cell设置为不可选，因为我们仅仅需要显示时间而已。
最后将标签添加到cell的视图

sentDateLabel.setTranslatesAutoresizingMaskIntoConstraints(false)

sentDateLabel.snp_makeConstraints { (make) -> Void in

make.centerX.equalTo(contentView.snp_centerX)

make.top.equalTo(contentView.snp_top).offset(13)

make.bottom.equalTo(contentView.snp_bottom).offset(-4.5)

}

将标签左右居中，顶部距离cell视图顶部13点，底部距离cell视图底部4.5点。关于SnapKit的使用我在上一篇文章提到了一些，真的十分地好用，上手也很快，只要你想出一个公式，比如上面这段代码可以转化为：

sentDateLabel.centerX = contentView.centerX

sentDateLabel.top = contentView.top + 13

sentDateLabel.bottom = contentView.bottom - 4.5

ok，显示消息发送时间的cell就设置好了。

接下来打开MessageBubbleTableViewCell.swift文件，增加新的属性:

1 2	let bubbleImageView: UIImageView let messageLabel: UILabel

在import下面增加全局变量,用来标示cell的类型(接受或发送的消息):

1 2	let incomingTag = 0, outgoingTag = 1 let bubbleTag = 8

在类外增加一些方法，在文件结尾添加以下代码:

1	import SnapKit