實現類似美團的下拉分級式選單
阿新 • • 發佈:2019-02-16
最近要實現如下的下拉式二級目錄效果:
思路很簡單,左右二級目錄其實就是兩個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。
實現效果比較簡陋,但是大體效果就是這樣。