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

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

思路很简单，左右二级目录其实就是两个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定位当前电机的二级目录具体cellNSArray* arr = [courseTypeMJ mj_objectArrayWithKeyValuesArray:sr.list];courseTypeMJ* ct = arr[indexPath.row];//点击二级目录cell的具体操作}}

最终实现效果如下：

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

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

demo下载：/tyrantkemp/XZMenu.git