iOS UIKit实现顶部视图组与TableView联动垂直滚动咨询

Hey there! As an iOS dev who's built plenty of scrollable header setups, I totally get comparing it to Android's CoordinatorLayout—it's a great tool, but UIKit has its own straightforward solutions for this exact scenario. Let me break down the two most common approaches depending on what kind of behavior you want:

If you just want the ImageView+Label group to scroll along with the TableView (disappearing off the top as you scroll down), the easiest way is to use UITableView's built-in tableHeaderView property. This is the equivalent of a basic scrollable header in Android, no extra containers needed.

Step-by-Step Implementation: #

• First, create a custom UIView subclass that holds your ImageView and Label (using AutoLayout for clean layout).
• Assign this custom view to your TableView's tableHeaderView property.

Here's a Swift code example:

// Custom header view with ImageView and Label
class CustomTableHeaderView: UIView {
    private let headerImageView: UIImageView = {
        let iv = UIImageView()
        iv.image = UIImage(named: "your-header-image") // Replace with your image
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        return iv
    }()
    
    private let headerLabel: UILabel = {
        let label = UILabel()
        label.text = "Welcome to My App"
        label.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        label.textColor = .white
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupSubviews()
    }
    
    private func setupSubviews() {
        // Add and constrain subviews
        addSubview(headerImageView)
        addSubview(headerLabel)
        
        headerImageView.translatesAutoresizingMaskIntoConstraints = false
        headerLabel.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            // ImageView fills the entire header
            headerImageView.topAnchor.constraint(equalTo: topAnchor),
            headerImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
            headerImageView.trailingAnchor.constraint(equalTo: trailingAnchor),
            headerImageView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            // Label centered horizontally, near the bottom of the header
            headerLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            headerLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16)
        ])
    }
}

// ViewController with TableView and header
class HeaderTableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    private let tableView = UITableView()
    private let headerView = CustomTableHeaderView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        setupHeader()
    }
    
    private func setupTableView() {
        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        
        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: "BasicCell")
    }
    
    private func setupHeader() {
        // Set initial frame for the header (we'll update it for AutoLayout)
        headerView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 200)
        
        // For AutoLayout, we need to calculate the correct size
        headerView.layoutIfNeeded()
        let fittingSize = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
        var headerFrame = headerView.frame
        headerFrame.size.height = fittingSize.height
        headerView.frame = headerFrame
        
        tableView.tableHeaderView = headerView
    }
    
    // MARK: - TableView DataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 50 // Just enough rows to test scrolling
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "BasicCell", for: indexPath)
        cell.textLabel?.text = "Row \(indexPath.row + 1)"
        return cell
    }
}

Note: When using AutoLayout for the header view, you have to explicitly set its frame because tableHeaderView doesn't automatically respect AutoLayout constraints on its own—hence the layoutIfNeeded() and systemLayoutSizeFitting() calls.

If you want the header to collapse, shrink, or change appearance as you scroll (similar to Android's CollapsingToolbarLayout), you'll need to use a UIScrollView as a container for both the header and the TableView. Then you can listen to scroll events to adjust the header's properties.

Step-by-Step Implementation: #

• Create a parent UIScrollView that holds your custom header and the TableView.
• Set up constraints so the TableView sits directly below the header.
• Use UIScrollViewDelegate to monitor scroll offset and adjust the header's height, position, or content.

Here's a Swift example for a collapsing header:

class CollapsingHeaderViewController: UIViewController, UITableViewDataSource {
    private let scrollView = UIScrollView()
    private let headerView = CustomTableHeaderView()
    private let tableView = UITableView()
    
    // Define header heights
    private let originalHeaderHeight: CGFloat = 200
    private let minimumHeaderHeight: CGFloat = 60 // Match your nav bar height if needed
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupScrollView()
        setupHeader()
        setupTableView()
        setupConstraints()
        
        // Listen for scroll events
        scrollView.delegate = self
    }
    
    private func setupScrollView() {
        view.addSubview(scrollView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.bounces = false
    }
    
    private func setupHeader() {
        scrollView.addSubview(headerView)
        headerView.translatesAutoresizingMaskIntoConstraints = false
        // Start with full height
        headerView.heightAnchor.constraint(equalToConstant: originalHeaderHeight).isActive = true
    }
    
    private func setupTableView() {
        scrollView.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "BasicCell")
        tableView.showsVerticalScrollIndicator = false
        tableView.bounces = false
    }
    
    private func setupConstraints() {
        NSLayoutConstraint.activate([
            // ScrollView fills the entire view
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            
            // Header constraints
            headerView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            headerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            headerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            
            // TableView sits below header, matches scrollView width
            tableView.topAnchor.constraint(equalTo: headerView.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            tableView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
    }
    
    // MARK: - TableView DataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 50
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "BasicCell", for: indexPath)
        cell.textLabel?.text = "Row \(indexPath.row + 1)"
        return cell
    }
}

// MARK: - UIScrollViewDelegate
extension CollapsingHeaderViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let scrollOffsetY = scrollView.contentOffset.y
        
        // Calculate new header height (clamp between min and original)
        let newHeaderHeight = max(originalHeaderHeight - scrollOffsetY, minimumHeaderHeight)
        
        // Update header height constraint
        headerView.constraints.forEach { constraint in
            if constraint.firstAttribute == .height {
                constraint.constant = newHeaderHeight
            }
        }
        
        // Adjust label position to move up as header collapses
        let labelBottomPadding = max(16, 16 - (originalHeaderHeight - newHeaderHeight))
        headerView.headerLabel.bottomAnchor.constraint(equalTo: headerView.bottomAnchor, constant: -labelBottomPadding).isActive = true
        
        headerView.layoutIfNeeded()
    }
}

Key Notes: #

• This approach lets you customize the header's behavior as much as you want—you could scale the ImageView, fade the label, or even pin the label to the top of the screen once the header collapses.
• Make sure to disable bouncing on both the outer ScrollView and inner TableView to avoid weird scrolling behavior.

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