Swift中如何用UICollectionView实现类Excel表格的多列UI？

嘿，这个需求我之前帮好几个开发者落地过，用UICollectionView来实现Excel风格的多列表格完全没问题，下面给你拆解关键的实现步骤和注意点：

UICollectionView的单元格复用机制和灵活的布局系统，刚好适配这种行列网格结构的需求。我们可以通过自定义布局、滚动联动、多CollectionView配合来实现类似Excel的核心特性，比如固定表头/首列、单元格编辑、双向滚动这些。

默认的FlowLayout没法直接实现规整的网格行列，所以需要自定义布局来精确控制每个单元格的位置：

• 先确定单元格的基础尺寸，比如列宽设为120pt，行高设为40pt（可以做成可配置的）
• 重写prepare()方法，遍历所有item，根据它的行列位置计算frame：

  override func prepare() {
      super.prepare()
      guard let collectionView = collectionView else { return }
      let totalItems = collectionView.numberOfItems(inSection: 0)
      let columnCount = // 你的总列数
      var frames: [CGRect] = []
      
      for index in 0..<totalItems {
          let row = index / columnCount
          let column = index % columnCount
          let x = CGFloat(column) * cellWidth
          let y = CGFloat(row) * cellHeight
          frames.append(CGRect(x: x, y: y, width: cellWidth, height: cellHeight))
      }
      self.cache = frames // 用缓存存储frame，避免重复计算
  }
  

• 另外重写layoutAttributesForElements(in:)和layoutAttributesForItem(at:)返回缓存的frame，提升布局性能。

要实现滚动时首行和首列固定，最稳妥的方式是用三个UICollectionView配合：

• 顶部表头CollectionView：只显示第一行，横向滚动，不能纵向滚动
• 左侧首列CollectionView：只显示第一列，纵向滚动，不能横向滚动
• 主内容CollectionView：显示剩下的单元格，支持双向滚动
• 监听主CollectionView的滚动事件，同步另外两个的偏移：

  func scrollViewDidScroll(_ scrollView: UIScrollView) {
      // 同步表头的横向偏移，保持和主内容对齐
      headerCollectionView.contentOffset.x = scrollView.contentOffset.x
      // 同步首列的纵向偏移，保持和主内容对齐
      leftColumnCollectionView.contentOffset.y = scrollView.contentOffset.y
  }
  

• 注意要给表头和首列禁用不需要的滚动方向，比如表头的isScrollEnabled = false，只通过主滚动视图来驱动它的横向偏移。

• 自定义SpreadsheetCell，内部放一个UITextField（支持编辑）或者UILabel（仅展示）：

  class SpreadsheetCell: UICollectionViewCell {
      let textField = UITextField()
      
      override init(frame: CGRect) {
          super.init(frame: frame)
          setupTextField()
      }
      
      private func setupTextField() {
          textField.frame = bounds
          textField.borderStyle = .none
          textField.textAlignment = .left
          textField.font = UIFont.systemFont(ofSize: 14)
          contentView.addSubview(textField)
          // 添加边框，模拟Excel单元格样式
          contentView.layer.borderWidth = 0.5
          contentView.layer.borderColor = UIColor.lightGray.cgColor
      }
  }
  

• 用二维数组存储表格数据，比如var spreadsheetData: [[String]] = []，在cellForItemAt方法中通过indexPath.section（行）和indexPath.item（列）取对应的值赋值给单元格。

• 编辑状态管理：如果支持单元格编辑，要记录当前编辑的单元格位置，避免多个单元格同时处于编辑状态；同时在TextField的textFieldDidEndEditing代理方法中更新数据源。
• 列宽/行高调整：如果需要支持用户拖动调整列宽，可以给单元格添加Pan手势，根据拖动距离修改对应列的宽度，然后调用collectionView.collectionViewLayout.invalidateLayout()刷新布局。
• 性能优化：当表格数据量很大时，一定要利用好UICollectionView的复用机制，避免在cellForItemAt中做耗时操作；同时用performBatchUpdates来处理批量数据更新，提升滚动流畅度。

如果还有具体的细节卡点，比如滚动联动时的边界冲突、键盘弹出时的布局调整，随时再问！

内容的提问来源于stack exchange，提问作者Yuvaraj.M