如何制作 Instagram 聊天屏幕 (UI) 以便在 iOS 中向左滑动以查看时间

Question

我们尝试向左滑动，但未能在 iOS Native App 中实现类似 Instagram 消息 UI。请建议我可以做什么以及如何实施。

Answer 1

与您分享代码：

而不是使用viewForHeaderInSectionusecellForRowAt来创建标题
在制作Xib标题单元格时，请记住，您必须将标签保持在视图的中心。

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
            }
        }

    }

}
}