Swift - 自定义单元格实现聊天界面

（本文代码已升级至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