UICollectionView在UITableViewCell中高度动画异常：首次展开单元格缩小

我之前也碰到过几乎一模一样的问题！在UITableViewCell里嵌UICollectionView做展开动画时，首次触发经常会有奇怪的布局跳动，后来排查下来大多是布局约束或者cell重用的锅，给你几个亲测有效的解决思路：

问题复盘 #

你现在的情况是：UICollectionView初始隐藏，点击按钮动画显示，首次展开单元格出现缩小效果，后续操作动画正常。这本质上是首次动画时cell的布局还未完全稳定，AutoLayout计算出现偏差导致的。

具体解决方案 #

1. 用高度约束替代直接设置isHidden #

别直接给UICollectionView设isHidden = true，改用高度约束来控制显示状态，这能让AutoLayout更准确地计算cell的高度变化：

• 先给UICollectionView添加一个高度约束（比如叫collectionViewHeight），初始值设为0
• 点击按钮时，修改约束的constant为CollectionView的实际内容高度（收起时再改回0）
• 动画过程中要强制触发布局更新，确保tableView能正确响应cell高度变化

代码示例：

// 自定义UITableViewCell类中
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
var isExpanded = false

@IBAction func toggleExpandButtonTapped(_ sender: UIButton) {
    isExpanded.toggle()
    
    // 先让CollectionView完成布局，确保contentSize准确
    collectionView.layoutIfNeeded()
    let targetHeight = isExpanded ? collectionView.contentSize.height : 0
    
    UIView.animate(withDuration: 0.3) {
        self.collectionViewHeight.constant = targetHeight
        // 先更新cell自身布局
        self.layoutIfNeeded()
        // 再通知tableView更新整个列表的布局
        self.superview?.superview?.layoutIfNeeded()
    }
}

2. 处理UITableViewCell的重用问题 #

因为tableView会重用cell，所以在cellForRowAt里必须重置cell的展开状态和约束，避免旧状态残留：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellID", for: indexPath) as! YourCustomCell
    let model = yourDataSource[indexPath.row]
    
    // 重置展开状态
    cell.isExpanded = model.isExpanded
    // 提前让collectionView布局，计算正确高度
    cell.collectionView.reloadData()
    cell.collectionView.layoutIfNeeded()
    // 设置约束高度
    cell.collectionViewHeight.constant = model.isExpanded ? cell.collectionView.contentSize.height : 0
    
    return cell
}

3. 延迟动画触发，等待布局稳定 #

如果首次动画还是有问题，可以稍微延迟一点时间再执行动画，让当前的布局周期先完成：

@IBAction func toggleExpandButtonTapped(_ sender: UIButton) {
    isExpanded.toggle()
    
    // 等待当前布局循环结束，再执行动画
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
        self.collectionView.layoutIfNeeded()
        let targetHeight = self.isExpanded ? self.collectionView.contentSize.height : 0
        
        UIView.animate(withDuration: 0.3) {
            self.collectionViewHeight.constant = targetHeight
            self.layoutIfNeeded()
            self.superview?.superview?.layoutIfNeeded()
        }
    }
}

额外小贴士 #

• 收起CollectionView时，可以把它的isScrollEnabled设为false，展开时再改回true，避免滚动干扰动画
• 如果CollectionView的内容是动态加载的，要在数据加载完成后重新计算高度并更新约束
• 不要同时混用isHidden和高度约束，选一种方式控制显示，防止AutoLayout冲突

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