CollectionView与其他视图联动动画时单元格帧异常问题

Hey Alessandro, I've looked through your problem and code, let's break down what's going wrong and how to fix it:

问题根源分析 #

1. 单元格内视图的布局方式错误：你直接用displayedView.frame = cell.contentView.bounds设置子视图的frame，这种静态布局不会在单元格尺寸变化时自动更新。
2. sizeForItemAt未被正确触发：虽然你调用了invalidateLayout()，但可能因为collectionView的bounds变化没有被布局系统正确感知，导致该方法没有重新执行，单元格尺寸还是旧的。
3. 缺少对布局变化的响应：当导航栏重新显示后，collectionView的有效尺寸发生了变化，但单元格没有收到重新布局的信号。

具体解决方案 #

1. 替换静态frame为Auto Layout约束

在cellForItemAt方法中，不要再用frame，而是给子视图添加约束让它铺满cell的contentView：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
    let displayedView = self.views[indexPath.row]
    
    // 先移除之前可能添加的约束，避免重复
    displayedView.removeFromSuperview()
    displayedView.translatesAutoresizingMaskIntoConstraints = false
    cell.contentView.addSubview(displayedView)
    
    // 添加铺满的约束
    NSLayoutConstraint.activate([
        displayedView.topAnchor.constraint(equalTo: cell.contentView.topAnchor),
        displayedView.leadingAnchor.constraint(equalTo: cell.contentView.leadingAnchor),
        displayedView.trailingAnchor.constraint(equalTo: cell.contentView.trailingAnchor),
        displayedView.bottomAnchor.constraint(equalTo: cell.contentView.bottomAnchor)
    ])
    
    return cell
}

2. 优化搜索取消后的布局更新

仅仅调用invalidateLayout()可能不够，我们需要强制collectionView重新计算单元格尺寸并刷新可见单元格：

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    // 先让布局失效
    self.collectionView.collectionViewLayout.invalidateLayout()
    // 强制刷新可见单元格，确保尺寸更新
    self.collectionView.reloadItems(at: self.collectionView.indexPathsForVisibleItems)
    // 触发立即布局
    self.collectionView.layoutIfNeeded()
}

3. 监听collectionView的bounds变化（可选增强）

为了确保在任何bounds变化时都能更新布局，可以在viewWillLayoutSubviews中添加布局更新逻辑：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    // 当视图布局变化时，强制更新collectionView布局
    self.collectionView.collectionViewLayout.invalidateLayout()
}

额外注意点 #

• 确保你的CollectionViewCell的contentView没有额外的内边距，或者在约束中考虑到这一点。
• 检查setupCollectionView中添加子视图的逻辑，确保supersetListVC的view被正确添加和管理：

private func setupCollectionView() {
    guard let supersetListVC = self.storyboard?.instantiateViewController(withIdentifier: "SupersetListVC") else {return}
    self.addChild(supersetListVC)
    self.views.append(supersetListVC.view)
    supersetListVC.didMove(toParent: self) // 加上这行，确保VC生命周期正确
    self.collectionView.delegate = self
    self.collectionView.dataSource = self
    self.collectionView.reloadData()
}

这些修改应该能解决你遇到的单元格被遮挡的问题，核心是让布局系统能自动响应尺寸变化，而不是依赖静态的frame设置。

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