在蛋疼的需求面前，程序往往都很无助，最近项目比较多，也比较杂，后台人员修改代码就静悄悄的，神不知鬼不觉的把代码给改掉了，也不吱一声，哎，心累，我们是神仙，可以猜的。捡个比较简单的功能模块分享下，之前做过三级菜单，现在就做做两级菜单。哎，项目中各种不合理，我们就负责码代码吧。
需求�：做一个两级菜单，在同一个页面可进行折叠操作。
先上张图吧:
效果示意图
虚拟机没法录制上传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版的也放上去。其实都是大同小异的。
网友评论