iOS开发——UI_swift篇&TableView自定义聊天界面

TableView自定义聊天界面

 

1，下面是一个放微信聊天界面的消息展示列表，实现的功能有：

• （1）消息可以是文本消息也可以是图片消息
• （2）消息背景为气泡状图片，同时消息气泡可根据内容自适应大小
• （3）每条消息旁边有头像，在左边表示发送方，在右边表示接收方

 

2，实现思路

• （1）需要定义一个数据结构保存消息内容 MessageItem
• （2）继承UITableViewCell实现自定义单元格，这里面放入头像和消息体
• （3）继承UITableView实现自定义表格，通过读取数据源，进行页面的渲染
• （4）消息体根据内容类型不同，用不同的展示方法
• （5）每个单元格的高度需要根据内容计算出来
• （6）数据由ViewController来提供初始化数据

 

3，效果图

  

 

4，代码结构

  

 

5，主要代码

（1）主页面 ViewController.swift

 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(, ,
             self.view.frame.size.width, self.view.frame.size.height - ))

         //创建一个重用的单元格
         self.tableView!.registerClass(TableViewCell.self, forCellReuseIdentifier: "MsgCell")

         var me = "xiaoming.png"

         var you = "xiaohua.png"

         var first =  MessageItem(body:"嘿，这张照片咋样，我周末拍的呢！", logo:me,
             date:NSDate(timeIntervalSinceNow:-), mtype:ChatType.Mine)

         var second =  MessageItem(image:UIImage(named:"luguhu.jpeg")!,logo:me,
             date:NSDate(timeIntervalSinceNow:-), mtype:ChatType.Mine)

         var third =  MessageItem(body:"太赞了，我也想去那看看呢！",logo:you,
             date:NSDate(timeIntervalSinceNow:-), mtype:ChatType.Someone)

          var fouth =  MessageItem(body:"嗯，下次我们一起去吧！",logo:me,
             date:NSDate(timeIntervalSinceNow:-), mtype:ChatType.Mine)

         var fifth =  MessageItem(body:"好的，一定！",logo:you,
             date:NSDate(timeIntervalSinceNow:), 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

 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
     {
         , left:, bottom:, right:)
     }

     //设置他人的文本消息边距
     class func getTextInsetsSomeone() -> UIEdgeInsets
     {
         , left:, bottom:, right:)
     }

     //设置我的图片消息边距
     class func getImageInsetsMine() -> UIEdgeInsets
     {
         , left:, bottom:, right:)
     }

     //设置他人的图片消息边距
     class func getImageInsetsSomeone() -> UIEdgeInsets
     {
         , left:, bottom:, right:)
     }

     //构造文本消息体
     convenience init(body:NSString, logo:String, date:NSDate, mtype:ChatType)
     {
         var font =  UIFont.boldSystemFontOfSize()

         var width =  , 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(, , size.size.width, size.size.height))

         label.numberOfLines =
         label.lineBreakMode = NSLineBreakMode.ByWordWrapping
         label.text = (body.length !=  ? 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
         //等比缩放
         )
         {
             size.height /= (size.width / );
             size.width = ;
         }
         var imageView = UIImageView(frame:CGRectMake(, , 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

 import Foundation

 /*
   数据提供协议
 */
 protocol ChatDataSource
 {
     /*返回对话记录中的全部行数*/
     func rowsForChatTable( tableView:TableView) -> Int
     /*返回某一行的内容*/
     func chatTableView(tableView:TableView, dataForRow:Int)-> MessageItem
 }

（4）自定义表格 TableView.swift

 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 =
         if ((self.chatDataSource != nil))
         {
             count = self.chatDataSource.rowsForChatTable(self)

             )
             {   

                 ; i < count; i++)
                 {

                     var object =  self.chatDataSource.chatTableView(self, dataForRow:i)
                     bubbleSection.append(object)

                 }

                 //按日期排序方法
                 bubbleSection.sort({$.date.timeIntervalSince1970 < $.date.timeIntervalSince1970})
             }
         }
         super.reloadData()
     }

     //第一个方法返回分区数，在本例中，就是1
     func numberOfSectionsInTableView(tableView:UITableView)->Int
     {

     }

     //返回指定分区的行数
     func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
     {
         if (section >= self.bubbleSection.count)
         {

         }

     }

     //用于确定单元格的高度，如果此方法实现得不对，单元格与单元格之间会错位
     func tableView(tableView:UITableView,heightForRowAtIndexPath indexPath:NSIndexPath) -> CGFloat
     {

         // Header
         )
         {
             return 30.0
         }

         var data =  self.bubbleSection[indexPath.row - ]

         )
     }

     //返回自定义的 TableViewCell
     func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)
         -> UITableViewCell
     {

         var cellId = "MsgCell"
         )
         {
             var data =  self.bubbleSection[indexPath.row-]

             var cell =  TableViewCell(data:data, reuseIdentifier:cellId)

             return cell
         }
         else
         {

             return UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: cellId)
         }
     }
 }

（5）自定义单元格 TableViewCell.swift

 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) ?  : self.frame.size.width - width -
             self.msgItem.insets.left - self.msgItem.insets.right

         var y:CGFloat =
         //显示用户头像
         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) ?  : self.frame.size.width - 

             //头像居于消息底部
             var avatarY =  height
             //set the frame correctly
             self.avatarImage.frame = CGRectMake(avatarX, avatarY, , )
             self.addSubview(self.avatarImage)

             var delta =  self.frame.size.height - (self.msgItem.insets.top + self.msgItem.insets.bottom
                 + self.msgItem.view.frame.size.height)
             )
             {
                 y = delta
             }
             if (type == ChatType.Someone)
             {
                 x +=
             }
             if (type == ChatType.Mine)
             {
                 x -=
             }
         }

         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:(,topCapHeight:)

         }
         else {
             self.bubbleImage.image =
                 UIImage(named:, topCapHeight:)
         }
         self.bubbleImage.frame = CGRectMake(x, y, width + self.msgItem.insets.left
             + self.msgItem.insets.right, height + self.msgItem.insets.top + self.msgItem.insets.bottom)
     }
 }

（1）消息按天分组展示

（2）增加消息发送框，可以发送和展示消息