UI之tableview（树状视图，多层次折叠模式）

前言

在iOS开发技术群里看到，一哥们求助树状图怎么做，并附带一张图片。一看到这效果图，第一反应是这不是网页形式UI吗？产品是SB？当层次过多，手机显示不下怎么办？好了，发牢骚到此结束。该实现的还是要去实现的，毕竟我们只是码奴而不是狗产品。
先上一张实现的简单效果图：

Simulator Screen Shot 2018年1月22日 下午4.16.28.png

实现思路

1.在UITableView基础上进行封装，组数为1，先展示根视图；
2.难点：数据处理，怎么进行展开和收缩。
3.展开处理：点击cell，判断有无子视图，有：获取子视图数据，插入到点击cell所在row的位置后面，更新数据源。插入方法insertRowsAtIndexPaths。无：则不作处理。
4.收缩：点击cell，判断该节点是否已经展开，如果以展开，遍历该节点下的所有子视图，获取所有已展开的数据，在原数据中删除获取的数据。并调用deleteRowsAtIndexPaths方法。

代码实现

先看一下数据格式：

89F5D153-0E1B-4E50-A157-5A7D55FA64A3.png

模型代码
.h文件

@interface Menu : NSObject

//标题
@property (nonatomic, copy) NSString *type;

//子层次的数据
@property (nonatomic, copy) NSArray *subType;

//有无展开
@property (nonatomic, assign) BOOL isOpen;

//层次级别
@property (nonatomic, assign) NSInteger level;

+ (id)menuWithDict:(NSDictionary *)dict;

.m文件

@implementation Menu

+ (id)menuWithDict:(NSDictionary *)dict {
    return [[self alloc] initWithDict:dict];
}

- (id)initWithDict:(NSDictionary *)dict {
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

cell视图

#import 
@class Menu;

@interface MenuCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIButton *selectBtn;

- (void)refreshUI:(Menu *)menu;

@end

#import "MenuCell.h"
#import "Menu.h"

@interface MenuCell ()

@property (weak, nonatomic) IBOutlet UILabel *type;
//距离左边间距
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftWidth;

@end

@implementation MenuCell

- (void)refreshUI:(Menu *)menu {
    self.type.text = menu.type;
    if (menu.subType.count == 0) {
    //无子视图，隐藏左边图标
        self.selectBtn.hidden = YES;
    } else {
        self.selectBtn.hidden = NO;
    }
  //每个层次距离左边的间距
    self.leftWidth.constant = menu.level * 20 + 8;
}

VC

#import "MenuTableViewController.h"
#import "MenuCell.h"
#import "Menu.h"

@interface MenuTableViewController () 
@property (weak, nonatomic) IBOutlet UITableView *menuTableView;
//数据源
@property (nonatomic, strong) NSMutableArray *dataSource;
//展开或者收缩 存储的indexpath
@property (nonatomic, strong) NSMutableArray *deleteOrInsertArray;

@end

@implementation MenuTableViewController

//懒加载数据源
- (NSMutableArray *)dataSource {
    if (!_dataSource) {
        _dataSource = [NSMutableArray new];
        NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Property List" ofType:@"plist"]];
        for (NSDictionary *dict in array) {
            Menu *menu = [Menu menuWithDict:dict];
            menu.level = 0;
            [_dataSource addObject:menu];
        }
    }
    return _dataSource;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.deleteOrInsertArray = [NSMutableArray array];
}

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

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MenuCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MenuCell"];
    [cell refreshUI:self.dataSource[indexPath.row]];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    Menu *menu = self.dataSource[indexPath.row];
    if (menu.subType.count == 0) {
        return;
    } else {
        [self.deleteOrInsertArray removeAllObjects];
        if (menu.isOpen) {
            //收缩操作
            [self deleteRows:menu Row:indexPath.row];
            NSMutableIndexSet *set = [NSMutableIndexSet indexSet];
            for (int i = 0; i < self.deleteOrInsertArray.count; i ++) {
                NSIndexPath *path = self.deleteOrInsertArray[i];
                [set addIndex:path.row];
            }
            [self.dataSource removeObjectsAtIndexes:set];
            [self.menuTableView deleteRowsAtIndexPaths:self.deleteOrInsertArray withRowAnimation:UITableViewRowAnimationNone];
        } else {
            //展开操作
            for (int i = 0 ; i < menu.subType.count; i ++) {
                Menu *model = [Menu menuWithDict:menu.subType[i]];
                model.level = menu.level + 1;
                [self.dataSource insertObject:model atIndex:indexPath.row + i + 1];
                [self.deleteOrInsertArray addObject:[NSIndexPath indexPathForRow:indexPath.row + i + 1 inSection:0]];
                NSLog(@"%@---%ld",model.type,model.level);
            }
            [self.menuTableView insertRowsAtIndexPaths:self.deleteOrInsertArray withRowAnimation:UITableViewRowAnimationNone];
        }
    }
    menu.isOpen = !menu.isOpen;
    MenuCell *cell = (MenuCell *)[tableView cellForRowAtIndexPath:indexPath];
    cell.selectBtn.selected = menu.isOpen;
}

- (void)deleteRows:(Menu *)menu Row:(NSInteger)row {
    for (int i = 0; i < menu.subType.count; i ++) {
        Menu *model = self.dataSource[row + 1 + i];
        NSIndexPath *path = [NSIndexPath indexPathForRow:row + i + 1 inSection:0];
        [self.deleteOrInsertArray addObject:path];
        if (model.subType > 0 && model.isOpen) {
            model.isOpen = NO;
            [self deleteRows:menu Row:row + menu.subType.count - 1];
        }
    }
}

所有代码都已贴出。