IOS实现左右两个TableView联动效果
程序员文章站
2023-12-17 14:17:34
一、先来看看要实现的效果图
二、小解析,可以先看看后面的!
三、实现 tableview联动 主要分两种状况
&n...
一、先来看看要实现的效果图
二、小解析,可以先看看后面的!
三、实现 tableview联动 主要分两种状况
1、点击 左侧 cell 让右侧 tableview 滚到对应位置
2、滑动 右侧 tableview 让左侧 tableview 滚到对应位置
1.先实现简单的:点击 左侧 cell 让右侧 tableview 滚到对应位置
//mark: - 点击 cell 的代理方法 - (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath { // 判断是否为 左侧 的 tableview if (tableview == self.lefttableview) { // 计算出 右侧 tableview 将要 滚动的 位置 nsindexpath *movetoindexpath = [nsindexpath indexpathforrow:0 insection:indexpath.row]; // 将右侧 tableview 移动到指定位置 [self.righttableview selectrowatindexpath:movetoindexpath animated:yes scrollposition:uitableviewscrollpositiontop]; // 取消选中效果 [self.righttableview deselectrowatindexpath:movetoindexpath animated:yes]; } }
左侧 按钮点击的联动 搞定!
2.滑动 右侧 tableview 让左侧 tableview 滚到对应位置
[self.righttableview indexpathsforvisiblerows]
返回 所有显示在界面的 cell 的 indexpath
//mark: - 一个方法就能搞定 右边滑动时跟左边的联动 - (void)scrollviewdidscroll:(uiscrollview *)scrollview { // 如果是 左侧的 tableview 直接return if (scrollview == self.lefttableview) return; // 取出显示在 视图 且最靠上 的 cell 的 indexpath nsindexpath *topheaderviewindexpath = [[self.righttableview indexpathsforvisiblerows] firstobject]; // 左侧 talbelview 移动到的位置 indexpath nsindexpath *movetoindexpath = [nsindexpath indexpathforrow:topheaderviewindexpath.section insection:0]; // 移动 左侧 tableview 到 指定 indexpath 居中显示 [self.lefttableview selectrowatindexpath:movetoindexpath animated:yes scrollposition:uitableviewscrollpositionmiddle]; }
第二步 右侧 滑动 跟左侧 的联动 搞定! 对的 就是这么简单!!!
四、警告
看到别人通过这两个方法判断!!! 勿用!!!
会导致 tableview 的联动 不准确
#pragma mark - uitableviewdelegate 代理方法 - - (void)tableview:(uitableview *)tableview willdisplayheaderview:(uiview *)view forsection:(nsinteger)section { // // headerview 将要显示 // 这两个方法都不准确 } - (void)tableview:(uitableview *)tableview didenddisplayingheaderview:(uiview *)view forsection:(nsinteger)section { // // headerview 已经显示 // 这两个方法都不准确 }
五、以下是所有示例代码
// // viewcontroller.m // 左右双tableview联动 // // created by 阿酷 on 16/8/20. // copyright © 2016年 akuapp. all rights reserved. // #import "viewcontroller.h" #define lefttablewidth [uiscreen mainscreen].bounds.size.width * 0.3 #define righttablewidth [uiscreen mainscreen].bounds.size.width * 0.7 #define screenwidth [uiscreen mainscreen].bounds.size.width #define screenheight [uiscreen mainscreen].bounds.size.height #define leftcellidentifier @"leftcellidentifier" #define rightcellidentifier @"rightcellidentifier" @interface viewcontroller () <uitableviewdatasource, uitableviewdelegate> @property (nonatomic, weak) uitableview *lefttableview; @property (nonatomic, weak) uitableview *righttableview; @end @implementation viewcontroller - (void)viewdidload { [super viewdidload]; [self.view addsubview:self.lefttableview]; [self.view addsubview:self.righttableview]; } #pragma mark - tableview 数据源代理方法 - - (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section { if (tableview == self.lefttableview) return 40; return 8; } - (nsinteger)numberofsectionsintableview:(uitableview *)tableview { if (tableview == self.lefttableview) return 1; return 40; } - (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { uitableviewcell *cell; // 左边的 view if (tableview == self.lefttableview) { cell = [tableview dequeuereusablecellwithidentifier:leftcellidentifier forindexpath:indexpath]; cell.textlabel.text = [nsstring stringwithformat:@"%ld", indexpath.row]; // 右边的 view } else { cell = [tableview dequeuereusablecellwithidentifier:rightcellidentifier forindexpath:indexpath]; cell.textlabel.text = [nsstring stringwithformat:@"第%ld组-第%ld行", indexpath.section, indexpath.row]; } return cell; } - (nsstring *)tableview:(uitableview *)tableview titleforheaderinsection:(nsinteger)section { if (tableview == self.righttableview) return [nsstring stringwithformat:@"第 %ld 组", section]; return nil; } #pragma mark - uitableviewdelegate 代理方法 - //- (void)tableview:(uitableview *)tableview didenddisplayingheaderview:(uiview *)view forsection:(nsinteger)section { // // 这两个方法都不准确 //} // //- (void)tableview:(uitableview *)tableview willdisplayheaderview:(uiview *)view forsection:(nsinteger)section { // // 这两个方法都不准确 //} //mark: - 一个方法就能搞定 右边滑动时跟左边的联动 - (void)scrollviewdidscroll:(uiscrollview *)scrollview { // 如果是 左侧的 tableview 直接return if (scrollview == self.lefttableview) return; // 取出显示在 视图 且最靠上 的 cell 的 indexpath nsindexpath *topheaderviewindexpath = [[self.righttableview indexpathsforvisiblerows] firstobject]; // 左侧 talbelview 移动的 indexpath nsindexpath *movetoindexpath = [nsindexpath indexpathforrow:topheaderviewindexpath.section insection:0]; // 移动 左侧 tableview 到 指定 indexpath 居中显示 [self.lefttableview selectrowatindexpath:movetoindexpath animated:yes scrollposition:uitableviewscrollpositionmiddle]; } //mark: - 点击 cell 的代理方法 - (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath { // 选中 左侧 的 tableview if (tableview == self.lefttableview) { nsindexpath *movetoindexpath = [nsindexpath indexpathforrow:0 insection:indexpath.row]; // 将右侧 tableview 移动到指定位置 [self.righttableview selectrowatindexpath:movetoindexpath animated:yes scrollposition:uitableviewscrollpositiontop]; // 取消选中效果 [self.righttableview deselectrowatindexpath:movetoindexpath animated:yes]; } } #pragma mark - 懒加载 tableview - // mark: - 左边的 tableview - (uitableview *)lefttableview { if (!_lefttableview) { uitableview *tableview = [[uitableview alloc] initwithframe:cgrectmake(0, 0, lefttablewidth, screenheight)]; [self.view addsubview:tableview]; _lefttableview = tableview; tableview.datasource = self; tableview.delegate = self; [tableview registerclass:[uitableviewcell class] forcellreuseidentifier:leftcellidentifier]; tableview.backgroundcolor = [uicolor redcolor]; tableview.tablefooterview = [[uiview alloc] init]; } return _lefttableview; } // mark: - 右边的 tableview - (uitableview *)righttableview { if (!_righttableview) { uitableview *tableview = [[uitableview alloc] initwithframe:cgrectmake(lefttablewidth, 0, righttablewidth, screenheight)]; [self.view addsubview:tableview]; _righttableview = tableview; tableview.datasource = self; tableview.delegate = self; [tableview registerclass:[uitableviewcell class] forcellreuseidentifier:rightcellidentifier]; tableview.backgroundcolor = [uicolor cyancolor]; tableview.tablefooterview = [[uiview alloc] init]; } return _righttableview; } @end
六、总结
ios实现左右两个tableview联动效果的内容到这就结束了,这种的效果在我们平常的时候还是挺常见的,感兴趣的朋友们可以自己动手操作起来,希望对大家的学习工作能有所帮助。