如何将两类数据合并到单个UITableView并添加分类分隔按钮

嗨，我来帮你把两个TableView的逻辑合并成一个，完美实现猫数据在前、狗数据在后，中间用按钮分隔的效果～咱们可以通过分Section+自定义Section Header的方式来实现，逻辑清晰还容易维护，具体步骤如下：

1. 数据准备（保持原有结构即可） #

假设你已经有了猫和狗的数据源数组：

// 猫数据模型数组
var cats: [CatModel] = []
// 狗数据模型数组
var dogs: [DogModel] = []

2. 配置TableView的Section和Row数量 #

咱们把整个TableView分成2个Section：

• Section 0：专门展示猫的数据
• Section 1：头部放分隔按钮，下面展示狗的数据

实现TableView的数据源方法：

extension YourViewController: UITableViewDataSource {
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2 // 共2个分区
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            return cats.count // 猫数据的行数
        case 1:
            return dogs.count // 狗数据的行数
        default:
            return 0
        }
    }
}

3. 自定义分隔按钮的Section Header #

给Section 1的头部添加咱们需要的分隔按钮，先创建一个自定义HeaderView：

class SeparatorHeaderView: UITableViewHeaderFooterView {
    // 分隔按钮
    let separatorButton: UIButton = {
        let btn = UIButton(type: .system)
        btn.setTitle("点击查看/切换狗数据", for: .normal)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        btn.backgroundColor = UIColor.lightGray.withAlphaComponent(0.2)
        btn.layer.cornerRadius = 8
        return btn
    }()
    
    // 用闭包传递点击事件给ViewController
    var buttonTapAction: (() -> Void)?
    
    override init(reuseIdentifier: String?) {
        super.init(reuseIdentifier: reuseIdentifier)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        contentView.addSubview(separatorButton)
        separatorButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            separatorButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            separatorButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            separatorButton.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            separatorButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
        
        separatorButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }
    
    @objc private func buttonTapped() {
        buttonTapAction?()
    }
}

然后在ViewController里注册这个HeaderView，并实现Header相关的代理方法：

extension YourViewController: UITableViewDelegate {
    // 初始化TableView时注册控件
    func setupTableView() {
        tableView.register(SeparatorHeaderView.self, forHeaderFooterViewReuseIdentifier: "SeparatorHeaderView")
        // 别忘了注册猫和狗的单元格
        tableView.register(CatTableViewCell.self, forCellReuseIdentifier: "CatCell")
        tableView.register(DogTableViewCell.self, forCellReuseIdentifier: "DogCell")
    }
    
    // 设置Header高度
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        switch section {
        case 0:
            return 0 // 猫数据的Header隐藏，高度设为0
        case 1:
            return 60 // 分隔按钮Header的高度，可按需调整
        default:
            return 0
        }
    }
    
    // 返回自定义HeaderView
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        guard section == 1 else { return nil }
        
        let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: "SeparatorHeaderView") as! SeparatorHeaderView
        // 绑定按钮点击事件
        header.buttonTapAction = { [weak self] in
            // 这里写按钮点击后的逻辑，比如展开/收起狗数据、跳转页面等
            print("分隔按钮被点击啦！")
        }
        return header
    }
}

4. 配置单元格内容 #

最后在cellForRowAt里根据Section区分加载猫或狗的单元格：

extension YourViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        switch indexPath.section {
        case 0:
            let cell = tableView.dequeueReusableCell(withIdentifier: "CatCell", for: indexPath) as! CatTableViewCell
            let cat = cats[indexPath.row]
            // 配置猫单元格的内容
            cell.configure(with: cat)
            return cell
        case 1:
            let cell = tableView.dequeueReusableCell(withIdentifier: "DogCell", for: indexPath) as! DogTableViewCell
            let dog = dogs[indexPath.row]
            // 配置狗单元格的内容
            cell.configure(with: dog)
            return cell
        default:
            return UITableViewCell()
        }
    }
}

额外小提示 #

• 如果需要实现狗数据的展开/收起效果，可以给狗的数据数组加一个isExpanded状态变量，点击按钮时切换状态，再刷新Section 1的行数即可。
• 若单元格高度是动态的，记得实现tableView(_:heightForRowAt:)方法适配。

这样就能完美实现你想要的效果啦，猫数据在前，中间是分隔按钮，下面是狗数据，逻辑清晰还方便后续扩展～

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