1. 程式人生 > >實現類似美團的下拉分級式選單

實現類似美團的下拉分級式選單

最近要實現如下的下拉式二級目錄效果:
這裡寫圖片描述

思路很簡單,左右二級目錄其實就是兩個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。
實現效果比較簡陋,但是大體效果就是這樣。