IOS实现左右两个TableView联动效果

一、先来看看要实现的效果图

二、小解析,可以先看看后面的!

三、实现 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联动效果的内容到这就结束了，这种的效果在我们平常的时候还是挺常见的，感兴趣的朋友们可以自己动手操作起来，希望对大家的学习工作能有所帮助。