How to make instagram chat screen(UI) for left swipe to see time in iOS

Question

We try to make swipe to left but we failed to implement like Instagram message UI in iOS Native App. Please suggest me what can I do and how to implement this.

Answer 1

Sharing the code with you:

Instead of using viewForHeaderInSection use cellForRowAt to create header
Also When making Xib for header cell please keep in mind that you have to keep the label in center of the view.

import UIKit
class ViewController: UIViewController {

@IBOutlet weak var tableView: UITableView!

var headersIndex = [IndexPath]()
override func viewDidLoad() {
    super.viewDidLoad()

    tableView.register(UINib(nibName: "cell", bundle: Bundle.main), forCellReuseIdentifier: "cell")
    tableView.register(UINib(nibName: "HeaderTableViewCell", bundle: Bundle.main), forCellReuseIdentifier: "HeaderTableViewCell")
}
}
extension ViewController: UITableViewDataSource,UITableViewDelegate {
func numberOfSections(in tableView: UITableView) -> Int {
    return 5
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 5 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderTableViewCell") as! HeaderTableViewCell
        cell.centerLabel.text = "sanjay"
        cell.centerLabel.center.x = view.center.x
        if !headersIndex.contains(indexPath) {
            headersIndex.append(indexPath)
        }
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! cell
        cell.leftLabel.text = "Message \(indexPath.row)"
        cell.rightLabel.text = indexPath.row.description
        return cell
    }
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    for i in headersIndex {
        if let cell = tableView.cellForRow(at: i) {
            if tableView.visibleCells.contains(cell) {
                let header = cell as! HeaderTableViewCell
                header.centerLabel.center.x = view.center.x + scrollView.contentOffset.x
            }
        }

    }

}
}