iOS開發UI篇--一個可擴展性極強的樹形控件

1、簡介

樹形控件在多列列表、多級菜單中使用比較常見，好比：國家-省份-城市 多級選擇、學校-專業-班級 多級選擇等等。然而IOS自帶控件中並不存在樹形控件，咱們要在IOS開發中使用樹形控件，一般須要本身擴展UITableView列表控件。
如今在這裏開源一個本身寫的高擴展性，高複用性的IOS樹形結構控件。
支持無限極樹形結構。
使用的是非遞歸方式。
代碼簡單易懂，擴展方便。
圖片演示以下：

2、使用說明

第一步：創建數據模型

parentId ： 該節點的父控件id號，若是爲-1則表示該節點爲根節點
nodeId ： 每一個節點自身的id號，是每一個節點的惟一標示
name ： 節點的名稱
depth ： 該節點所帶的樹形結構中的深度，根節點的深度爲0
expand ： 該節點是否處於展開狀態

/**
*  每一個節點類型
*/
@interface Node : NSObject

@property (nonatomic , assign) int parentId;//父節點的id，若是爲-1表示該節點爲根節點

@property (nonatomic , assign) int nodeId;//本節點的id

@property (nonatomic , strong) NSString *name;//本節點的名稱

@property (nonatomic , assign) int depth;//該節點的深度

@property (nonatomic , assign) BOOL expand;//該節點是否處於展開狀態

/**
*快速實例化該對象模型
*/
- (instancetype)initWithParentId : (int)parentId nodeId : (int)nodeId name : (NSString *)name depth : (int)depth expand : (BOOL)expand;

@end

第二步：按照以上的數據模型，組裝數據，下面以 國家-身份-城市 的三級目錄進行演示。

//----------------------------------中國的省地市關係圖3,2,1--------------------------------------------
Node *country1 = [[Node alloc] initWithParentId:-1 nodeId:0 name:@"中國" depth:0 expand:YES];
Node *province1 = [[Node alloc] initWithParentId:0 nodeId:1 name:@"江蘇" depth:1 expand:NO];
Node *city1 = [[Node alloc] initWithParentId:1 nodeId:2 name:@"南通" depth:2 expand:NO];
Node *city2 = [[Node alloc] initWithParentId:1 nodeId:3 name:@"南京" depth:2 expand:NO];
Node *city3 = [[Node alloc] initWithParentId:1 nodeId:4 name:@"蘇州" depth:2 expand:NO];
Node *province2 = [[Node alloc] initWithParentId:0 nodeId:5 name:@"廣東" depth:1 expand:NO];
Node *city4 = [[Node alloc] initWithParentId:5 nodeId:6 name:@"深圳" depth:2 expand:NO];
Node *city5 = [[Node alloc] initWithParentId:5 nodeId:7 name:@"廣州" depth:2 expand:NO];
Node *province3 = [[Node alloc] initWithParentId:0 nodeId:8 name:@"浙江" depth:1 expand:NO];
Node *city6 = [[Node alloc] initWithParentId:8 nodeId:9 name:@"杭州" depth:2 expand:NO];
//----------------------------------美國的省地市關係圖0,1,2--------------------------------------------
Node *country2 = [[Node alloc] initWithParentId:-1 nodeId:10 name:@"美國" depth:0 expand:YES];
Node *province4 = [[Node alloc] initWithParentId:10 nodeId:11 name:@"紐約州" depth:1 expand:NO];
Node *province5 = [[Node alloc] initWithParentId:10 nodeId:12 name:@"德州" depth:1 expand:NO];
Node *city7 = [[Node alloc] initWithParentId:12 nodeId:13 name:@"休斯頓" depth:2 expand:NO];
Node *province6 = [[Node alloc] initWithParentId:10 nodeId:14 name:@"加州" depth:1 expand:NO];
Node *city8 = [[Node alloc] initWithParentId:14 nodeId:15 name:@"洛杉磯" depth:2 expand:NO];
Node *city9 = [[Node alloc] initWithParentId:14 nodeId:16 name:@"舊金山" depth:2 expand:NO];

//----------------------------------日本的省地市關係圖0,1,2--------------------------------------------
Node *country3 = [[Node alloc] initWithParentId:-1 nodeId:17 name:@"日本" depth:0 expand:YES];
NSArray *data = [NSArray arrayWithObjects:country1,province1,city1,city2,city3,province2,city4,city5,province3,city6,country2,province4,province5,city7,province6,city8,city9,country3, nil];

第三步：使用以上數據進行TeeTableView的初始化。

1.TreeTableView *tableview = [[TreeTableView alloc] initWithFrame:CGRectMake(0, 20, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)-20) withData:data];
[self.view addSubview:tableview];

經過簡單以上三步，你就能夠把該樹形控件集成到你的項目中。

3、實現原理

樹形結構的列表用的其實就是UITableView控件，可是如何可以讓UItableView可以動態的增長和刪除指定的行數的cell是實現樹形結構的關鍵所在。
這時候咱們須要用到兩個UItableView自帶的行數：

- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;
- (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

第一個函數用來在指定的位置插入cells，第二個函數用來在指定的位置刪除cells，而且這二個函數都自帶多種動畫效果，讓刪除和插入的過程不至於太突兀、有種漸變的感受，具備良好的用戶體驗。
對於這幾個動畫作了嘗試：
UITableViewRowAnimationFade ： 漸變效果
UITableViewRowAnimationRight ： 右邊進入，右邊消失
UITableViewRowAnimationLeft ： 左邊進入，左邊消失
UITableViewRowAnimationTop ： 頂部進入，頂部消失
UITableViewRowAnimationBottom ： 頂部進入，底部消失

注意點：

在調用insertRowsAtIndexPaths和deleteRowsAtIndexPaths的時候必定要先改變數據源，在調用上述函數，否則會產生crash。

接下來把TreeTableView的主要代碼展現出來，由於原本代碼量就不大，並且代碼中註釋也比較全，但願可以幫助你們理解。

#import "TreeTableView.h"
#import "Node.h"

@interface TreeTableView ()<UITableViewDataSource,UITableViewDelegate>

@property (nonatomic , strong) NSArray *data;//傳遞過來已經組織好的數據（全量數據）

@property (nonatomic , strong) NSMutableArray *tempData;//用於存儲數據源（部分數據）


@end

@implementation TreeTableView

-(instancetype)initWithFrame:(CGRect)frame withData : (NSArray *)data{
    self = [super initWithFrame:frame style:UITableViewStyleGrouped];
    if (self) {
        self.dataSource = self;
        self.delegate = self;
        _data = data;
        _tempData = [self createTempData:data];
    }
    return self;
}

/**
 * 初始化數據源
 */
-(NSMutableArray *)createTempData : (NSArray *)data{
    NSMutableArray *tempArray = [NSMutableArray array];
    for (int i=0; i<data.count; i++) {
        Node *node = [_data objectAtIndex:i];
        if (node.expand) {
            [tempArray addObject:node];
        }
    }
    return tempArray;
}


#pragma mark - UITableViewDataSource

#pragma mark - Required

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return _tempData.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *NODE_CELL_ID = @"node_cell_id";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NODE_CELL_ID];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:NODE_CELL_ID];
    }

    Node *node = [_tempData objectAtIndex:indexPath.row];

    NSMutableString *name = [NSMutableString string];
    for (int i=0; i<node.depth; i++) {
        [name appendString:@"     "];
    }
    [name appendString:node.name];

    cell.textLabel.text = name;

    return cell;
}


#pragma mark - Optional
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 0.01;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 40;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 0.01;
}

#pragma mark - UITableViewDelegate

#pragma mark - Optional
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    //先修改數據源
    Node *parentNode = [_tempData objectAtIndex:indexPath.row];
    NSUInteger startPosition = indexPath.row+1;
    NSUInteger endPosition = startPosition;
    BOOL expand = NO;
    for (int i=0; i<_data.count; i++) {
        Node *node = [_data objectAtIndex:i];
        if (node.parentId == parentNode.nodeId) {
            node.expand = !node.expand;
            if (node.expand) {
                [_tempData insertObject:node atIndex:endPosition];
                expand = YES;
            }else{
                expand = NO;
                endPosition = [self removeAllNodesAtParentNode:parentNode];
                break;
            }
            endPosition++;
        }
    }

    //得到須要修正的indexPath
    NSMutableArray *indexPathArray = [NSMutableArray array];
    for (NSUInteger i=startPosition; i<endPosition; i++) {
        NSIndexPath *tempIndexPath = [NSIndexPath indexPathForRow:i inSection:0];
        [indexPathArray addObject:tempIndexPath];
    }

    //插入或者刪除相關節點
    if (expand) {
        [self insertRowsAtIndexPaths:indexPathArray withRowAnimation:UITableViewRowAnimationNone];
    }else{
        [self deleteRowsAtIndexPaths:indexPathArray withRowAnimation:UITableViewRowAnimationNone];
    }
}

/**
 *  刪除該父節點下的全部子節點（包括孫子節點）
 *
 *  @param parentNode 父節點
 *
 *  @return 鄰接父節點的位置距離該父節點的長度，也就是該父節點下面全部的子孫節點的數量
 */
-(NSUInteger)removeAllNodesAtParentNode : (Node *)parentNode{
    NSUInteger startPosition = [_tempData indexOfObject:parentNode];
    NSUInteger endPosition = startPosition;
    for (NSUInteger i=startPosition+1; i<_tempData.count; i++) {
        Node *node = [_tempData objectAtIndex:i];
        endPosition++;
        if (node.depth == parentNode.depth) {
            break;
        }
        node.expand = NO;
    }
    if (endPosition>startPosition) {
        [_tempData removeObjectsInRange:NSMakeRange(startPosition+1, endPosition-startPosition-1)];
    }
    return endPosition;
}

4、總結

在演示項目中，每一個cell我都使用系統自帶的cell，樣式比較簡單，若是你要展示更加漂亮的樣式，能夠自定義cell。
同時，你也能夠擴展該數據模型，運動到更加複雜的業務處理中。好比如下場景：

5、下載地址

Demo下載地址：羣文件自行下載，無論你是小白仍是大牛熱烈歡迎進羣 ，分享面試經驗，討論技術， 你們一塊兒交流學習成長！但願幫助開發者少走彎路。——點擊：加入

若是以爲對你還有些用，就關注小編+喜歡這一篇文章。你的支持是我繼續的動力。

下篇文章預告：iOS開發UI篇--一個支持圖文混排的ActionSheet

文章來源於網絡，若有侵權，請聯繫小編刪除。