UITableView内多个UICollectionView滚动相互干扰问题求助

Hey there! As someone who’s been where you are—fumbling through iOS layout bugs as a newbie—let me walk you through fixing this super common issue with UITableView + horizontal UICollectionViews. The problem you’re seeing (one collection view scrolling making others move too) almost always boils down to UITableView cell reuse or shared data sources/delegates. Let’s break this down step by step:

1. The Culprit: UITableView Cell Reuse #

When UITableView scrolls, it reuses off-screen cells to save memory. If you don’t track and restore each collection view’s scroll position, a reused cell will inherit the scroll offset from the last cell that used that reuse identifier.

Fix: Track Scroll Offsets Per Section #

We’ll store each collection view’s scroll position in a dictionary, keyed by its corresponding UITableView section.

First, add this property to your view controller:

private var collectionViewOffsets = [Int: CGPoint]()

Then, in your tableView(_:cellForRowAt:) method, restore the saved offset when configuring the cell:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "HorizontalRowCell", for: indexPath) as! HorizontalRowCell
    
    // Tag the collection view with its section index so we can identify it later
    cell.collectionView.tag = indexPath.section
    
    // Restore the saved scroll offset (or reset to zero if none exists)
    if let savedOffset = collectionViewOffsets[indexPath.section] {
        cell.collectionView.contentOffset = savedOffset
    } else {
        cell.collectionView.contentOffset = .zero
    }
    
    // Pass your data to the cell (e.g., a list of items for this row)
    cell.rowItems = yourDataArray[indexPath.section]
    
    return cell
}

Next, implement UIScrollViewDelegate to save the offset whenever a collection view scrolls:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let collectionView = scrollView as? UICollectionView else { return }
    // Save the offset using the collection view's tag (our section index)
    collectionViewOffsets[collectionView.tag] = collectionView.contentOffset
}

Don’t forget to reset the cell’s state when it’s reused! Add this to your custom UITableViewCell class:

class HorizontalRowCell: UITableViewCell {
    @IBOutlet weak var collectionView: UICollectionView!
    var rowItems: [YourItemType] = [] {
        didSet {
            collectionView.reloadData()
        }
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        rowItems = []
        // Optional: Reset offset here if you want fresh rows to start at the left
        // collectionView.contentOffset = .zero
    }
}

2. Another Common Issue: Shared Data Sources/Delegates #

If you set your view controller as the data source/delegate for all collection views, you might accidentally mix up data or scroll states between rows. A cleaner solution is to let each UITableViewCell manage its own collection view.

Fix: Delegate Data Source to the UITableViewCell #

Update your custom cell to handle the collection view’s data source and delegate internally:

class HorizontalRowCell: UITableViewCell, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!
    var rowItems: [YourItemType] = [] {
        didSet {
            collectionView.reloadData()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Set the cell itself as the data source/delegate
        collectionView.dataSource = self
        collectionView.delegate = self
        // Register your collection view cell (if not done in IB)
        collectionView.register(UINib(nibName: "ItemCell", bundle: nil), forCellWithReuseIdentifier: "ItemCell")
    }
    
    // MARK: - UICollectionView DataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return rowItems.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ItemCell", for: indexPath) as! ItemCell
        cell.configure(with: rowItems[indexPath.item])
        return cell
    }
    
    // MARK: - UICollectionView Layout
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // Set your desired cell size (e.g., 120w x full collection view height)
        return CGSize(width: 120, height: collectionView.bounds.height)
    }
}

This way, each collection view has its own isolated data source and delegate—no more cross-talk between rows!

Final Checks #

• Double-check your Auto Layout constraints: Ensure each collection view has a fixed height and leading/trailing constraints to the cell edges (so it knows to scroll horizontally).
• If you’re using storyboards, make sure each collection view’s Scroll Direction is set to Horizontal in the Attributes Inspector.

With these changes, each horizontal collection view will scroll independently, just like Netflix’s home screen!

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