如何创建含多类型单元格的垂直滚动CollectionView A并嵌入水平滚动CollectionView B及数据展示

嘿，我来帮你搞定这个嵌套CollectionView的需求！这种垂直滚动的CollectionView A里嵌入水平滚动CollectionView B的场景，在电商首页、内容类APP里超常见，我给你一步步拆解实现方法，保证清晰好懂。

首先得把基础的布局结构搭起来：

• 先准备两个自定义CollectionViewCell：一个是CollectionView A的通用单元格（如果有其他类型的话），另一个是专门用来嵌入CollectionView B的单元格，就叫它HorizontalContainerCell吧。
• 配置CollectionView A的布局：用UICollectionViewFlowLayout，把scrollDirection设为.vertical，这样它就是垂直滚动的。你可以根据需求设置section间距、item间距这些属性。
• 处理HorizontalContainerCell里的CollectionView B：
  • 在这个单元格的contentView里添加UICollectionView，设置它的scrollDirection为.horizontal，这样它就会水平滚动。
  • 给CollectionView B加约束：让它的leading、trailing、top、bottom都和contentView对齐，确保占满整个单元格的空间。
  • 细节优化：可以把CollectionView B的showsHorizontalScrollIndicator设为false去掉滚动条，bounces根据需求开或关（默认是开的，拉到边缘会有弹性效果）。
• 滚动冲突不用愁：因为两个CollectionView的滚动方向完全不同，系统会自动处理触摸事件的传递，不会出现垂直滚动A时误触发B的水平滚动这种问题。

数据处理的核心是把层级关系理清楚，让每个单元格能拿到对应的数据：

1. 设计层级数据源结构：
   你可以创建一个包含section信息的模型，每个section对应CollectionView A里的一个单元格，同时携带该单元格内CollectionView B需要的横向数据。比如用Swift的话可以这么写：

   // 横向每个item的数据模型
   struct HorizontalItem {
       let title: String
       let coverImage: UIImage?
       // 其他你需要的属性，比如ID、跳转链接等
   }
   
   // CollectionView A每个section的数据模型
   struct VerticalSection {
       let sectionTitle: String? // 可选，比如每个横向栏的标题
       let horizontalData: [HorizontalItem]
   }
   

2. 给CollectionView A配置数据源：
   在你的ViewController里，维护一个verticalSections: [VerticalSection]数组。然后实现UICollectionView的数据源方法：
   • numberOfSections返回verticalSections.count
   • numberOfItemsInSection返回1（因为每个section对应一个带横向CollectionView的单元格）
   • 在cellForItemAt里，取出对应的VerticalSection模型，把它的horizontalData传给HorizontalContainerCell。
3. 在HorizontalContainerCell里处理数据展示：
   • 给单元格加一个数据源属性，比如var horizontalItems: [HorizontalItem] = []，并在属性变化时刷新CollectionView B：

     var horizontalItems: [HorizontalItem] = [] {
         didSet {
             collectionView.reloadData()
         }
     }
     

   • 让HorizontalContainerCell自己充当CollectionView B的数据源和代理（这样代码更内聚），在单元格的awakeFromNib或者初始化方法里，设置collectionView.dataSource = self、collectionView.delegate = self，然后实现数据源方法：

     extension HorizontalContainerCell: UICollectionViewDataSource {
         func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
             return horizontalItems.count
         }
     
         func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
             let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HorizontalItemCell", for: indexPath) as! HorizontalItemCell
             let item = horizontalItems[indexPath.item]
             cell.titleLabel.text = item.title
             cell.coverImageView.image = item.coverImage
             return cell
         }
     }
     

4. 别忘了注册单元格：
   • 在ViewController的viewDidLoad里注册CollectionView A的HorizontalContainerCell
   • 在HorizontalContainerCell的初始化方法里，注册它内部的HorizontalItemCell

• 性能优化：如果横向数据量很大，建议给CollectionView B开启预加载（可以通过prefetchDataSource实现），同时确保单元格复用逻辑正确，避免重复创建视图。
• 动态高度适配：如果CollectionView A的单元格高度不是固定值，要确保HorizontalContainerCell的约束是完整的，然后把CollectionView A的FlowLayout的estimatedItemSize设为.automaticSize，系统会自动计算单元格高度。
• 数据更新：如果后续数据有变化，只需要更新对应的verticalSections数组，然后调用collectionViewA.reloadData()或者reloadSections(_:)即可，不用手动刷新内部的CollectionView B，因为我们在horizontalItems的didSet里已经做了自动刷新。

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