Swift中UITableViewCell内UICollectionView的同步滚动实现

Hey there! Let's tackle this sync-scrolling problem step by step. I've dealt with similar nested scroll layouts before, so here's a practical, battle-tested approach to get all your collection views rolling in lockstep while keeping those text labels fixed in place.

We'll use a shared scroll offset value to coordinate all collection views, listen for scroll events from any collection view, and propagate that offset to every other collection view in the table cells. Since your text labels are attached directly to the UITableViewCell (not nested inside the collection view), they'll stay fixed automatically—we just need to make sure we don't mess with their layout.

1. Track a Global Scroll Offset #

First, in your UITableView's parent view controller, create a variable to store the current shared scroll position. This will be the single source of truth for all collection views:

var currentCollectionOffset: CGPoint = .zero

2. Build a Custom UITableViewCell with Sync Logic #

Create a custom table view cell that handles its collection view's scroll events and can receive offset updates. We'll use a closure to communicate with the parent controller:

class SyncCollectionTableViewCell: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {
    @IBOutlet weak var fixedTextLabel: UILabel!
    @IBOutlet weak var collectionView: UICollectionView!
    
    // Closure to notify parent when this collection view scrolls
    var onScrollOffsetChanged: ((CGPoint) -> Void)?
    // Receive offset updates from parent to sync this collection view
    var syncTargetOffset: CGPoint = .zero {
        didSet {
            // Avoid triggering infinite scroll loops
            if collectionView.contentOffset != syncTargetOffset {
                collectionView.setContentOffset(syncTargetOffset, animated: false)
            }
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        collectionView.delegate = self
        collectionView.dataSource = self
        // Configure your collection view layout (e.g., horizontal flow layout) here
    }
    
    // MARK: - UICollectionView Delegate
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // Send this scroll event to the parent controller
        onScrollOffsetChanged?(scrollView.contentOffset)
    }
    
    // MARK: - UICollectionView DataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // Return your item count
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCollectionCell", for: indexPath)
        // Configure your collection cell here
        return cell
    }
}

3. Bind Sync Logic in the UITableView DataSource #

In your parent view controller's table view data source methods, connect each cell to the global offset and sync mechanism:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "SyncCollectionTableViewCell", for: indexPath) as! SyncCollectionTableViewCell
    
    // Set your fixed label text
    cell.fixedTextLabel.text = "Fixed Label Row \(indexPath.row + 1)"
    
    // Bind the scroll event closure to update the global offset and sync all cells
    cell.onScrollOffsetChanged = { [weak self] newOffset in
        guard let self = self else { return }
        // Update the global offset (keep y=0 if using horizontal scrolling)
        self.currentCollectionOffset = CGPoint(x: newOffset.x, y: 0)
        // Sync all visible table cells
        for visibleCell in tableView.visibleCells {
            if let syncCell = visibleCell as? SyncCollectionTableViewCell {
                syncCell.syncTargetOffset = self.currentCollectionOffset
            }
        }
    }
    
    // Make sure newly dequeued cells start at the correct offset
    cell.syncTargetOffset = currentCollectionOffset
    
    return cell
}

4. Handle Offscreen Cells When Scrolling #

When the table view scrolls and new cells come into view, ensure they sync immediately by updating their offset in the willDisplay method:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    if let syncCell = cell as? SyncCollectionTableViewCell {
        syncCell.syncTargetOffset = currentCollectionOffset
    }
}

5. Verify Fixed Label Layout #

Double-check your cell's view hierarchy:

UITableViewCell.contentView → [Fixed UILabel, UICollectionView]

As long as the label is a direct subview of the table cell's content view (not inside the collection view), it will stay fixed in place regardless of the collection view's scroll position.

• Use weak self in the closure to avoid memory leaks.
• Set animated: false when updating contentOffset to prevent jittery sync animations.
• If you're using vertical collection views, adjust the offset sync to target the y-axis instead of x.

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