How to add new rows at bottom of tableview - chat messages

问题

I'm using the following code to add new messages every time the user types a message and click 'send'. It works great. But the problem is, new messages are inserted at the top of the table view. I want it to be inserted at the bottom.

    import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet var messagesTable: UITableView!
    @IBOutlet var messageTextBox: UITextField!

    var messageArray = [String]()

    @IBAction func sendMessage(sender: AnyObject) {

        messageArray.append(messageTextBox.text!)
        messagesTable.reloadData()
        messageTextBox.text = ""

    }


    override func viewDidLoad() {
        super.viewDidLoad()
    }


    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messageArray.count
    }

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 80
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {


        //self.messagesTable.contentInset = UIEdgeInsetsMake(messagesTable.frame.height,0,0,0)

        let cell = NSBundle.mainBundle().loadNibNamed("AgentMessageText", owner: self, options: nil)?.first as! AgentMessageText
        cell.messageText.text = messageArray[indexPath.row]
        return cell
    }

}

The below code insert rows to bottom. But the newly inserted rows are below the view point. That is we have to scroll to see it every time

self.messagesTable.contentInset = UIEdgeInsetsMake(messagesTable.frame.height,0,0,0)

回答1:

A common solution to this problem is to flip the tableview (so cells stick to the bottom) then flip the cells so the content is oriented properly.

Example:

override func viewDidLoad() {
    super.viewDidLoad()

    //flips the tableview (and all cells) upside down
    messagesTableView.transform = CGAffineTransformMakeScale(1, -1)
}

...

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

   ...

   //flips the cell to appear oriented correctly
   cell.transform = CGAffineTransformMakeScale(1, -1)

For Swift 4

Just to be clear, for Swift 4.0 the above transform function is as per below

CGAffineTransform(scaleX: 1, y: -1)

回答2:

You've to use scrollToRow to scroll to your message (use .bottom/.top/etc. acc. to your need) Also instead of reloading your whole table view you can add just one (new) message(cell) to table view

@IBAction func sendMessage(sender: AnyObject) {
  messageArray.append(messageTextBox.text!)
  messagesTable.reloadData()
  let indexPath = IndexPath(item: messageArray.count, section: 0)
  messagesTable.scrollToRow(at: indexPath, at: .bottom, animated: true)
  messageTextBox.text = ""
}

回答3:

For Scroll To Bottom In Your Chat App

For Swift 3.0

Write a function :

func scrollToBottom(){
    DispatchQueue.main.async {
        let indexPath = IndexPath(row: self.dataArray.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}

and call it after you reload the tableview data

tableView.reloadData()
scrollToBottom()

回答4:

Swift 5. Write a function:

self.tableView.reloadData()  let index = 
self.tableView.indexPathsForVisibleRows  self.tableView.scrollToRow(at: (index?.last)!, at: .top, animated: true)

来源：https://stackoverflow.com/questions/40157645/how-to-add-new-rows-at-bottom-of-tableview-chat-messages

标签

ios

swift

uitableview