Как сделать экран чата в Instagram для просмотра пальцем в iOS

Question

Мы пытаемся сделать пролистывание влево, но нам не удалось реализовать подобный пользовательский интерфейс сообщений Instagram в родном приложении iOS.Пожалуйста, предложите мне, что я могу сделать и как это реализовать.

Answer 1

Совместное использование кода с вами:

Вместо использования viewForHeaderInSection используйте cellForRowAt для создания заголовка
Также При создании 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
            }
        }

    }

}
}

Answer 2

вам просто нужно внести некоторые изменения в tableViewConstraints.сделать конечное ограничение табличного представления отрицательным значением, которое позволит табличному движению переместиться из суперпредставления, я использовал -50, как показано на изображении

теперь, когда вы сделаете Xib tableViewCell, также включите правую боковую метку в той же Xib.

также перейдите к раскадровке и выберите свой tableView, а в инспекторе атрибутов в разделе scrollView включите все три параметра, как показанона изображении ниже:

Теперь попробуйте и не стесняйтесь спрашивать, если у вас есть какие-либо сомнения.

И вот как этобудет выглядеть: