UITableView 多层级(树形)展开

先看一下效果图!

UITableView 多层级(树形)展开_第1张图片
TableView 多层级展示.gif

最近项目中遇到多层级Cell 展开的功能,于是就把这些总结了一下,代码详见Demo,这里写了两种TableView:
TableView1: 适合两级的情况,用的是模型驱动UI,即通过修改模型中的isExpand(代表 展开 \ 收起)属性来达到Cell 展开 \ 收起 效果。
优点:比较容易实现,逻辑简单。
缺点:不适合多级菜单。
TableView2: 适合多级菜单展开 \ 收起,比如:书籍目录或地区选择等,使用的也是模型驱动UI。
需要注意的是: 其中用到递归解析模型。
如下图(一):模型字段)
图(二):detailArray 中是下一层数据的集合

UITableView 多层级(树形)展开_第2张图片
图(一).png
UITableView 多层级(树形)展开_第3张图片
图(二).png

实现过程我遇到了两个问题(大牛请自动跳过):
一、如何递归解析模型

  • 这里借助了MJExtension
  • 这样处理就行了,如图
UITableView 多层级(树形)展开_第4张图片
MutiTree.h.png
UITableView 多层级(树形)展开_第5张图片
MutiTree.m.png

二、如何给模型中加入level字段:

  • 这里主要说一下这个level 的用处: level 表示模型所在的层级,在UI上的用处就是用来计算缩进距离,见图(三)。


    UITableView 多层级(树形)展开_第6张图片
    图(三)
UITableView 多层级(树形)展开_第7张图片
UITableViewCell的两个属性,说实话以前从来没怎么注意过.png

该项目会收集一些非常实用的问题,且都是我自己亲自实践后再会上传,如果大家在用的过程中有什么问题或建议,请在下方评论区提出!
接下来会上传腾讯新闻页的模块,敬请关注!

你可能感兴趣的:(UITableView 多层级(树形)展开)