iOS中多个UICollectionView复用同一自定义Cell的实现方法

嘿，作为有Android开发经验的iOS新手，你的复用思路完全没问题——UICollectionView天生就支持这种跨列表复用同一个Cell的操作，根本不需要为每个CollectionView单独创建布局一致的Cell！下面给你一步步拆解实现方法：

1. 创建通用的Cell组件 #

首先把你重复写的Cell布局逻辑抽成一个通用的Cell类，比如命名为CommonHorizontalCell：

• 如果用Storyboard/XIB：新建一个XIB文件，把布局拖好，然后将XIB的Class关联到CommonHorizontalCell；
• 如果用纯代码：在CommonHorizontalCell的init(frame:)（或者awakeFromNib如果用XIB的话）里编写所有UI布局代码。

建议在这个Cell类里封装一个配置方法，比如configure(with:)，把数据绑定和UI设置的逻辑都放在Cell内部，像Android里的bind方法一样，让代码更整洁：

class CommonHorizontalCell: UICollectionViewCell {
    // 先定义你的UI控件，比如UILabel、UIImageView等
    private let titleLabel = UILabel()
    private let iconImageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }

    // 布局UI的方法
    private func setupUI() {
        // 这里写你的布局代码，比如添加子控件、设置约束等
        contentView.addSubview(titleLabel)
        contentView.addSubview(iconImageView)
        // ... 约束设置
    }

    // 封装的配置方法，接收对应的数据模型
    func configure(with data: YourDataModel) {
        titleLabel.text = data.title
        iconImageView.image = UIImage(named: data.iconName)
        // 其他UI设置
    }
}

2. 给三个CollectionView注册同一个Cell #

在你的ViewController的viewDidLoad里，给三个横向CollectionView都注册这个通用Cell，复用同一个复用ID：

override func viewDidLoad() {
    super.viewDidLoad()
    // 假设你的三个CollectionView分别是collectionView1、collectionView2、collectionView3
    let cellReuseID = "CommonHorizontalCellID"
    
    // 如果是纯代码Cell，用这个注册方式
    collectionView1.register(CommonHorizontalCell.self, forCellWithReuseIdentifier: cellReuseID)
    collectionView2.register(CommonHorizontalCell.self, forCellWithReuseIdentifier: cellReuseID)
    collectionView3.register(CommonHorizontalCell.self, forCellWithReuseIdentifier: cellReuseID)
    
    // 如果是XIB创建的Cell，换成下面的注册方式
    // let nib = UINib(nibName: "CommonHorizontalCell", bundle: nil)
    // collectionView1.register(nib, forCellWithReuseIdentifier: cellReuseID)
    // collectionView2.register(nib, forCellWithReuseIdentifier: cellReuseID)
    // collectionView3.register(nib, forCellWithReuseIdentifier: cellReuseID)
    
    // 额外优化：如果三个CollectionView的布局参数（item大小、间距等）也一致，可以共用同一个FlowLayout
    let commonFlowLayout = UICollectionViewFlowLayout()
    commonFlowLayout.scrollDirection = .horizontal
    commonFlowLayout.itemSize = CGSize(width: 120, height: 180)
    commonFlowLayout.minimumInteritemSpacing = 8
    commonFlowLayout.minimumLineSpacing = 8
    
    collectionView1.collectionViewLayout = commonFlowLayout
    collectionView2.collectionViewLayout = commonFlowLayout
    collectionView3.collectionViewLayout = commonFlowLayout
}

3. 在数据源方法中复用Cell #

实现每个CollectionView的UICollectionViewDataSource方法时，都用同一个复用ID取出Cell，然后根据当前CollectionView的数据源调用configure(with:)方法赋值：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CommonHorizontalCellID", for: indexPath) as! CommonHorizontalCell
    
    // 根据不同的CollectionView匹配对应的数据源
    switch collectionView {
    case collectionView1:
        let data = dataSourceList1[indexPath.item]
        cell.configure(with: data)
    case collectionView2:
        let data = dataSourceList2[indexPath.item]
        cell.configure(with: data)
    case collectionView3:
        let data = dataSourceList3[indexPath.item]
        cell.configure(with: data)
    default:
        break
    }
    
    return cell
}

这样一来，三个CollectionView就都复用同一个Cell组件了，完全避免了重复创建布局一致的Cell，和Android里复用Item布局的逻辑是相通的～

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