• 在移動開發(fā)中,因為移動設(shè)備的特性,tableView是用的最多的一個控件,絕大部分的APP的功能都是上下滑動來操作,所以,tableView是移動開發(fā)中非常重要的一部分.
• 下面是我做的一個模仿美團,百度外賣等APP的菜單二級聯(lián)動效果

111.gif

• 首先創(chuàng)建一個數(shù)組,數(shù)組中包含tableView中的要展示的數(shù)據(jù)信息

-(void)loadData{
    _dataArray = @[@{@"title":@"第一組",@"list":@[@"1",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第二組",@"list":@[@"2",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第三組",@"list":@[@"3",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第四組",@"list":@[@"4",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第五組",@"list":@[@"5",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第六組",@"list":@[@"6",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第七組",@"list":@[@"7",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第八組",@"list":@[@"8",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第九組",@"list":@[@"9",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第十組",@"list":@[@"10",@"one",@"two",@"three",@"foue",@"five"]},
                   @{@"title":@"第十一",@"list":@[@"11",@"one",@"two",@"three",@"foue",@"five"]},
                   ];
}

• 使用三個方法,分別加載左右兩側(cè)的tableView和中間的分割線

-(UITableView *)leftTableview
{
    if (nil == _leftTableview) {
        _leftTableview = [[UITableView alloc]initWithFrame:CGRectMake(0, 0,100, self.view.frame.size.height)];
        _leftTableview.backgroundColor = [UIColor whiteColor];
        _leftTableview.delegate = self;
        _leftTableview.dataSource = self;
        [self.view addSubview:_leftTableview];
    }
    return _leftTableview;
}

-(UITableView *)rightTableview{
    if (nil == _rightTableview) {
        _rightTableview = [[UITableView alloc]initWithFrame:CGRectMake(100, 0, self.view.frame.size.width - 100, self.view.frame.size.height)];
        _rightTableview.backgroundColor = [UIColor whiteColor];
        _rightTableview.delegate = self;
        _rightTableview.dataSource = self;
        [self.view addSubview:_rightTableview];
    }
    return _rightTableview;
}

-(UIView *)lineView{
    if (nil == _lineView) {
        _lineView = [[UIView alloc]initWithFrame:CGRectMake(100, 0, 0.5, self.view.frame.size.height)];
        _lineView.backgroundColor = [UIColor blackColor];
        [self.view addSubview:_lineView];
    }
    return _lineView;
}

• 在tableview的數(shù)據(jù)源方法中,設(shè)置tableView的行數(shù),和cell信息

#pragma mark - 數(shù)據(jù)源方法
//左側(cè)的返回一組,右側(cè)的返回多組
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    if (tableView == self.leftTableview) {
        return 1;
    }else{
        return _dataArray.count;
    }
}

//返回兩個tableView的行數(shù)
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSDictionary *item = [_dataArray objectAtIndex:section];
    if (tableView == self.leftTableview) {
        return _dataArray.count;
    }else{
        return [[item objectForKey:@"list"]count];
    }
}

//設(shè)置cell的frame和cell上的信息
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellIndentifier = @"cell";
    
    [tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:cellIndentifier];
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
    
    if (tableView == self.leftTableview) {
        UIView *selectedBackGroundView = [[UIView alloc]initWithFrame:cell.frame];
        
        selectedBackGroundView.backgroundColor = RGBACOLOR(217, 217, 217, 0.5);
        cell.selectedBackgroundView = selectedBackGroundView;
        
        UIView *line = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 5,80)];
        line.backgroundColor = [UIColor orangeColor];
        
        [selectedBackGroundView addSubview:line];
        
        cell.textLabel.text = [_dataArray[indexPath.row]objectForKey:@"title"];
    }else{
        NSDictionary *item = [_dataArray objectAtIndex:indexPath.section];
        cell.textLabel.text = [item objectForKey:@"list"][indexPath.row];
    }
    return cell;
}

• 使用代理方法,計算行高,頭部視圖和底部視圖的高度
  左側(cè)的tableView沒有頭部和底部視圖,右側(cè)的有,

#pragma mark - 代理方法

//行高
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.leftTableview) {
        return 80;
    }else{
        return 130;
    }
}

//頭部高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    if (tableView == self.leftTableview) {
        return 0;
    }else{
        return 30;
    }
}

//底部視圖高度
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    if (tableView == self.leftTableview) {
        return 0;
    }else{
        return CGFLOAT_MIN;
    }
}

• 設(shè)置右側(cè)列表的頭部視圖的信息

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    if (tableView == self.rightTableview) {
        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 30)];
        view.backgroundColor = RGBACOLOR(217, 217, 217, 0.7);
        UILabel *label = [[UILabel alloc]initWithFrame:view.bounds];
        NSDictionary *item = [_dataArray objectAtIndex:section];
        NSString *title = [item objectForKey:@"title"];
        label.text = [NSString stringWithFormat:@"    %@",title];
        [view addSubview:label];
        return view;
    }else{
        return nil;
    }
}

• 使用代理方法,右側(cè)列表向下滾動的頭部視圖將要顯示的時候,讓左側(cè)的列表跟著滾動到對應(yīng)的cell

-(void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section{
    if (_isRelate) {
        NSInteger topCellSection = [[[tableView indexPathsForVisibleRows]firstObject]section];
        
        if (tableView == self.rightTableview) {
            [self.leftTableview selectRowAtIndexPath:[NSIndexPath indexPathForItem:topCellSection inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
        }
    }
}

• 再點擊左側(cè)的列表中的某一行的時候,右側(cè)的列表滾動到對應(yīng)的組中

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView == self.leftTableview) {
        _isRelate = NO;
        [self.leftTableview selectRowAtIndexPath:indexPath animated:NO scrollPosition:UITableViewScrollPositionMiddle];
        
        [self.rightTableview scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];
    }else{
        [self.rightTableview deselectRowAtIndexPath:indexPath animated:NO];
    }
}

做的不好,大牛不要嘲笑,如有可優(yōu)化或錯誤的地方,歡迎指正.
下面是項目的github的鏈接,想了解的可以去看下 github:demo