杂类

首页 » 归档 » 杂类 » iOS开发: 使用UITableView制作N级下拉菜单-ios学习从入门到精通尽在姬长信

iOS开发: 使用UITableView制作N级下拉菜单-ios学习从入门到精通尽在姬长信

分享最热门资讯

前言

16113162aa675a19.gif

  • 其中每一个UITableViewCell左右两部分拥有不同的功能

  • 下面是我在做这个功能时的思路, 使用的是MVC

创建控制器, 并添加数据

第一步, 创建一个新的项目, 并添加几个

  • LTMenuItemViewController: 继承自UITableViewController, 多层菜单界面

  • LTMenuItem: 继承自 NSObject, 多层菜单的选项模型, 其中有两个属性

  • name: 选项的名称

  • subs: 选项的子层级数据

  • LTMenuItemCell: 继承自: UITableViewCell, 多层菜单的选项cell

  • 添加数据源文件, 存放的就是需要展示的菜单数据, 项目中应从网络中获取, 这里为了方便, 使用文件的形式

第二步, 在LTMenuItemViewController中, 设置tableView的数据源和cell

  • 效果图如下:

blob.png

第三步, 设置选项模型, 添加辅助属性

  • 给LTMenuItem类添加几个辅助属性, 用于表示选中和展开闭合

  • isSelected: 用于表示选项的选中状态

  • isUnfold: 用来表示本层级的展开和闭合状态

  • isCanUnfold: 用于表示本层级是否能够展开, 只有当subs属性的个数不为0时, 才取值YES

  • index: 表示当前的层级, 第一层的值为0

第四步, 设置展开闭合时, 需要显示的数据

  • 在控制器LTMenuItemViewController中, 当前展示的数据是数组menuItems, 此时并不好控制应该展示在tableView中的数据, 所以添加一个新的属性, 用来包含需要展示的数据

  • 其中latestShowMenuItems就是展示在tableView中的数据

  • 使用懒加载, 创建latestShowMenuItems

  • 修改数据源方法, 使用latestShowMenuItems替换menuItems

  • 此时我们只需要控制latestShowMenuItems中包含的数据, 就可以控制页面的展示, 而menuItems中的数据不需要增加和减少

第五步, 控制latestShowMenuItems中数据的方法

  • 现在, latestShowMenuItems中没有数据, 所以界面初始化后将不会展示任何数据

  • 我们接下来就在latestShowMenuItems中添加初始化界面时需要展示的数据, 并设置层级为0

第六步, 通过tableView代理中cell的点击方法, 处理菜单的展开闭合操作

  • 通过- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法, 处理菜单的展开闭合操作

  • 在这里, 根据被点击数据能否展开, 修改了对应的isUnfold属性, 并刷新界面

  • 但此时由于latestShowMenuItems中数据没有数量变化, 所以子层级并不能显示出来

  • 所以我们需要对latestShowMenuItems中的数据进行修改

  • 我们在这里修改第五步中的两个方法, 如下所示

  • 在一开始, 先清空latestShowMenuItems中的数据, 然后添加第一层数据

  • 在添加第一层数据的时候, 对每一个数据进行判断, 判断是否能展开, 并且是否已经展开

  • 如果展开, 添加子类到数组, 这里用递归层层递进, 最后将每一层子类展开的数据全部添加到latestShowMenuItems中, 同时设置了每一层数据的层级属性index

  • 此时- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法, 需要做如下修改

  • 这时, 我们已经可以看到界面上有如下效果

第七步, 添加展开闭合的伸缩动画效果

  • 首先添加一个属性oldShowMenuItems, 用来记录改变前latestShowMenuItems中的数据

  • 修改- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法, 添加展开动画效果

  • 通过判断新老数据的数量, 已经对应的位置, 进行删除和插入操作, 就可以添加对应的动画效果

  • 此时, 效果如下:

第八步, 选项的选中效果

  • 我在cell的左半部分添加了一个半个cell宽的透明按钮, 并设置了一个代理方法

  • 当点击透明按钮时, 调用代理方法, 修改cell对应的LTMenuItem中isSelected的值, 来控制选中状态

  • 在控制器中指定代理, 并实现代理方法

  • 效果如下:

第九步, 使用递归进行 全选和反选 操作

  • 首先我们在导航条右侧添加全选按钮, 并实现对应的点击方法

  • 上述的第二个方法, 就是修改对应数组中所有的数据及子集的选中状态

  • 同时修改该cell的代理方法- (void)cell:(LTMenuItemCell *)cell didSelectedBtn:(UIButton *)sender的实现

  • 最终效果如下:

第十步, 使用已选择数据

  • 这里主要是拿到所有已经选中的数据, 并进行操作

  • 我只进行了打印操作, 如果需要, 可以自己修改

  • 首先添加一个属性selectedMenuItems, 用于存储已选数据

  • 然后通过下列代码可以获取所有已经选中的数据

  • 通过递归, 一层层拿到所有已经选择的选项, 并进行打印操作

  • 如果需要另外处理拿到的数据 只需要修改printSelectedMenuItems方法中的NSLog(@"这里是全部选中数据\n%@", self.selectedMenuItems);即可

demo地址: https://github.com/963527512/MultilayerMenu

ios学习入门精通尽在长信

(0)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/20778.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:3月 22, 2018 at 11:07 下午

关键词:, , , ,

热评文章

发表评论

[必填]

看不清?

提交后请等待三秒以免造成未提交成功和重复