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

原文出处：  朱凯奇   

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

---

• 首先先看下实现效果

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"   @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,你们按照你们的需求做

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"   @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
只展示核心代码

数据

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 {        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方法

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 ;        //当前层级      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