如何实现嵌套CollectionView的TableView弹性拉伸头部？

我之前也踩过这个坑！直接修改tableViewHeader或者CollectionView的frame，很容易打乱UICollectionView的内部布局逻辑——比如Cell复用错位、自动布局约束冲突，毕竟它本身有一套自己的复用和布局机制。下面给你一套更可靠的实现方案：

一、先理清楚布局结构 #

先把头部视图的基础布局搭对：

• 给TableView的头部视图设置一个固定的原始高度（比如200pt）
• 让内部嵌套的UICollectionView完全铺满整个头部视图
• CollectionView的Cell里的UIImageView也要铺满Cell，同时设置contentMode = .scaleAspectFill并开启clipsToBounds = true，保证图片拉伸时不会变形或溢出

二、核心实现：用缩放代替修改Frame #

我们不碰任何视图的frame，而是通过缩放层或者ImageView的transform来实现拉伸效果，这样能完全避免干扰CollectionView的布局逻辑。

方法1：缩放整个头部视图（推荐，同步性最好） #

这种方式能让头部里的CollectionView和ImageView一起同步拉伸，代码非常简洁：

// 先定义头部的原始高度，提前存好
let originalHeaderHeight: CGFloat = 200

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let scrollY = scrollView.contentOffset.y
    
    // 只有下拉拉伸（scrollY为负）时才处理，否则恢复原始状态
    guard scrollY < 0 else {
        tableViewHeader.transform = .identity
        return
    }
    
    // 计算缩放比例：下拉得越多，缩放比例越大
    let scaleRatio = 1 + abs(scrollY) / originalHeaderHeight
    // 只在Y轴方向缩放，保持宽度不变，避免头部横向变形
    tableViewHeader.transform = CGAffineTransform(scaleX: 1, y: scaleRatio)
    
    // 关键：设置锚点为顶部中心，不然拉伸时头部会向下偏移
    tableViewHeader.layer.anchorPoint = CGPoint(x: 0.5, y: 0)
    tableViewHeader.layer.position = CGPoint(x: tableView.bounds.midX, y: 0)
}

方法2：单独缩放Cell里的ImageView #

如果你只需要ImageView拉伸，而CollectionView的其他元素（比如文字、按钮）保持不变，可以用这种方式：

// 存当前的缩放比例，供CollectionView Cell使用
private var currentScale: CGFloat = 1.0
let originalHeaderHeight: CGFloat = 200

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let scrollY = scrollView.contentOffset.y
    
    // 更新缩放比例
    currentScale = scrollY < 0 ? (1 + abs(scrollY) / originalHeaderHeight) : 1.0
    
    // 只刷新当前可见的CollectionView Cell，性能开销很小
    if let collectionView = tableViewHeader.subviews.first(where: { $0 is UICollectionView }) as? UICollectionView {
        collectionView.reloadItems(at: collectionView.indexPathsForVisibleItems)
    }
}

然后在你的CollectionView Cell类里处理缩放：

class CustomCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前恢复原始状态，避免Cell错位
        imageView.transform = .identity
    }
    
    func applyScale(_ scale: CGFloat) {
        // 仅在Y轴缩放，保持图片宽高比
        imageView.transform = CGAffineTransform(scaleX: scale, y: scale)
        // 设置锚点为顶部，保证拉伸方向正确
        imageView.layer.anchorPoint = CGPoint(x: 0.5, y: 0)
        imageView.layer.position = CGPoint(x: contentView.bounds.midX, y: 0)
    }
}

最后在CollectionView的cellForItemAt方法里调用：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
    // 其他配置逻辑...
    cell.applyScale(currentScale)
    return cell
}

三、避坑小贴士 #

• 锚点一定要设置：默认锚点是视图中心，不修改的话，拉伸时视图会往中间偏移，视觉效果很奇怪。
• 绝对别直接改Frame：直接修改frame会破坏AutoLayout的约束关系，CollectionView的布局计算会彻底混乱，各种错位、复用问题都会找上门。
• 性能不用担心：两种方法的性能开销都很小，方法2仅刷新可见Cell，完全不会影响滑动流畅度。

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