tableView的二级联动效果
2016-06-04 本文已影响1381人
4ed6afef78f9
- 在移动开发中,因为移动设备的特性,tableView是用的最多的一个控件,绝大部分的APP的功能都是上下滑动来操作,所以,tableView是移动开发中非常重要的一部分.
- 下面是我做的一个模仿美团,百度外卖等APP的菜单二级联动效果
111.gif
- 首先创建一个数组,数组中包含tableView中的要展示的数据信息
-(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"]},
];
}
- 使用三个方法,分别加载左右两侧的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的数据源方法中,设置tableView的行数,和cell信息
#pragma mark - 数据源方法
//左侧的返回一组,右侧的返回多组
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
if (tableView == self.leftTableview) {
return 1;
}else{
return _dataArray.count;
}
}
//返回两个tableView的行数
-(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];
}
}
//设置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;
}
- 使用代理方法,计算行高,头部视图和底部视图的高度
左侧的tableView没有头部和底部视图,右侧的有,
#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;
}
}
- 设置右侧列表的头部视图的信息
-(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;
}
}
- 使用代理方法,右侧列表向下滚动的头部视图将要显示的时候,让左侧的列表跟着滚动到对应的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];
}
}
}
- 再点击左侧的列表中的某一行的时候,右侧的列表滚动到对应的组中
-(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];
}
}
做的不好,大牛不要嘲笑,如有可优化或错误的地方,欢迎指正.
下面是项目的github的链接,想了解的可以去看下 github:demo
