1，下面是一个放微信聊天界面的消息展示列表，实现的功能有：
（1）消息可以是文本消息也可以是图片消息
（2）消息背景为气泡状图片，同时消息气泡可根据内容自适应大小
（3）每条消息旁边有头像，在左边表示发送方，在右边表示接收方
2，实现思路
（1）需要定义一个数据结构保存消息内容 MessageItem
（2）继承UITableViewCell实现自定义单元格，这里面放入头像和消息体
（3）继承UITableView实现自定义表格，通过读取数据源，进行页面的渲染
（4）消息体根据内容类型不同，用不同的展示方法
（5）每个单元格的高度需要根据内容计算出来
（6）数据由ViewController来提供初始化数据
3，效果图
4，代码结构
5，主要代码
（1）主页面 ViewController.swift
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import UIKit
class ViewController: UIViewController, ChatDataSource {
var Chats:Array<MessageItem>!
var tableView:TableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
setupChatTable()
}
/*创建表格及数据*/
func setupChatTable()
{
self.tableView = TableView(frame:CGRectMake(0, 20,
self.view.frame.size.width, self.view.frame.size.height - 20))
//创建一个重用的单元格
self.tableView!.registerClass(TableViewCell.self, forCellReuseIdentifier: "MsgCell")
var me = "xiaoming.png"
var you = "xiaohua.png"
var first = MessageItem(body:"嘿，这张照片咋样，我周末拍的呢！", logo:me,
date:NSDate(timeIntervalSinceNow:-600), mtype:ChatType.Mine)
var second = MessageItem(image:UIImage(named:"luguhu.jpeg")!,logo:me,
date:NSDate(timeIntervalSinceNow:-290), mtype:ChatType.Mine)
var third = MessageItem(body:"太赞了，我也想去那看看呢！",logo:you,
date:NSDate(timeIntervalSinceNow:-60), mtype:ChatType.Someone)
var fouth = MessageItem(body:"嗯，下次我们一起去吧！",logo:me,
date:NSDate(timeIntervalSinceNow:-20), mtype:ChatType.Mine)
var fifth = MessageItem(body:"好的，一定！",logo:you,
date:NSDate(timeIntervalSinceNow:0), mtype:ChatType.Someone)
Chats = [first,second, third, fouth, fifth]
self.tableView.chatDataSource = self
self.tableView.reloadData()
self.view.addSubview(self.tableView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
/*返回对话记录中的全部行数*/
func rowsForChatTable(tableView:TableView) -> Int
{
return self.Chats.count
}
/*返回某一行的内容*/
func chatTableView(tableView:TableView, dataForRow row:Int) -> MessageItem
{
return Chats[row]
}
} |
（2）消息体数据结构 MessageItem.swift
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import UIKit
//消息类型，我的还是别人的enum ChatType
{ case Mine
case Someone
}class MessageItem
{ //头像
var logo:String
//消息时间
var date:NSDate
//消息类型
var mtype:ChatType
//内容视图，标签或者图片
var view:UIView
//边距
var insets:UIEdgeInsets
//设置我的文本消息边距
class func getTextInsetsMine() -> UIEdgeInsets
{
return UIEdgeInsets(top:5, left:10, bottom:11, right:17)
}
//设置他人的文本消息边距
class func getTextInsetsSomeone() -> UIEdgeInsets
{
return UIEdgeInsets(top:5, left:15, bottom:11, right:10)
}
//设置我的图片消息边距
class func getImageInsetsMine() -> UIEdgeInsets
{
return UIEdgeInsets(top:11, left:13, bottom:16, right:22)
}
//设置他人的图片消息边距
class func getImageInsetsSomeone() -> UIEdgeInsets
{
return UIEdgeInsets(top:11, left:13, bottom:16, right:22)
}
//构造文本消息体
convenience init(body:NSString, logo:String, date:NSDate, mtype:ChatType)
{
var font = UIFont.boldSystemFontOfSize(12)
var width = 225, height = 10000.0
var atts = NSMutableDictionary()
atts.setObject(font,forKey:NSFontAttributeName)
var size = body.boundingRectWithSize(CGSizeMake(CGFloat(width), CGFloat(height)),
options:NSStringDrawingOptions.UsesLineFragmentOrigin, attributes:atts, context:nil)
var label = UILabel(frame:CGRectMake(0, 0, size.size.width, size.size.height))
label.numberOfLines = 0
label.lineBreakMode = NSLineBreakMode.ByWordWrapping
label.text = (body.length != 0 ? body : "")
label.font = font
label.backgroundColor = UIColor.clearColor()
var insets:UIEdgeInsets = (mtype == ChatType.Mine ?
MessageItem.getTextInsetsMine() : MessageItem.getTextInsetsSomeone())
self.init(logo:logo, date:date, mtype:mtype, view:label, insets:insets)
}
//可以传入更多的自定义视图
init(logo:String, date:NSDate, mtype:ChatType, view:UIView, insets:UIEdgeInsets)
{
self.view = view
self.logo = logo
self.date = date
self.mtype = mtype
self.insets = insets
}
//构造图片消息体
convenience init(image:UIImage, logo:String, date:NSDate, mtype:ChatType)
{
var size = image.size
//等比缩放
if (size.width > 220)
{
size.height /= (size.width / 220);
size.width = 220;
}
var imageView = UIImageView(frame:CGRectMake(0, 0, size.width, size.height))
imageView.image = image
imageView.layer.cornerRadius = 5.0
imageView.layer.masksToBounds = true
var insets:UIEdgeInsets = (mtype == ChatType.Mine ?
MessageItem.getImageInsetsMine() : MessageItem.getImageInsetsSomeone())
self.init(logo:logo, date:date, mtype:mtype, view:imageView, insets:insets)
}
} |
（3）表格数据协议 ChatDataSource.swift
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import Foundation
/* 数据提供协议
*/protocol ChatDataSource
{ /*返回对话记录中的全部行数*/
func rowsForChatTable( tableView:TableView) -> Int
/*返回某一行的内容*/
func chatTableView(tableView:TableView, dataForRow:Int)-> MessageItem
} |
（4）自定义表格 TableView.swift
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import UIKit
class TableView:UITableView,UITableViewDelegate, UITableViewDataSource
{ //用于保存所有消息
var bubbleSection:Array<MessageItem>!
//数据源，用于与 ViewController 交换数据
var chatDataSource:ChatDataSource!
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame:CGRect)
{
self.bubbleSection = Array<MessageItem>()
super.init(frame:frame, style:UITableViewStyle.Grouped)
self.backgroundColor = UIColor.clearColor()
self.separatorStyle = UITableViewCellSeparatorStyle.None
self.delegate = self
self.dataSource = self
}
override func reloadData()
{
self.showsVerticalScrollIndicator = false
self.showsHorizontalScrollIndicator = false
var count = 0
if ((self.chatDataSource != nil))
{
count = self.chatDataSource.rowsForChatTable(self)
if(count > 0)
{
for (var i = 0; i < count; i++)
{
var object = self.chatDataSource.chatTableView(self, dataForRow:i)
bubbleSection.append(object)
}
//按日期排序方法
bubbleSection.sort({$0.date.timeIntervalSince1970 < $1.date.timeIntervalSince1970})
}
}
super.reloadData()
}
//第一个方法返回分区数，在本例中，就是1
func numberOfSectionsInTableView(tableView:UITableView)->Int
{
return 1
}
//返回指定分区的行数
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
if (section >= self.bubbleSection.count)
{
return 1
}
return self.bubbleSection.count+1
}
//用于确定单元格的高度，如果此方法实现得不对，单元格与单元格之间会错位
func tableView(tableView:UITableView,heightForRowAtIndexPath indexPath:NSIndexPath) -> CGFloat
{
// Header
if (indexPath.row == 0)
{
return 30.0
}
var data = self.bubbleSection[indexPath.row - 1]
return max(data.insets.top + data.view.frame.size.height + data.insets.bottom, 52)
}
//返回自定义的 TableViewCell
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)
-> UITableViewCell
{
var cellId = "MsgCell"
if(indexPath.row > 0)
{
var data = self.bubbleSection[indexPath.row-1]
var cell = TableViewCell(data:data, reuseIdentifier:cellId)
return cell
}
else
{
return UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: cellId)
}
}
} |
（5）自定义单元格 TableViewCell.swift
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import UIKit
class TableViewCell:UITableViewCell
{ //消息内容视图
var customView:UIView!
//消息背景
var bubbleImage:UIImageView!
//头像
var avatarImage:UIImageView!
//消息数据结构
var msgItem:MessageItem!
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
//- (void) setupInternalData
init(data:MessageItem, reuseIdentifier cellId:String)
{
self.msgItem = data
super.init(style: UITableViewCellStyle.Default, reuseIdentifier:cellId)
rebuildUserInterface()
}
func rebuildUserInterface()
{
self.selectionStyle = UITableViewCellSelectionStyle.None
if (self.bubbleImage == nil)
{
self.bubbleImage = UIImageView()
self.addSubview(self.bubbleImage)
}
var type = self.msgItem.mtype
var width = self.msgItem.view.frame.size.width
var height = self.msgItem.view.frame.size.height
var x = (type == ChatType.Someone) ? 0 : self.frame.size.width - width -
self.msgItem.insets.left - self.msgItem.insets.right
var y:CGFloat = 0
//显示用户头像
if (self.msgItem.logo != "")
{
var logo = self.msgItem.logo
self.avatarImage = UIImageView(image:UIImage(named:(logo != "" ? logo : "noAvatar.png")))
self.avatarImage.layer.cornerRadius = 9.0
self.avatarImage.layer.masksToBounds = true
self.avatarImage.layer.borderColor = UIColor(white:0.0 ,alpha:0.2).CGColor
self.avatarImage.layer.borderWidth = 1.0
//别人头像，在左边，我的头像在右边
var avatarX = (type == ChatType.Someone) ? 2 : self.frame.size.width - 52
//头像居于消息底部
var avatarY = height
//set the frame correctly
self.avatarImage.frame = CGRectMake(avatarX, avatarY, 50, 50)
self.addSubview(self.avatarImage)
var delta = self.frame.size.height - (self.msgItem.insets.top + self.msgItem.insets.bottom
+ self.msgItem.view.frame.size.height)
if (delta > 0)
{
y = delta
}
if (type == ChatType.Someone)
{
x += 54
}
if (type == ChatType.Mine)
{
x -= 54
}
}
self.customView = self.msgItem.view
self.customView.frame = CGRectMake(x + self.msgItem.insets.left, y
+ self.msgItem.insets.top, width, height)
self.addSubview(self.customView)
//如果是别人的消息，在左边，如果是我输入的消息，在右边
if (type == ChatType.Someone)
{
self.bubbleImage.image =
UIImage(named:("yoububble.png"))!.stretchableImageWithLeftCapWidth(21,topCapHeight:14)
}
else {
self.bubbleImage.image =
UIImage(named:"mebubble.png")!.stretchableImageWithLeftCapWidth(15, topCapHeight:14)
}
self.bubbleImage.frame = CGRectMake(x, y, width + self.msgItem.insets.left
+ self.msgItem.insets.right, height + self.msgItem.insets.top + self.msgItem.insets.bottom)
}
} |
6，源码下载：WeiXinChart.zip
7，功能改进版下载：
WeiXinChart_advance.zip
（1）消息按天分组展示
（2）增加消息发送框，可以发送和展示消息