如何在聊天APP的UICollectionView中添加含第一类Cell的新分区？

嘿，这个需求其实不难实现，核心就是通过更新数据源+通知CollectionView插入新分区来搞定，而且还能保留流畅的动画效果。我给你一步步拆解：

1. 先梳理你的数据源结构 #

因为每个分区对应一种Cell类型，我们可以用一个数组来管理所有分区的信息，每个元素记录该分区的Cell类型和对应内容。比如定义一个简单的结构体：

// 用来存储每个分区的信息
struct ChatSection {
    let cellType: Int // 1=第一类Cell，2=第二类，3=第三类
    let content: String // 聊天内容，可根据你的需求扩展字段
}

// 初始的三个分区数据
var chatSections: [ChatSection] = [
    ChatSection(cellType: 1, content: "初始第一分区内容"),
    ChatSection(cellType: 2, content: "初始第二分区内容"),
    ChatSection(cellType: 3, content: "初始第三分区内容")
]

2. 实现CollectionView的数据源方法 #

根据上面的数据源，我们可以轻松对应到分区数、每个分区的Cell数量，以及Cell的创建逻辑：

// 返回分区总数
func numberOfSections(in collectionView: UICollectionView) -> Int {
    return chatSections.count
}

// 每个分区只放1个Cell，符合你的需求
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1
}

// 根据分区类型创建对应的Cell
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let currentSection = chatSections[indexPath.section]
    
    switch currentSection.cellType {
    case 1:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FirstTypeCellID", for: indexPath) as! FirstTypeCell
        cell.contentLabel.text = currentSection.content // 假设你的Cell有显示内容的Label
        return cell
    case 2:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SecondTypeCellID", for: indexPath) as! SecondTypeCell
        cell.contentLabel.text = currentSection.content
        return cell
    case 3:
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ThirdTypeCellID", for: indexPath) as! ThirdTypeCell
        cell.contentLabel.text = currentSection.content
        return cell
    default:
        return UICollectionViewCell()
    }
}

⚠️ 别忘了提前在viewDidLoad里注册你的Cell哦：

collectionView.register(FirstTypeCell.self, forCellWithReuseIdentifier: "FirstTypeCellID")
collectionView.register(SecondTypeCell.self, forCellWithReuseIdentifier: "SecondTypeCellID")
collectionView.register(ThirdTypeCell.self, forCellWithReuseIdentifier: "ThirdTypeCellID")

3. 发送按钮点击事件的核心逻辑 #

点击发送时，我们只需要新增一个第一类Cell对应的分区数据，然后通知CollectionView插入这个新分区即可：

@IBAction func sendButtonTapped(_ sender: UIButton) {
    // 先获取并校验输入框内容
    guard let inputContent = inputTextField.text, !inputContent.trimmingCharacters(in: .whitespaces).isEmpty else {
        // 这里可以加个提示，比如弹窗或toast告诉用户输入内容
        return
    }
    
    // 创建新的第一类Cell分区
    let newChatSection = ChatSection(cellType: 1, content: inputContent)
    // 添加到数据源数组末尾（你也可以根据需求插入到指定位置，比如最前面）
    chatSections.append(newChatSection)
    
    // 计算新分区的索引
    let newSectionIndex = chatSections.count - 1
    
    // 用批量更新的方式插入分区，自带动画效果，比reloadData更高效
    collectionView.performBatchUpdates({
        collectionView.insertSections(IndexSet(integer: newSectionIndex))
    }, completion: { [weak self] _ in
        // 可选优化：自动滚动到最新的分区，让用户直接看到刚发送的内容
        let latestIndexPath = IndexPath(item: 0, section: newSectionIndex)
        self?.collectionView.scrollToItem(at: latestIndexPath, at: .bottom, animated: true)
    })
    
    // 清空输入框
    inputTextField.text = ""
}

4. 额外注意事项 #

• 如果你的Cell需要自定义尺寸，记得实现UICollectionViewDelegateFlowLayout的sizeForItemAt方法，确保每个Cell显示正常。
• 所有UI操作和数据源更新都要在主线程执行，上面的代码已经满足（按钮点击事件本身就在主线程）。
• 如果需要区分发送者和接收者的样式，只需要在ChatSection结构体里加个isSender字段，在创建Cell时做样式区分即可。

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