如何在点击按钮后实现Collection View单元格高度扩展与布局切换？

嘿，这个需求我之前做过类似的，其实有几种靠谱的实现思路，咱们一个个唠清楚：

一、你提到的「两套布局切换」方案——可行但不是最优 #

这种思路是完全可以实现的，具体操作可以这样：

• 在单元格里准备两个容器视图，一个对应初始状态（只有日期和爱心按钮），另一个对应展开状态（多了爱心数量区域）。
• 初始状态下，把展开状态的容器设为isHidden = true，只显示初始容器；点击爱心按钮后，切换两个容器的isHidden状态，同时更新单元格的高度。
• 不过这种方法会额外增加视图层级，而且维护两套布局约束也比较麻烦，除非你的两种状态差异极大，否则不太推荐。

二、更简洁高效的「动态约束调整」方案（推荐） #

这是我个人更常用的方法，核心是通过修改约束来控制爱心数量区域的显示/隐藏，同时让Collection View自动适配高度：

1. 提前设置完整约束：给爱心数量区域添加上下左右的约束（比如和爱心按钮的底部间距、自身高度约束、左右边距等），初始时把它的高度约束constant设为0，并且isHidden = true。
2. 切换状态时更新约束：点击爱心按钮后，修改单元格的状态属性（比如新增一个isExpanded的Bool属性），然后根据状态调整爱心数量区域的高度约束constant为实际高度，同时把isHidden设为false。
3. 触发单元格高度更新：调用Collection View的performBatchUpdates(_:completion:)方法，或者直接reloadItems(at: [indexPath])，这样Collection View会自动重新计算并更新单元格的高度，还能自带过渡动画。

举个简单的代码片段示例：

// 单元格里的状态属性
var isExpanded: Bool = false {
    didSet {
        loveCountHeightConstraint.constant = isExpanded ? 44 : 0
        loveCountView.isHidden = !isExpanded
        layoutIfNeeded()
    }
}

// 爱心按钮的点击事件
@IBAction func loveButtonTapped(_ sender: UIButton) {
    isExpanded.toggle()
    // 通知Collection View更新单元格
    if let indexPath = collectionView?.indexPath(for: self) {
        collectionView?.performBatchUpdates({
            collectionView?.reloadItems(at: [indexPath])
        }, completion: nil)
    }
}

三、配合自动计算高度更省心 #

如果你的Collection View用的是UICollectionViewFlowLayout，可以开启自动计算高度，省掉手动计算高度的麻烦：

• 在布局初始化时设置：

let flowLayout = UICollectionViewFlowLayout()
flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
collectionView.collectionViewLayout = flowLayout

• 这样只要单元格内的约束是完整无歧义的，Collection View会根据内容自动计算不同状态下的单元格高度，切换状态后刷新即可。

注意事项 #

• 一定要给单元格添加状态标识（比如isExpanded），这样Collection View在复用单元格时，才能正确恢复对应的状态。
• 约束设置要避免歧义，比如爱心数量区域的高度约束要明确，不然自动计算高度可能会出错。
• 用performBatchUpdates比直接reloadItems的过渡动画更流畅，用户体验更好。

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