实现适配任意单元格数的UITableView可拉伸Header（带最小/最大高度）

Hey there! I’ve run into this exact headache before—stretchable table headers breaking when the table content is too short. Let me walk you through a solid, reliable solution that works no matter how few cells you have, with proper collapsing (down to 50pt) and stretching (up to 200pt) behavior.

Core Fix Overview #

The root issue with the original example is that UITableView (a subclass of UIScrollView) won’t trigger scroll events if its content height is shorter than the screen height. We’ll fix this by:

1. Forcing the table to have enough content height to enable scrolling
2. Using scrollViewDidScroll to manually adjust the header frame and table insets
3. Locking the header’s height between your defined min and max values

Step 1: Create a Custom Stretchable Header View #

First, let’s make a reusable header view with fixed min/max heights:

import UIKit

class StretchableHeaderView: UIView {
    // Define your fixed height constants here
    static let minHeight: CGFloat = 50
    static let maxHeight: CGFloat = 200
    
    // Add your header content here (labels, images, etc.)
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Stretchable Header"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 20)
        label.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
    }
    
    private func setupLayout() {
        backgroundColor = .systemBlue
        addSubview(titleLabel)
        
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
}

Step 2: Implement the Table View Logic #

Now set up your view controller to handle the header stretching/collapsing, even with minimal content:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, UIScrollViewDelegate {
    
    private let tableView = UITableView()
    private var stretchableHeader: StretchableHeaderView!
    private let cellID = "BasicCell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        setupHeader()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // Force the table to have enough content height to enable scrolling
        let minRequiredHeight = view.bounds.height
        if tableView.contentSize.height < minRequiredHeight {
            tableView.contentSize = CGSize(width: tableView.contentSize.width, height: minRequiredHeight)
        }
    }
    
    private func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellID)
        // Disable system auto-inset adjustment to avoid conflicts
        tableView.contentInsetAdjustmentBehavior = .never
    }
    
    private func setupHeader() {
        stretchableHeader = StretchableHeaderView(frame: CGRect(
            x: 0,
            y: 0,
            width: view.bounds.width,
            height: StretchableHeaderView.maxHeight
        ))
        tableView.tableHeaderView = stretchableHeader
    }
    
    // MARK: - UITableView DataSource
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1 // Works with ANY number of rows here (1, 5, 100+)
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath)
        cell.textLabel?.text = "Cell \(indexPath.row + 1)"
        return cell
    }
    
    // MARK: - Scroll View Logic for Header
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        
        // Calculate new header height, clamping between min and max
        var newHeaderHeight = StretchableHeaderView.maxHeight + offsetY
        newHeaderHeight = max(newHeaderHeight, StretchableHeaderView.minHeight)
        newHeaderHeight = min(newHeaderHeight, StretchableHeaderView.maxHeight)
        
        // Update header frame to match scroll offset
        stretchableHeader.frame = CGRect(
            x: 0,
            y: offsetY,
            width: view.bounds.width,
            height: newHeaderHeight
        )
        
        // Adjust table inset to keep content aligned with the header
        let topInset = max(0, StretchableHeaderView.maxHeight - newHeaderHeight)
        tableView.contentInset = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0)
    }
}

Key Details to Note #

1. Forced Content Height: The viewDidLayoutSubviews code ensures the table has enough content to trigger scroll events, even with just one cell.
2. Clamped Height Calculation: We never let the header go below 50pt or above 200pt, no matter how far the user scrolls.
3. Content Inset Adjustment: This keeps the table content glued to the bottom of the header as it collapses, preventing awkward gaps.
4. Auto Layout Friendly: The header uses Auto Layout for its internal content, so you can add images, buttons, or other elements without breaking the stretching behavior.

内容的提问来源于stack exchange，提问作者Gena Novak