当 tableview 使用自动布局滚动时避免粘性 header 视图

Question

目前，当table 内容滚动时，headerLabel 跟随滚动并停留在顶部。如何使用自动布局避免这种行为？

var tableView: UITableView!

let headerLabel: UILabel = {
    let label = UILabel(frame: .zero)

    label.font = UIFont.boldSystemFont(ofSize: 34.0)
    label.textColor = .black
    label.textAlignment = .center

    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()

    let barHeight: CGFloat = UIApplication.shared.statusBarFrame.size.height

    tableView = UITableView(frame: CGRect(x: 0, y: barHeight, width: view.frame.width, height: view.frame.height - barHeight))
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "tableCell")
    tableView.dataSource = self
    tableView.delegate = self
    tableView.separatorStyle = .none

    view.addSubview(headerLabel)
    view.addSubview(tableView)

    headerLabel.snp.makeConstraints { (make) in
        make.top.equalTo(view).offset(35)
        make.width.equalToSuperview()
    }

    tableView.snp.makeConstraints { (make) in
        make.top.equalTo(headerLabel.snp.bottom)
        make.left.bottom.right.equalToSuperview()
    }
}

headerLabel 应该随 tableView 一起滚动并且看起来不应该像粘性的 header。

Answer 1

将表格视图样式从普通更改为分组。您的 header 将随着 table 单元格滚动而移动。

Answer 2

目前您的 table 视图和您的标签在您的 UIViewController 视图中是兄弟姐妹，这意味着您的标签不是 table 视图的一部分，因此它不会随它一起滚动。您可以将标签添加到 UIView，设置它的约束，然后设置 table 视图的 tableHeaderView 属性。这是带有一些硬编码值的示例代码：

    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "some text"
    label.sizeToFit()

    let headerView = UIView()
    headerView.translatesAutoresizingMaskIntoConstraints = false
    headerView.addSubview(label)

    tableView.tableHeaderView = headerView

    headerView.centerXAnchor.constraint(equalTo: tableView.centerXAnchor).isActive = true
    headerView.heightAnchor.constraint(equalToConstant: 80).isActive = true
    headerView.widthAnchor.constraint(equalTo: tableView.widthAnchor).isActive = true

    label.leftAnchor.constraint(equalTo: headerView.leftAnchor, constant: 50).isActive = true

    tableView.tableHeaderView?.layoutIfNeeded()

当 tableview 使用自动布局滚动时避免粘性 header 视图

Avoid sticky header view when tableview scrolls with Auto Layout

tableview

ios

autolayout

swift

snapkit