前言
在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 <UIKit/UIKit.h>
@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 () <UITableViewDelegate,UITableViewDataSource>
@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];
}
}
}
所有代码都已贴出。
