美文网首页iOS学习实用小功能买不来的iOS实用技巧
iOS树状视图(折叠单元格)详细使用

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

作者: 朱凯奇 | 来源:发表于2016-05-25 17:17 被阅读5066次

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


  • 首先先看下实现效果
1.gif
  • 使用方法

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上的布局不会执行.

找不到的,请看下图

Snip20160525_1.png

cell创建具体如下:

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

Snip20160525_4.png
#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

相关文章

网友评论

  • c70cde86559b:如何获取每个item的Expand的状态,是展开还是闭合
  • 03a944293b39:请问怎么知道点击的是最后一层呢
    朱凯奇:@一粒含情的沙 节点的孩子为空时就表示是根节点
  • 天蚕青春豆:楼主,如果从服务器上面拿到的JSON数据,我该如何解析
  • minjing_lin:请问如何设置默认展开第一个cell
    朱凯奇:[_treeView reloadData];

    [_treeView expandRowForItem:_dataSource[0] ];
  • 雨声不吃鱼:请问如何设置默认全部展开?
    朱凯奇:必须写到reloadData后,默认全部展开
    朱凯奇:@MinJing_Lin [_treeView reloadData];

    [_treeView expandRowForItem:_dataSource[0] expandChildren:YES withRowAnimation:RATreeViewRowAnimationNone];
    minjing_lin:你找到方法了吗?
  • 席坤:楼主可以加下我的qq 460373604 嘛有一些问题请问你
  • 亚特曼:在什么地方下载你写的源代码呢?
  • Top_Moon:请问如何设置默认展开第一个cell
    e95c0ad8ab17:[treeView expandRowForItem:self.modelArray[0]];
    e95c0ad8ab17:@MinJing_Lin [treeView expandRowForItem:self.modelArray[0]];
    minjing_lin:找到方法了吗
  • 其字德安:非常感谢
  • b5b2e10ccc0e:有关treeView展开合并时会滑动到顶端怎么解决
  • 公爵海恩庭斯:谢谢分享。
  • 零度15号:赞赞赞
  • 宇宇宇宇宇宇哲:੬相ੂ当ੂ实ੂ用ੂ੩
  • 八月未央2015:请问源码不可以直接下载吗😊
    朱凯奇:@guanqingqing 可以下载
  • 简单也好:有用 赞,楼主陕西人
  • JoeWcc:不错
  • sheepcao:我的一个叫简簿的app里刚好用了这个,好巧~
  • t_fancy:楼主你好!我在用ratreeview遇到点问题你能帮我解决下吗?我是西安人,看到你写的这个就看进来了。我的QQ:181708546,希望你能联系我!
  • ALittleNasty:楼主是西安人吗?
    ALittleNasty:@赛赛_lzx 我也是,可以加好友吗?互相学习
    赛赛_lzx:@ALittleNasty 你舎对咧~

本文标题:iOS树状视图(折叠单元格)详细使用

本文链接:https://www.haomeiwen.com/subject/fnetdttx.html