（本文代码已升级至Swift5）
1、下面是一个放微信聊天界面的消息展示列表，实现的功能有：
（1）消息可以是文本消息也可以是图片消息
（2）消息背景为气泡状图片，同时消息气泡可根据内容自适应大小
（3）每条消息旁边有头像，在左边表示发送方，在右边表示接收方
2、实现思路
（1）需要定义一个数据结构保存消息内容 MessageItem
（2）继承UITableViewCell实现自定义单元格，这里面放入头像和消息体
（3）继承UITableView实现自定义表格，通过读取数据源，进行页面的渲染
（4）消息体根据内容类型不同，用不同的展示方法
（5）每个单元格的高度需要根据内容计算出来
（6）数据由ViewController来提供初始化数据
3、效果图
image.png
4、代码结构
image.png
5、主要代码
ViewController:
import UIKit
class ViewController: UIViewController, ChatDataSource,UITextFieldDelegate {
var Chats:NSMutableArray!
var tableView:TableView!
var me:UserInfo!
var you:UserInfo!
var txtMsg:UITextField!
override func viewDidLoad() {
super.viewDidLoad()
setupChatTable()
setupSendPanel()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
//MARK:设置输入框
extension ViewController
{
func setupSendPanel()
{
let screenWidth = UIScreen.main.bounds.width
let sendView = UIView(frame:CGRect(x: 0,y: self.view.frame.size.height - 56,width: screenWidth,height: 56))
sendView.backgroundColor=UIColor.lightGray
sendView.alpha=0.9
txtMsg = UITextField(frame:CGRect(x: 7,y: 10,width: screenWidth - 95,height: 36))
txtMsg.backgroundColor = UIColor.white
txtMsg.textColor=UIColor.black
txtMsg.font=UIFont.boldSystemFont(ofSize: 12)
txtMsg.layer.cornerRadius = 10.0
txtMsg.returnKeyType = UIReturnKeyType.send
txtMsg.delegate=self
sendView.addSubview(txtMsg)
self.view.addSubview(sendView)
let sendButton = UIButton(frame:CGRect(x: screenWidth - 80,y: 10,width: 72,height: 36))
sendButton.backgroundColor=UIColor(red: 0x37/255, green: 0xba/255, blue: 0x46/255, alpha: 1)
sendButton.addTarget(self, action:#selector(ViewController.sendMessage) ,
for:UIControl.Event.touchUpInside)
sendButton.layer.cornerRadius=6.0
sendButton.setTitle("发送", for:UIControl.State())
sendView.addSubview(sendButton)
}
func textFieldShouldReturn(_ textField:UITextField) -> Bool
{
sendMessage()
return true
}
@objc func sendMessage()
{
//composing=false
let sender = txtMsg
let thisChat = MessageItem(body:(sender!.text! as NSString) as String, userInfo:me, date:Date(), mtype:ChatType.mine)
let thatChat = MessageItem(body:("你说的是：\(sender!.text!)" as NSString) as String, userInfo:you, date:Date(), mtype:ChatType.someone)
Chats.add(thisChat)
Chats.add(thatChat)
self.tableView.chatDataSource = self
self.tableView.reloadData()
//self.showTableView()
sender?.resignFirstResponder()
sender?.text = ""
}
}
//MARK:设置聊天假数据以及数据源
extension ViewController
{
func setupChatTable()
{
self.tableView = TableView(frame:CGRect(x: 0, y: 20, width: self.view.frame.size.width, height: self.view.frame.size.height - 76), style: .plain)
//创建一个重用的单元格
self.tableView!.register(TableViewCell.self, forCellReuseIdentifier: "ChatCell")
me = UserInfo(name:"Xiaoming" ,avatar:("xiaoming.png"))
you = UserInfo(name:"Xiaohua", avatar:("xiaohua.png"))
let zero = MessageItem(body:"最近去哪玩了？", userInfo:you, date:Date(timeIntervalSinceNow:-90096400), mtype:.someone)
let zero1 = MessageItem(body:"去了趟苏州，明天发照片给你哈？", userInfo:me, date:Date(timeIntervalSinceNow:-90086400), mtype:.mine)
let first = MessageItem(body:"你看这风景怎么样，我周末去苏州拍的！", userInfo:me, date:Date(timeIntervalSinceNow:-90000600), mtype:.mine)
let second = MessageItem(image:UIImage(named:"sz.png")!,userInfo:me, date:Date(timeIntervalSinceNow:-90000290), mtype:.mine)
let third = MessageItem(body:"太赞了，我也想去那看看呢！",userInfo:you, date:Date(timeIntervalSinceNow:-90000060), mtype:.someone)
let fouth = MessageItem(body:"嗯，下次我们一起去吧！",userInfo:me, date:Date(timeIntervalSinceNow:-90000020), mtype:.mine)
let fifth = MessageItem(body:"三年了，我终究没能看到这个风景",userInfo:you, date:Date(timeIntervalSinceNow:0), mtype:.someone)
Chats = NSMutableArray()
Chats.addObjects(from: [first,second, third, fouth, fifth, zero, zero1])
self.tableView.chatDataSource = self
self.tableView.reloadData()
self.view.addSubview(self.tableView)
}
func rowsForChatTable(_ tableView:TableView) -> Int
{
return self.Chats.count
}
func chatTableView(_ tableView:TableView, dataForRow row:Int) -> MessageItem
{
return Chats[row] as! MessageItem
}
}
TableView:
import UIKit
enum ChatBubbleTypingType {
case nobody
case me
case somebody
}
class TableView: UITableView, UITableViewDelegate, UITableViewDataSource {
// 聊天数据
var bubbleSection: NSMutableArray!
// 数据源，与viewController交互数据
var chatDataSource: ChatDataSource!
var snapInterval: TimeInterval!
var bubbleTypingType: ChatBubbleTypingType!
override init(frame: CGRect, style: UITableView.Style) {
self.snapInterval = TimeInterval(60 * 60 * 24)
self.bubbleTypingType = ChatBubbleTypingType.nobody
self.bubbleSection = NSMutableArray()
super.init(frame: frame, style: style)
self.backgroundColor = UIColor.clear
self.separatorStyle = UITableViewCell.SeparatorStyle.none
self.delegate = self
self.dataSource = self
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func reloadData()
{
self.showsVerticalScrollIndicator = false
self.showsHorizontalScrollIndicator = false
self.bubbleSection = NSMutableArray()
var count = 0
if ((self.chatDataSource != nil))
{
count = self.chatDataSource.rowsForChatTable(self)
if(count > 0)
{
let bubbleData = NSMutableArray(capacity:count)
for i in 0 ..< count
{
let object = self.chatDataSource.chatTableView(self, dataForRow:i)
bubbleData.add(object)
}
bubbleData.sort(comparator: sortDate)
var last = ""
var currentSection = NSMutableArray()
// 创建一个日期格式器
let dformatter = DateFormatter()
// 为日期格式器设置格式字符串
dformatter.dateFormat = "dd"
for i in 0 ..< count
{
let data = bubbleData[i] as! MessageItem
// 使用日期格式器格式化日期，日期不同，就新分组
let datestr = dformatter.string(from: data.date as Date)
if (datestr != last)
{
currentSection = NSMutableArray()
self.bubbleSection.add(currentSection)
}
(self.bubbleSection[self.bubbleSection.count-1] as AnyObject).add(data)
last = datestr
}
}
}
super.reloadData()
//滑向最后一部分
let secno = self.bubbleSection.count - 1
let indexPath = IndexPath(row:(self.bubbleSection[secno] as AnyObject).count,section:secno)
self.scrollToRow(at: indexPath, at:UITableView.ScrollPosition.bottom,animated:true)
}
//按日期排序方法
func sortDate(_ m1: Any, m2: Any) -> ComparisonResult {
if((m1 as! MessageItem).date.timeIntervalSince1970 < (m2 as! MessageItem).date.timeIntervalSince1970)
{
return ComparisonResult.orderedAscending
}
else
{
return ComparisonResult.orderedDescending
}
}
}
//MARK:数据源 & 代理方法
extension TableView {
//用于确定单元格的高度，如果此方法实现得不对，单元格与单元格之间会错位
func tableView(_ tableView:UITableView,heightForRowAt indexPath:IndexPath)
-> CGFloat {
// Header
if (indexPath.row == 0)
{
return TableHeaderViewCell.getHeight()
}
let section = self.bubbleSection[indexPath.section] as! NSMutableArray
let data = section[indexPath.row - 1]
let item = data as! MessageItem
let height = max(item.insets.top + item.view.frame.size.height + item.insets.bottom, 52) + 17
print("height:\(height)")
return height
}
func numberOfSections(in tableView: UITableView) -> Int {
var count = self.bubbleSection.count
if self.bubbleTypingType != .nobody {
count += 1
}
return count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if (section >= self.bubbleSection.count)
{
return 1
}
return (self.bubbleSection[section] as AnyObject).count + 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let cellIdentifier = "headerCell"
let cell = TableHeaderViewCell(reuseIdentifier: cellIdentifier)
let section = self.bubbleSection[indexPath.section] as! NSMutableArray
let data = section[indexPath.row ] as! MessageItem
cell.setDate(data.date)
return cell
}
let cellIdentifier = "ChatCell"
let section = self.bubbleSection[indexPath.section] as! NSMutableArray
let data = section[indexPath.row - 1] as! MessageItem
let cell = TableViewCell(data: data, reuseIdentifier: cellIdentifier)
return cell
}
}
TableViewCell:
import UIKit
class TableViewCell: UITableViewCell {
//消息内容视图
var customView:UIView!
//消息背景
var bubbleImage:UIImageView!
//头像
var avatarImage:UIImageView!
//消息数据结构
var msgItem:MessageItem!
init(data: MessageItem, reuseIdentifier: String)
{
self.msgItem = data
super.init(style: UITableViewCell.CellStyle.default, reuseIdentifier: reuseIdentifier)
rebuildUserInterface()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
func rebuildUserInterface()
{
self.selectionStyle = .none
if self.bubbleImage == nil {
self.bubbleImage = UIImageView()
self.addSubview(self.bubbleImage)
}
let type = msgItem.chatType
let width = msgItem.view.frame.size.width
let height = msgItem.view.frame.size.height
var x = (type == .someone) ? 0 : self.frame.size.width - msgItem.insets.left - msgItem.insets.right - width
var y: CGFloat = 0
if (msgItem.userInfo.username != "")
{
let user = msgItem.userInfo
let imageName = user.avatar == "" ? "noAvatar.png" : user.avatar
self.avatarImage = UIImageView(image: UIImage(named: imageName))
self.avatarImage.layer.cornerRadius = 10
self.avatarImage.layer.masksToBounds = true
self.avatarImage.layer.borderColor = UIColor(white: 0.0, alpha: 0.2).cgColor
self.avatarImage.layer.borderWidth = 1.0
//计算x:别人头像，在左边，我的头像在右边
let avatarX: CGFloat = (type == .someone) ? 2 : self.frame.size.width - 52;
//头像居于消息顶部
let avatarY: CGFloat = 0.0;
self.avatarImage.frame = CGRect(x: avatarX, y: avatarY, width: 50, height: 50)
self.addSubview(self.avatarImage)
//如果只有一行消息（消息框高度不大于头像）则将消息框居中于头像位置
let delta = (50 - (self.msgItem.insets.top + self.msgItem.insets.bottom + self.msgItem.view.frame.size.height)) / 2
if delta > 0 {
y = delta
}
if (type == .someone)
{
x += 54
} else {
x -= 54
}
self.customView = msgItem.view
self.customView.frame = CGRect(x: x + msgItem.insets.left, y: y + msgItem.insets.top, width: width, height: height)
self.addSubview(self.customView)
//如果是别人的消息，在左边，如果是我输入的消息，在右边
if type == .mine {
self.bubbleImage.image = UIImage(named:"mebubble.png")!
.stretchableImage(withLeftCapWidth: 15, topCapHeight:25)
} else {
self.bubbleImage.image = UIImage(named:("yoububble.png"))!
.stretchableImage(withLeftCapWidth: 21,topCapHeight:25)
}
self.bubbleImage.frame = CGRect(x: x, y: y, width: width + msgItem.insets.left + msgItem.insets.right, height: height + msgItem.insets.top + msgItem.insets.bottom)
}
}
// 让单元格宽度始终为屏幕宽
override var frame: CGRect {
get {
return super.frame
}
set (newFrame) {
var frame = newFrame
frame.size.width = UIScreen.main.bounds.size.width
super.frame = frame
}
}
}
源码地址：https://gitee.com/dong_li/ChatDemo
原文出自：https://www.hangge.com/blog/cache/detail_559.html
