多横向滚动Collection View页面如何实现整体垂直滚动？

哈哈，这个场景太常见了——像Netflix、Disney+这类流媒体APP全是这种横向滚动卡片组+垂直滚动的布局，我来给你捋捋最靠谱的两种解决办法：

方案一：用UITableView承载横向UICollectionView（大厂标配，极度推荐） #

这就是你提到的Netflix等应用的实现方式，完美适配你的需求，还自带复用机制提升性能，步骤很清晰：

• 给你的ViewController添加一个UITableView，设置约束让它铺满整个父视图（top、bottom、left、right全贴边）
• 创建自定义的UITableViewCell，每个Cell内部嵌入一个UICollectionView，提前给这个CollectionView设置好scrollDirection = .horizontal，并隐藏横向滚动指示器（showsHorizontalScrollIndicator = false）
• 给TableView配置数据源：numberOfRowsInSection直接返回你需要的横向卡片组数量；cellForRowAt里复用自定义Cell，同时给Cell内的CollectionView绑定对应组的数据源和代理
• 记得给TableView设置行高：可以用固定行高，或者开启自动行高（设置estimatedRowHeight并让Cell内部约束撑高）

举个简单的Swift代码片段：

// 在自定义TableViewCell里初始化CollectionView
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let collectionView = UICollectionView(frame: bounds, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.showsHorizontalScrollIndicator = false
    contentView.addSubview(collectionView)
    // 设置CollectionView的约束：铺满Cell的contentView
    NSLayoutConstraint.activate([
        collectionView.topAnchor.constraint(equalTo: contentView.topAnchor),
        collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
    ])
}

方案二：修复UIScrollView的布局约束（适合小数量卡片组） #

如果你不想用TableView，也可以用UIScrollView，但你之前没生效大概率是约束没设置对——ScrollView的布局逻辑和普通View不一样，正确步骤：

• 在ScrollView内部添加一个UIView（我们叫它contentView），给contentView设置以下约束：
  • contentView的leading、trailing、top、bottom全和ScrollView的对应边缘对齐
  • contentView的width等于ScrollView的width（保证横向不会滚动，只允许垂直滚动）
• 把所有横向CollectionView都添加到这个contentView上，设置垂直方向的约束：
  • 第一个CollectionView的top和contentView的top对齐
  • 每个后续的CollectionView的top和上一个CollectionView的bottom对齐
  • 最后一个CollectionView的bottom和contentView的bottom对齐
  • 每个CollectionView的leading、trailing和contentView对齐，同时设置固定高度
• 这样ScrollView就能根据contentView的总高度自动计算滚动范围，实现垂直滚动

额外注意事项 #

• 不管用哪种方案，都要确保每个横向CollectionView的isScrollEnabled = true，别不小心给关了
• 如果用TableView，记得在prepareForReuse里重置Cell内CollectionView的状态，避免数据错乱
• 用ScrollView时，别给ScrollView设置固定的contentSize，让约束自动推导才是正确的做法

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