RATree是一个树形视图三方库,可以在GitHub上下载,这个三方库是通过对UITabelview
的封装来实现了一个多层级、无限制的自定义视图。你可以利用它来实现多种UI效果,这里我实现了一个公司组织结构增、删、改的功能。
关于RATree的使用,官方有一个英文的文档说明,看起来比较费劲,我的小伙伴写了一篇文章基本上讲明白了怎么个使用,有兴趣的童鞋可以参考文章iOS树状视图(折叠单元格)详细使用
。
Demo思想
数据源
RATree的数据源@property (strong,nonatomic) NSMutableArray *dataSource;
看起来可以和UITableView
的数据源一样,但是意义不同,数组中每个元素在UITableView
中一般指代每一行,而在RATree中指代的是几个根节点,这个Demo中相当于只有一个元素(Model),再来看一下Model的创建。
#import <Foundation/Foundation.h>
@interface CellModel : NSObject
@property (strong, nonatomic) NSString *name;
@property (strong, nonatomic) NSMutableArray *children;
- (id)initWithName:(NSString *)name children:(NSMutableArray *)array;
@end
解释一下name
就是这一行的标题,你当然也可以设置的更花哨,完全由你的界面决定。但children
又是一个数组,就是子节点们,可以有很多,也可以是空。模型就是这样创建的,这个Demo中一开始初始化的时候,dataSource
中就一个CellModel
,children
初始化了一下,但是没有东西。添加子节点,实际上就是对它的Model的children添加元素,元素的类型还是CellModel
类型。
代理方法
数据源的问题解决后,关键是怎么使用RATreeView的RATreeDelegate
和RATreeDataSource
。
#pragma mark- RATree的dataSouce
- (NSInteger)treeView:(RATreeView *)treeView numberOfChildrenOfItem:(nullable id)item
{
if (item == nil)
{
return self.dataSource.count;
}
CellModel *model = (CellModel *)item;
return model.children.count;
}
- (UITableViewCell *)treeView:(RATreeView *)treeView cellForItem:(nullable id)item
{
TreeTableViewCell *cell = [treeView dequeueReusableCellWithIdentifier:@"TreeTableViewCell"];
cell.delegate = self;
NSUInteger level = [treeView levelForCellForItem:item];
BOOL isExpand = [treeView isCellForItemExpanded:item];
[cell refreshCellWithItem:item andLevel:level andIsExpand:isExpand];
return cell;
}
- (id)treeView:(RATreeView *)treeView child:(NSInteger)index ofItem:(nullable id)item
{
if (item == nil) {
return self.dataSource[index];
}
CellModel *model = (CellModel *)item;
return model.children[index];
}
- (CGFloat)treeView:(RATreeView *)treeView heightForRowForItem:(id)item
{
return 50;
}
//将要展开
- (void)treeView:(RATreeView *)treeView willExpandRowForItem:(id)item {
TreeTableViewCell *cell = (TreeTableViewCell *)[treeView cellForItem:item];
cell.imgView.image = [UIImage imageNamed:@"header_arrow_down"];
}
//将要收缩
- (void)treeView:(RATreeView *)treeView willCollapseRowForItem:(id)item {
TreeTableViewCell *cell = (TreeTableViewCell *)[treeView cellForItem:item];
cell.imgView.image = [UIImage imageNamed:@"header_arrow_right"];
}
- (void)treeView:(RATreeView *)treeView didSelectRowForItem:(id)item
{
[treeView deselectRowForItem:item animated:NO];
}
#pragma mark - TreeTableViewCell的delegate
-(void)clickTheBtn:(UIButton *)btn withTitle:(NSString *)name inTheCell:(TreeTableViewCell *)cell
{
if ([name isEqualToString:@"增加"]) {
[self addNodeToCell:cell];
}
else if([name isEqualToString:@"删除"])
{
[self deleteNoteFromCell:cell];
}
else
{
[self editNoteToCell:cell];
}
}
UITableView
的代理方法里,有俩个必须实现的方法,而在RATree里面有是三个。关键是这三个都什么意思,明白了就知道该怎么写了。按三个代理方法被调用的先后顺序来说明一下
-
- (NSInteger)treeView:(RATreeView *)treeView numberOfChildrenOfItem:(nullable id)item
这个方法实际上它回调回来给你的参数有treeView
和item
,treeView
没什么好说的,告诉你是哪个treeView,item
其实返回的是你当前视图这一行(不论父节点还是子节点)的父亲节点对象。当最开始的根节点的时候,item返回的是nil,其他情况下就会返回父节点对象。然后代理方法问你要这个item
孩子们有几个?你告诉它就是了,return出去。 -
- (id)treeView:(RATreeView *)treeView child:(NSInteger)index ofItem:(nullable id)item
这个方法紧接着被调用,简单的来说他给你的参数item
还是当前视图这一行的父节点Model,如果是空,就代表当前视图是根节点。index
实际上是告诉你这一次的回调是第几个孩子的回调。说白了就是它告诉你哪个treeView下哪个节点(item)的第几个(index)孩子,是个什么对象(model)?你return这个对象(model)就行了。 -
- (UITableViewCell *)treeView:(RATreeView *)treeView cellForItem:(nullable id)item
这方法一看就是到它是问你要Cell
呢,告诉你哪个treeView
,哪个模型Model(其实也全靠第2个代理方法你return的,它才知道),然后问你要Cell
。这里实际上和UITableView
不同,更直接的告诉你Model了,咱们以前都是self.dataSouce[indexPath.row]
来找到模型,这个封装的直接告诉你模型了(item)很爽吧。
总结
其他的代理方法和自身的方法不说了自己研究吧,都可以看名字猜意思。至于增删改的思路就是,点击cell
的事件全部回调到controller
去执行,然后顺便把自己(也就是self)当参数回调出去,然后。然后通过数据源找到对应的模型,修改就是了,然后刷新。思路就是,视图永远跟着模型走,要改什么不要去改界面,去改模型,然后刷页面,这样就不会错了,尤其是在这种复用的机制下。我觉得这个三方库一开始看我也很头疼,和小伙伴研究了一下总算理清楚思路了,只要把数据源和三个代理方法掌握了,就一切OK了。