登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

ZFJTreeViewKit-高效简单扩展性极强且无限插入子节点的树状...

[复制链接]
来自: zfjsyqk 分类: iOS精品源码 上传时间: 2019-7-1 16:47:21
Tag:

项目介绍:

前言
前几天在写Pythonde的一个Demo的时候,用到一个控件Treeview();
  1. tree = ttk.Treeview(win)
  2. tree.pack()
复制代码

想到在iOS中没有这个控件,网上看了一下有很多treeView的相关控件,但是都扩展性有点差,有的专为聊天列表设计,有的专为选择列表设计;还有笔者上个月在找工作有个面试官也问到了这个事情,我当时只把方案思路说了一个,因此我做了ZFJTreeViewKit!

软件架构
项目的主要类就是ZFJTreeView和ZFJNodeModel,在ZFJTreeView中我们主要封装了一个ZFJTreeView的公共方法,需要主要说明的就是我们的节点数据模型了ZFJNodeModel
ZFJNodeModel包含了节点的关键信息,最重要的就是nodeKey了,这里是ZFJTreeViewKit自动生成,并不需要用户管理和操心,为了方便用户使用和ZFJTreeViewKit的扩展,笔者在这里提供了@property (nonatomic,strong) NSObject *sourceModel;自定义数据源模型,用户可以传入自己自定义的数据模型,方便在CELL中使用; 说到CELL,ZFJTreeViewKit不提供CELL的样式,需要用户自己定义和设计CELL,这也给用户提供了极高的自由度,方便用户根据需求来设计自己的样式功能,但是用户一定要在@property (nonatomic, copy) Class nodeCellCls;中注册自己的CELL。
安装教程
  1. pod 'ZFJTreeViewKit'
  2. pod install
  3. 导入头文件#import "ZFJTreeViewKit.h"
复制代码


使用说明创建ZFJTreeView
本控件的主要视图View就是ZFJTreeView,所以用户在使用的时候直接创建ZFJTreeView类就行,示例代码如下:
  1. - (ZFJTreeView *)treeView{
  2. if(_treeView == nil){
  3. ZFJTreeViewConfig *model = [[ZFJTreeViewConfig alloc] init];
  4. model.separatorStyle = UITableViewCellSeparatorStyleNone;
  5. model.selectionStyle = UITableViewCellSelectionStyleNone;

  6. _treeView = [[ZFJTreeView alloc] initWithFrame:self.view.bounds config:model];
  7. _treeView.delegate = self;
  8. }
  9. return _treeView;
  10. }
复制代码

创建节点
如果不考虑性能问题,ZFJTreeViewKit是可以无限制添加子节点的,笔者这里面展示了添加十级节点的示例,每个节点都有一个自定义数据模型,比如创建一级节点:
  1. MyNodeModel *myModel = [[MyNodeModel alloc] init];
  2. myModel.title = @"自定义Title";

  3. #pragma mark - 添加一级节点
  4. for (int i = 0; i<25; i++) {
  5. ZFJNodeModel *model_f1 = [[ZFJNodeModel alloc] initWithParentNodeModel:nil];
  6. model_f1.nodeName = [NSString stringWithFormat:@"一级节点%d楼",i];
  7. model_f1.height = 55;//节点高度
  8. model_f1.sourceModel = myModel;
  9. model_f1.nodeCellCls = [MyNodeViewCell class];
  10. [self.treeView insertNode:model_f1 completed:^(ZFJError * _Nonnull error) {
  11. NSLog(@"%@",error.message);
  12. }];
  13. [self.dataArr_1 addObject:model_f1];
  14. }
复制代码

从上面的代码可以看到,我们需要设置CELL的高度、自定义数据模型Model(如果有)、注册自定义CELL(必须要有)然后就是调用插入事件了!
接着我们添加二级节点:
  1. #pragma mark - 添加二级节点
  2. for (ZFJNodeModel *model_f1 in self.dataArr_1) {
  3. for (int i = 0; i<2; i++) {
  4. ZFJNodeModel *model_f2 = [[ZFJNodeModel alloc] initWithParentNodeModel:model_f1];
  5. model_f2.nodeName = [NSString stringWithFormat:@"二级节点%d楼",i];
  6. model_f2.height = 55;//节点高度
  7. //model_f2.sourceModel = myModel;
  8. model_f2.nodeCellCls = [MyNodeViewCell class];
  9. [self.treeView insertNode:model_f2 completed:^(ZFJError * _Nonnull error) {
  10. NSLog(@"%@",error.message);
  11. }];
  12. [self.dataArr_2 addObject:model_f2];
  13. }
  14. }
复制代码

从上面的代码我们可以看出,我把所有的一级节点存到数组self.dataArr_1中,然后给所有的一级节点都添加了两个二级节点,所有的二级节点都设置了父节点ZFJNodeModel *model_f2 = [[ZFJNodeModel alloc] initWithParentNodeModel:model_f1];
继续添加三级节点:
  1. #pragma mark - 添加三级节点
  2. for (ZFJNodeModel *model_f2 in self.dataArr_2) {
  3. for (int i = 0; i<2; i++) {
  4. ZFJNodeModel *model_f3 = [[ZFJNodeModel alloc] initWithParentNodeModel:model_f2];
  5. model_f3.nodeName = [NSString stringWithFormat:@"三级节点%d楼",i];
  6. model_f3.height = 55;//节点高度
  7. model_f3.sourceModel = myModel;
  8. model_f3.nodeCellCls = [MyNodeViewCell class];
  9. [self.treeView insertNode:model_f3 completed:^(ZFJError * _Nonnull error) {
  10. NSLog(@"%@",error.message);
  11. }];
  12. [self.dataArr_3 addObject:model_f3];
  13. }
  14. }
复制代码

同样的道理,需要设置父节点ZFJNodeModel *model_f3 = [[ZFJNodeModel alloc] initWithParentNodeModel:model_f2];
同理,我们可以一直往下添加子节点,为某个节点动态添加子节点,但是一定要设置对父节点!!!
公共方法
在ZFJTreeView的公共方法里面,我提供了对常用的点击、展开、折叠、插入、删除、查询等操作,具体如下:
  1. //
  2. //  ZFJTreeView.h
  3. //  ZFJTreeViewDemo
  4. //
  5. //  Created by 张福杰 on 2019/6/27.
  6. //  Copyright © 2019 张福杰. All rights reserved.
  7. //

  8. #import <UIKit/UIKit.h>

  9. @class ZFJTreeView, ZFJTreeViewConfig, ZFJNodeModel, ZFJError;

  10. NS_ASSUME_NONNULL_BEGIN

  11. @protocol ZFJTreeViewDelegate <NSObject>

  12. /**
  13. 节点点击事件代理

  14. @param listView ZFJTreeView
  15. @param model 节点model
  16. @param indexPath indexPath
  17. */
  18. - (void)treeListView:(ZFJTreeView *)listView didSelectNodeModel:(ZFJNodeModel *)model indexPath:(NSIndexPath *)indexPath;

  19. @end

  20. @interface ZFJTreeView : UIView

  21. /**
  22. 初始化方法

  23. @param frame frame
  24. @param config ZFJTreeView配置文件
  25. @return self
  26. */
  27. - (instancetype)initWithFrame:(CGRect)frame config:(ZFJTreeViewConfig *)config;

  28. /**
  29. 代理方法
  30. */
  31. @property (nonatomic, weak) id<ZFJTreeViewDelegate> delegate;

  32. /**
  33. ZFJTreeView头部视图
  34. */
  35. @property (nonatomic,strong) UIView *headerView;

  36. /**
  37. ZFJTreeView尾部视图
  38. */
  39. @property (nonatomic,strong) UIView *footerView;

  40. /**
  41. 插入某个节点

  42. @param model 节点model
  43. */
  44. - (void)insertNode:(ZFJNodeModel *)model completed:(void(^)(ZFJError *error))completed;

  45. /**
  46. 删除某个节点(删除父节点,则子节点全部删除)

  47. @param model 节点model
  48. */
  49. - (void)deleteNode:(ZFJNodeModel *)model completed:(void(^)(ZFJError *error))completed;

  50. /**
  51. 展开/折叠某个节点的所以子节点

  52. @param model 节点model(需要展开/折叠的父节点)
  53. @param completed 错误信息回调
  54. */
  55. - (void)expandAllNodes:(ZFJNodeModel *)model completed:(void(^)(ZFJError *error))completed;

  56. /**
  57. 展开/折叠某个节点的下一级子节点

  58. @param model 节点model(需要展开/折叠的父节点)
  59. @param completed 错误信息回调
  60. */
  61. - (void)expandChildNodes:(ZFJNodeModel *)model completed:(void(^)(ZFJError *error))completed;

  62. /**
  63. 展开/折叠全部节点

  64. @param expand YES:全部展开||NO:全部关闭
  65. */
  66. - (void)expandAllNodes:(BOOL)expand;

  67. /**
  68. 通过节点Key获取节点model

  69. @param nodeKey 节点Key
  70. @return 节点model
  71. */
  72. - (ZFJNodeModel *)getNodeModelWithNodeKey:(NSString *)nodeKey;

  73. /**
  74. 获取子节点是否全部展开(用于设置Cell样式)

  75. @param nodeModel 节点model
  76. @return YES:全部展开 || NO:没有全部展开
  77. */
  78. - (BOOL)getchildNodesExpandState:(ZFJNodeModel *)nodeModel;

  79. /**
  80. 获取节点在父节点中的位置

  81. @param nodeModel 当前节点model
  82. @return 在父节点中的下标(-1 未找到)
  83. */
  84. - (NSInteger)getIndexFromParentNode:(ZFJNodeModel *)nodeModel;

  85. #pragma mark ----------NS_UNAVAILABLE----------

  86. + (instancetype)new NS_UNAVAILABLE;

  87. - (instancetype)init NS_UNAVAILABLE;

  88. - (instancetype)initWithCoder:(NSCoder *)coder NS_UNAVAILABLE;

  89. - (instancetype)initWithFrame:(CGRect)frame NS_UNAVAILABLE;

  90. - (instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style NS_UNAVAILABLE;

  91. @end

  92. NS_ASSUME_NONNULL_END
复制代码

从上面的代码可以看到,ZFJTreeView高度灵活自由且扩展性极强,用户还可以设置ZFJTreeView的头部视图和尾部视图,如下:
  1. self.treeView.backgroundColor = [UIColor groupTableViewBackgroundColor];
  2. [self.view addSubview:self.treeView];

  3. UIView *headerView = [[UIView alloc] init];
  4. headerView.frame = CGRectMake(0, 0, ScreenWidth, 100);
  5. headerView.backgroundColor = [UIColor yellowColor];
  6. self.treeView.headerView = headerView;
复制代码

结束语
这里Demo的样式效果比较丑,大家将就一下吧

相关源码推荐:

我来说两句
*滑动验证:
所有评论(11)
code4app热心网友 2019-7-8 10:32:37
很给力,Code4App有你更精彩!
回复
code4app热心网友 2019-7-8 15:24:55
很给力,Code4App有你更精彩!
回复
code4app热心网友 2019-7-8 15:25:18
楼主用心了,内容非常精彩。
回复
贝壳12232365 2019-7-8 15:26:02
虽不明,但觉厉!
回复
code4app热心网友 2019-7-8 15:47:38
正需要啊,感谢楼主无私分享!
回复
code4app热心网友 2019-7-10 09:23:45
楼主用心了,内容非常精彩。
回复
code4app热心网友 2019-7-10 12:17:50
强烈支持楼主ing……
回复
code4app热心网友 2019-7-10 19:43:15
感谢分享,Code4App有你更精彩:)
回复
感谢分享,Code4App有你更精彩:)
回复
12下一页
提取码:  下载次数:2 状态:已购或VIP 售价:0(原价:15)金钱 下载权限:初级码农 
242 0 2
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表