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

Posted 2023-03-15

【中文标题】当 tableview 使用自动布局滚动时避免粘性标题视图

【英文标题】：Avoid sticky header view when tableview scrolls with Auto Layout

【发布时间】：2018-12-28 09:49:38

【问题描述】：

当前当表格内容滚动时，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 一起滚动，并且不应看起来像粘性标题。

【问题讨论】：

您可以使用表格视图数据源方法将标签作为单元格或作为普通表格视图中的节标题添加，而不是单独添加到视图中。

【参考方案1】：

将 Tableview 样式从普通更改为分组。您的标题将随着表格单元格滚动而移动。

【参考方案2】：

目前，您的表格视图和您的标签在您的 UIViewController 的视图中是同级的，这意味着您的标签不是表格视图的一部分，因此它不会随之滚动。您可以将标签添加到 UIView，设置它的约束，然后设置表视图的 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()