iOS 之可折叠二级菜单

在蛋疼的需求面前，程序往往都很无助，最近项目比较多，也比较杂，后台人员修改代码就静悄悄的，神不知鬼不觉的把代码给改掉了，也不吱一声，哎，心累，我们是神仙，可以猜的。捡个比较简单的功能模块分享下，之前做过三级菜单，现在就做做两级菜单。哎，项目中各种不合理，我们就负责码代码吧。

需求�：做一个两级菜单，在同一个页面可进行折叠操作。

先上张图吧:

效果示意图

虚拟机没法录制上传gif图片，就这样吧。

实现思路：

其实这个二级菜单中，第一级菜单也就是tableView的sectionHeaderView，第二级的菜单是tableViewCell，在每次点击这个头部的时候，然后再去刷新数据源，同时在去刷新列表，这样记录头部是否是展开，如果是展开就添加cell的数据源然后再刷新，如果是折叠，就把数据源删除掉，然后再去刷新。

实现

首先声明几个数组来存放一些数据。

声明属性

    // 存放的数据源
    var wjFileArray : NSMutableArray!
    // 存放文件类型的数据源
    var fileCataglogueArray : NSMutableArray!
    // 单个文件数据源
    var singleFileArray : NSMutableArray!

创建数据源

func wjCreatData() {
        self.wjFileArray = NSMutableArray()
        self.fileCataglogueArray = NSMutableArray()
        self.singleFileArray = NSMutableArray()
        
        let i = 1, j = 0
        
        for _ in 1...5 {
            for i in i..<5 {
                let marr = NSMutableArray()
                for j in j..<5 {
                    marr.add("\(i) : \(j)")
                }
                //  存放是每个二级菜单的数据。
                self.singleFileArray.add(marr)
                // 存放折叠的状态
                self.fileCataglogueArray.add(true)
            }
            self.wjFileArray.add(true)
        }
        print(self.singleFileArray)
    }

至此各级菜单所需的数据源已经创建完成。在viewWillAppear(_ animated:)中进行调用就可以了。

数据展示

展示数据的控制器继承自UITableViewController。遵守了相关的协议，实现相关的代理方法。
为了代码的可读性，暂且把相关的代码抽出来，放在相关连的extension中，这样有利于代码的管理。
既然第一级菜单是sectionHeader，所以就要实现相应的DataSource的方法。

    // sections
    override func numberOfSections(in tableView: UITableView) -> Int {
        return self.wjFileArray.count
    }

第二级菜单的行数

// raws
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if self.fileCataglogueArray[section] as! Bool == true { // 折叠的状态
            if self.wjFileArray[section] as! Bool == true {
                return 0
            }
            let sectionCount = self.fileCataglogueArray[section]
            return (sectionCount as AnyObject).count
        }
        // 展开状态
        return (self.singleFileArray[section] as AnyObject).count 
    }

数据展示

    // cells
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let iden = "cell"
        var cell = tableView.dequeueReusableCell(withIdentifier: iden)
        if cell == nil {
            cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: iden)
        }
        // 第二级cell的数据展示
        let cellArray = self.singleFileArray[indexPath.section] as! NSArray
        cell?.textLabel?.text = cellArray[indexPath.row] as? String

        return cell!

sectionHeaderView的设置
高度设置

    // 标题头的高度
    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

展示headerView

// 定义标题头
    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        
        let btn = UIButton(type: .custom)
        btn.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50)
        btn.backgroundColor = UIColor.white
        let i = 1
        btn.setTitle("标题 : \(i + section)", for: .normal)
        btn.addTarget(section, action: #selector(wjFoldVC.btnAction(_ :)), for: .touchUpInside)
        btn.titleLabel?.textAlignment = .left
        btn.setTitleColor(UIColor.black, for: .normal)
        // 设置文本框在按钮中的偏移-> 原本是居中对齐的
        // 根据文本框的文字自适应宽度来获取文本框的宽度
        let btnLabelStr = btn.titleLabel?.text!
        let btnLabelW = btnLabelStr?.size(attributes: [NSFontAttributeName : UIFont.systemFont(ofSize: 15.0)]).width        
        // 计算偏移量
        let edgeSize = self.view.frame.size.width - 22 * 2 - btnLabelW!
        btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: -edgeSize , bottom: 0, right: 0)
        // 设置tag值
        btn.tag = section
        
        let view = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50))
        view.addSubview(btn)
        // 这里的分割线需要优化
        let line = UIView(frame: CGRect(x: 16, y: 44, width: self.view.frame.size.width - 16, height: 0.5))
        line.backgroundColor = UIColor(red: 198 / 255.0, green: 197 / 255.0, blue: 202 / 255.0, alpha: 1.0)
        view.addSubview(line)
        
        return view
    }

实现sectionHeader上的点击事件

    func btnAction(_ btn : UIButton) {
        // <1>获取点击之前的状态
        let isClose = self.fileCataglogueArray[btn.tag] as! Bool
        // <2>更改状态
        self.fileCataglogueArray.replaceObject(at: btn.tag, with: !isClose)
        // <3>刷新数据
        let indexSet = NSIndexSet(index: btn.tag) as IndexSet
        self.tableView.reloadSections(indexSet, with: UITableViewRowAnimation.automatic)
    }

以上就是大体的实现过程。其实这个代码还有很多的修改的地方。

还是放个链接，等有空了就把OC版的也放上去。其实都是大同小异的。