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 UIKitclass 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 UIKitclass 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 UIKitclass 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
WeiXinChart_advance.zip
（1）消息按天分组展示
（2）增加消息发送框，可以发送和展示消息
