iOS树状视图(折叠单元格)详细使用

作者：朱凯奇

原文链接：http://www.jianshu.com/p/4abf7ebf7017

RATreeView是一个第三方的iOS树视图(通俗的讲就是折叠单元格)，它是对UITableView的封装，定义自己的委托和数据源的法，RATreeView是高度可定制的，并且有很多功能。很多朋友都说使用的不好，官方讲的也不够详细，所以我就给大家讲一下，怎么使用。

实现效果

使用方法

CocoaPods pod 'RATreeView', '~> 2.1.0'

具体使用

1.创建model

#import <Foundation/Foundation.h>

@interface RaTreeModel : NSObject

@property (nonatomic,copy) NSString *name;//标题

@property (nonatomic,strong) NSArray *children;//子节点数组

//初始化一个model

- (id)initWithName:(NSString *)name children:(NSArray *)array;

//遍历构造器

+ (id)dataObjectWithName:(NSString *)name children:(NSArray *)children;

@end

#import "RaTreeModel.h"

@implementation RaTreeModel

- (id)initWithName:(NSString *)name children:(NSArray *)children

{

self = [super init];

if (self) {

self.children = children;

self.name = name;

}

return self;

}

+ (id)dataObjectWithName:(NSString *)name children:(NSArray *)children

{

return [[self alloc] initWithName:name children:children];

}

@end

2.创建cell

特别注意 xib创建的cell，一定不要勾选Use Auto Layout，否则cell上的布局不会执行。

找不到的，请看下图

cell创建具体如下:

这是我用xib设置的cell,你们按照你们的需求做

#import <UIKit/UIKit.h>

@interface RaTreeViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *iconView;//图标

@property (weak, nonatomic) IBOutlet UILabel *titleLable;//标题

//赋值

- (void)setCellBasicInfoWith:(NSString *)title level:(NSInteger)level children:(NSInteger )children;

@end

#import "RaTreeViewCell.h"

@interface RaTreeViewCell ()

@end

@implementation RaTreeViewCell

- (void)awakeFromNib {

// Initialization code

self.selectionStyle = UITableViewCellSelectionStyleNone;

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

[super setSelected:selected animated:animated];

// Configure the view for the selected state

}

- (void)setCellBasicInfoWith:(NSString *)title level:(NSInteger)level children:(NSInteger )children{

//有自孩子时显示图标

if (children==0) {

self.iconView.hidden = YES;

}

else { //否则不显示

self.iconView.hidden = NO;

}

self.titleLable.text = title;

self.iconView.image = [UIImage imageNamed:@"close"];

//每一层的布局

CGFloat left = 10+level*30;

//头像的位置

CGRect  iconViewFrame = self.iconView.frame;

iconViewFrame.origin.x = left;

self.iconView.frame = iconViewFrame;

//title的位置

CGRect titleFrame = self.titleLable.frame;

titleFrame.origin.x = 40+left;

self.titleLable.frame = titleFrame;

}

3.创建RATreeView

只展示核心代码

• 数据

//加载数据

- (void)setData {

//宝鸡市 (四层)

RaTreeModel *zijingcun = [RaTreeModel dataObjectWithName:@"紫荆村" children:nil];

RaTreeModel *chengcunzheng = [RaTreeModel dataObjectWithName:@"陈村镇" children:@[zijingcun]];

RaTreeModel *fengxiang = [RaTreeModel dataObjectWithName:@"凤翔县" children:@[chengcunzheng]];

RaTreeModel *qishan = [RaTreeModel dataObjectWithName:@"岐山县" children:nil];

RaTreeModel *baoji = [RaTreeModel dataObjectWithName:@"宝鸡市" children:@[fengxiang,qishan]];

//西安市

RaTreeModel *yantaqu = [RaTreeModel dataObjectWithName:@"雁塔区" children:nil];

RaTreeModel *xinchengqu = [RaTreeModel dataObjectWithName:@"新城区" children:nil];

RaTreeModel *xian = [RaTreeModel dataObjectWithName:@"西安" children:@[yantaqu,xinchengqu]];

RaTreeModel *shanxi = [RaTreeModel dataObjectWithName:@"陕西" children:@[baoji,xian]];

[self.modelArray addObject:shanxi];

}

• #代理方法

#pragma mark -----------delegate

//返回行高

- (CGFloat)treeView:(RATreeView *)treeView heightForRowForItem:(id)item {

return 50;

}

//将要展开

- (void)treeView:(RATreeView *)treeView willExpandRowForItem:(id)item {

RaTreeViewCell *cell = (RaTreeViewCell *)[treeView cellForItem:item];

cell.iconView.image = [UIImage imageNamed:@"open"];

}

//将要收缩

- (void)treeView:(RATreeView *)treeView willCollapseRowForItem:(id)item {

RaTreeViewCell *cell = (RaTreeViewCell *)[treeView cellForItem:item];

cell.iconView.image = [UIImage imageNamed:@"close"];

}

//已经展开

- (void)treeView:(RATreeView *)treeView didExpandRowForItem:(id)item {

NSLog(@"已经展开了");

}

//已经收缩

- (void)treeView:(RATreeView *)treeView didCollapseRowForItem:(id)item {

NSLog(@"已经收缩了");

}

• # dataSource方法

//返回cell

- (UITableViewCell *)treeView:(RATreeView *)treeView cellForItem:(id)item {

//获取cell

RaTreeViewCell *cell = [treeView dequeueReusableCellWithIdentifier:@"RaTreeViewCell"];

//当前item

RaTreeModel *model = item;

//当前层级

NSInteger level = [treeView levelForCellForItem:item];

//赋值

[cell setCellBasicInfoWith:model.name level:level children:model.children.count];

return cell;

}

/**

*  必须实现

*

*  @param treeView treeView

*  @param item    节点对应的item

*

*  @return  每一节点对应的个数

*/

- (NSInteger)treeView:(RATreeView *)treeView numberOfChildrenOfItem:(id)item

{

RaTreeModel *model = item;

if (item == nil) {

return self.modelArray.count;

}

return model.children.count;

}

/**

*必须实现的dataSource方法

*

*  @param treeView treeView

*  @param index    子节点的索引

*  @param item     子节点索引对应的item

*

*  @return 返回 节点对应的item

*/

- (id)treeView:(RATreeView *)treeView child:(NSInteger)index ofItem:(id)item {

RaTreeModel *model = item;

if (item==nil) {

return self.modelArray[index];

}

return model.children[index];

}

//cell的点击方法

- (void)treeView:(RATreeView *)treeView didSelectRowForItem:(id)item {

//获取当前的层

NSInteger level = [treeView levelForCellForItem:item];

//当前点击的model

RaTreeModel *model = item;

NSLog(@"点击的是第%ld层,name=%@",level,model.name);

}

//单元格是否可以编辑 默认是YES

- (BOOL)treeView:(RATreeView *)treeView canEditRowForItem:(id)item {

return YES;

}

//编辑要实现的方法

- (void)treeView:(RATreeView *)treeView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowForItem:(id)item {

NSLog(@"编辑了实现的方法");

}

4.基本能用到的方法 我都写了注释,如有错误请指出，是不是比官方的清楚的多。

demo地址：https://git.oschina.net/zhukaiqi/RATreeDemo.git