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

来源：互联网发布：c语言编译器有啥用编辑：程序博客网时间：2024/04/28 15:40

原文出处：朱凯奇

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

首先先看下实现效果

1339240-eb04de64bd0754cc

1.gif

使用方法

CocoaPods pod ‘RATreeView’, ‘~> 2.1.0’

具体使用
1.创建model

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#import "RaTreeModel.h"
 
@implementationRaTreeModel
 
-(id)initWithName:(NSString*)name children:(NSArray*)children
{
    self=[superinit];
    if(self){
        self.children=children;
        self.name=name;
    }
    returnself;
}
 
+(id)dataObjectWithName:(NSString*)name children:(NSArray*)children
{
    return[[selfalloc] initWithName:name children:children];
}
@end

2.创建cell

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

找不到的,请看下图

1339240-cc84d95e136e2a00

cell创建具体如下:

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

1339240-f6d5add2df1130f5

Snip20160525_4.png

Objective-C
1
2
3
4
5
6
7
8
9
10
#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

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#import "RaTreeViewCell.h"
 
@interfaceRaTreeViewCell()
 
 
@end
 
@implementationRaTreeViewCell
 
-(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"];
 
 
    //每一层的布局
    CGFloatleft=10+level*30;
 
    //头像的位置
    CGRect  iconViewFrame=self.iconView.frame;
 
    iconViewFrame.origin.x=left;
 
    self.iconView.frame=iconViewFrame;
 
    //title的位置
    CGRecttitleFrame=self.titleLable.frame;
 
    titleFrame.origin.x=40+left;
 
    self.titleLable.frame=titleFrame;
 
 
 
}

3.创建RATreeView
只展示核心代码

数据

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//加载数据
- (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];
}

#代理方法

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#pragma mark -----------delegate
 
//返回行高
-(CGFloat)treeView:(RATreeView*)treeView heightForRowForItem:(id)item{
 
    return50;
}
 
//将要展开
-(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方法

Objective-C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
//返回cell
-(UITableViewCell*)treeView:(RATreeView*)treeView cellForItem:(id)item{
 
 
 
    //获取cell
    RaTreeViewCell*cell=[treeView dequeueReusableCellWithIdentifier:@"RaTreeViewCell"];
 
    //当前item
    RaTreeModel*model=item;
 
    //当前层级
    NSIntegerlevel=[treeView levelForCellForItem:item];
 
    //赋值
    [cell setCellBasicInfoWith:model.name level:level children:model.children.count];
 
    returncell;
 
}
 
/**
*  必须实现
*
*  @param treeView treeView
*  @param item    节点对应的item
*
*  @return  每一节点对应的个数
*/
-(NSInteger)treeView:(RATreeView*)treeView numberOfChildrenOfItem:(id)item
{
    RaTreeModel*model=item;
 
    if(item==nil){
 
        returnself.modelArray.count;
    }
 
    returnmodel.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){
 
        returnself.modelArray[index];
    }
 
    returnmodel.children[index];
}
 
 
//cell的点击方法
-(void)treeView:(RATreeView*)treeView didSelectRowForItem:(id)item{
 
    //获取当前的层
    NSIntegerlevel=[treeView levelForCellForItem:item];
 
    //当前点击的model
    RaTreeModel*model=item;
 
    NSLog(@"点击的是第%ld层,name=%@",level,model.name);
 
}
 
//单元格是否可以编辑 默认是YES
-(BOOL)treeView:(RATreeView*)treeView canEditRowForItem:(id)item{
 
    returnYES;
}
 
//编辑要实现的方法
-(void)treeView:(RATreeView*)treeView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowForItem:(id)item{
 
    NSLog(@"编辑了实现的方法");
 
 
}

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

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

0 0