ios开发 tableview实现多级列表

原创

mob649e8161c39d 2024-12-11 03:53:33 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8161c39d的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS开发：实现多级表格视图（UITableView）

在iOS开发中，UITableView 是一种非常常用的组件，可以用来展示数据列表。在这篇文章中，我们将一步一步教你如何实现一个多级列表的UITableView。多级列表可以用在很多不同的场合，比如文件管理、分类选择等。

流程概述

我们将通过以下步骤来创建一个多级列表：

步骤	描述
1	创建基本的 UITableView
2	定义数据模型
3	配置 UITableView
4	实现数据源方法
5	实现点击展开和收起功能
6	美化界面

甘特图

gantt
    title iOS开发项目进度
    dateFormat  YYYY-MM-DD
    section 创建UITableView
    创建基本表格        :a1, 2023-10-01, 1d
    section 定义数据模型
    定义模型           :a2, 2023-10-02, 1d
    section 配置UITableView
    配置表格视图        :a3, 2023-10-03, 1d
    section 实现数据源方法
    实现数据源方法    :a4, 2023-10-04, 1d
    section 实现展开收起功能
    实现点击功能        :a5, 2023-10-05, 1d
    section 美化界面
    美化UI              :a6, 2023-10-06, 1d

每一步的详细实现

1. 创建基本的 UITableView

首先，你需要在你的 ViewController 中创建一个 UITableView。

import UIKit

class ViewController: UIViewController {
    var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化表格视图
        tableView = UITableView(frame: self.view.bounds, style: .grouped)
        // 注册一个UITableViewCell
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        // 设置数据源和委托
        tableView.dataSource = self
        tableView.delegate = self
        // 将表格视图添加到视图中
        self.view.addSubview(tableView)
    }
}

2. 定义数据模型

我们需要一个数据模型来表示我们的多级数据结构。以下是一个简单的示例：

struct Item {
    let title: String
    var subItems: [Item]
    var isExpanded: Bool = false  // 添加一个标记来控制展开与收起状态
}

3. 配置 UITableView

在 ViewController 中，设置数据源并实现数据源方法。

extension ViewController: UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return items.count  // items 是你的数据数组
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 根据每个 section 的展开状态来决定显示多少行
        return items[section].isExpanded ? items[section].subItems.count + 1 : 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        let item = items[indexPath.section]

        if indexPath.row == 0 {
            // 一级菜单
            cell.textLabel?.text = item.title
        } else {
            // 二级菜单
            let subItem = item.subItems[indexPath.row - 1]
            cell.textLabel?.text = subItem.title
        }
        return cell
    }
}

4. 实现点击展开和收起功能

要实现行的点击展开和收起功能，我们需要在 UITableViewDelegate 中的方法中处理点击事件。

extension ViewController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 处理点击事件
        if indexPath.row == 0 {
            // 点击第一行，展开或收起二级菜单
            items[indexPath.section].isExpanded.toggle()
            tableView.reloadSections(IndexSet(integer: indexPath.section), with: .automatic)
        }
    }
}

5. 美化界面

最后，可以给表格视图添加一些样式，比如设置背景色、行高等。

override func viewDidLoad() {
    // 省略之前的代码...

    // 设置行高
    tableView.rowHeight = 60
    // 设置背景色
    tableView.backgroundColor = .white
}

类图

classDiagram
    class ViewController {
        +UITableView tableView
        +viewDidLoad()
    }

    class Item {
        +String title
        +[Item] subItems
        +Bool isExpanded
    }