1. 程式人生 > >iOS RATreeView的簡單使用(樹狀列表)

iOS RATreeView的簡單使用(樹狀列表)

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.基本能用到的方法 我都寫了註釋,如有錯誤請指出.是不是比官方的清楚的多.