实现类似美团的下拉分级式菜单

最近要实现如下的下拉式二级目录效果：



思路很简单，左右二级目录其实就是两个UITableView，点击左边cell实现右边table刷新。

关键代码如下：

初始化变量：
NSInteger _leftIndex;//关键变量，记录一级目录点击cell的index,用来生成二级目录

//初始化一二级目录tableview
-(void)initsubview{

//一级目录
_leftTableView = [UITableView new];
[_leftTableView setFrame:CGRectMake(0, 0, screenwith/5*2, self.frame.size.height)];
_leftTableView.tag = 10;
_leftTableView.delegate = self;
_leftTableView.dataSource =self;
_leftTableView.backgroundColor = [UIColor whiteColor];
[_leftTableView setTableFooterView:[[UIView alloc] initWithFrame:CGRectZero]];
[self addSubview:_leftTableView];

//二级目录
_rightTableView = [UITableView new];
[_rightTableView setFrame:CGRectMake(screenwith/5*2, 0, screenwith/5*3, self.frame.size.height)];
_rightTableView.tag = 20;
_rightTableView.delegate = self;
_rightTableView.dataSource =self;
_rightTableView.separatorStyle=UITableViewCellSelectionStyleNone;
_rightTableView.backgroundColor = [UIColor whiteColor];
[self addSubview:_rightTableView];
self.userInteractionEnabled=YES;

}

//获取目录数据 ，一层二层数据一次性获取 此处是本地获取 一般情况下是网络获取json数据
-(void)getData{

NSString *newPath=[NSString stringWithFormat:@"%@%@%@",[[NSBundle mainBundle]resourcePath],@"/",@"data"];

//根据文件路径读取数据
NSData *jdata = [[NSData alloc]initWithContentsOfFile:newPath];
// 格式化成json数据
NSDictionary* jsonObject = [NSJSONSerialization JSONObjectWithData:jdata options:kNilOptions error:nil];
NSArray* arr = (NSArray*)jsonObject[@"data"];
_leftArr = [CourseSeries mj_objectArrayWithKeyValuesArray:arr];
__weak typeof(self) weakself= self;
//刷新ui要回到主线程
dispatch_async(dispatch_get_main_queue(), ^{
[weakself.leftTableView reloadData];
});
}

//一级二级菜单cell数目
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
if(tableView.tag == 10){
return [_leftArr count];
}else {

if(_leftArr.count==0){
return 0;
}
//根据_leftIndex获取二级菜单数据
CourseSeries *serie = _leftArr[_leftIndex];
//二级菜单数目
return [serie.list count];
}
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 42;
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
if(tableView.tag==10){
//一级目录cell实现
return cell;
}else {

//二级目录cell实现 ，注意二级目录的实现要通过全局变量_leftIndex获取初始化数据
CourseSeries *cs = _leftArr[_leftIndex];
//cell具体赋值
return cell;
}
}

//点击一级二级目录的操作
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
if(tableView.tag == 10){
//注意全局变量_leftIndex的取值
_leftIndex = indexPath.row;
//根据_leftIndex刷新二级目录
[_rightTableView reloadData];

}else {
_rightIndex = indexPath.row;
//根据_leftIndex获得当前二级目录数据
CourseSeries* sr = _leftArr[_leftIndex];
//再根据indexPath定位当前电机的二级目录具体cell
NSArray* arr = [courseTypeMJ mj_objectArrayWithKeyValuesArray:sr.list];
courseTypeMJ* ct = arr[indexPath.row];
//点击二级目录cell的具体操作

}

}

最终实现效果如下：



具体实现效果还要加上遮盖层，可参见上传的demo。

实现效果比较简陋，但是大体效果就是这样。

demo下载：https://github.com/tyrantkemp/XZMenu.git