UITableView的聯(lián)動(dòng)效果在A(yíng)PP中最為常見(jiàn)，下來(lái)小編為大家簡(jiǎn)單介紹一下純代碼實(shí)現(xiàn)的方式严肪。
聯(lián)動(dòng)效果的實(shí)現(xiàn)主要分為兩大部分
點(diǎn)擊左側(cè)的cell，右側(cè)的tableView滾動(dòng)到對(duì)應(yīng)的位置
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
滾動(dòng)右側(cè)的tableView，左側(cè)的tableView滾動(dòng)到對(duì)應(yīng)的位置
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
聯(lián)動(dòng)效果的運(yùn)行效果圖
運(yùn)行結(jié)果圖.gif
具體的實(shí)現(xiàn)代碼
//
// ViewController.m
// TwoTableViewDemo
//
// Created by Joyce on 16/11/22.
// Copyright ? 2016年 Joyce. 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>
/** 左邊的tableView */
@property(nonatomic, weak)UITableView *leftTableView;
/** 右邊的tableView */
@property(nonatomic, weak)UITableView *rightTableView;
/** 左邊的tableView顯示的內(nèi)容 */
@property(nonatomic, strong)NSArray *_leftArray;
/** 右邊的tableView顯示的內(nèi)容 */
@property(nonatomic, strong)NSArray *_rightArray;
@end
@implementation ViewController {
/** 左邊的tableView顯示的內(nèi)容 */
NSArray *_leftArray;
/** 右邊的tableView顯示的內(nèi)容 */
NSArray *_rightArray;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.leftTableView];
[self.view addSubview:self.rightTableView];
_leftArray = [[NSArray alloc] initWithObjects:@"第一類(lèi)",@"第二類(lèi)",@"第三類(lèi)",@"第四類(lèi)",@"第五類(lèi)",@"第六類(lèi)",@"第七類(lèi)",@"第八類(lèi)", nil];
_rightArray = [[NSArray alloc] initWithObjects:@"一",@"二",@"三",@"四",@"五",@"六", nil];
}
#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];
}
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];
}
return _rightTableView;
}
#pragma mark ------------------
#pragma mark - 數(shù)據(jù)源方法
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if (tableView == self.leftTableView) {
// return _leftArray.count;
return 40;
}
return _rightArray.count;
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
if (tableView == self.leftTableView) {
return 1;
}
// return _rightArray.count;
return 40;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell;
// 左邊的cell
if (tableView == self.leftTableView) {
cell = [tableView dequeueReusableCellWithIdentifier:leftCellIdentifier forIndexPath:indexPath];
cell.textLabel.text = [NSString stringWithFormat:@"%ld", indexPath.row];
// cell.textLabel.text = [_leftArray objectAtIndex:indexPath.row];
} else {
// 右邊的cell
cell = [tableView dequeueReusableCellWithIdentifier:rightCellIdentifier forIndexPath:indexPath];
cell.textLabel.text = [NSString stringWithFormat:@"第%ld組-第%ld行", indexPath.section, indexPath.row];
// cell.textLabel.text = [_rightArray objectAtIndex:indexPath.row];
}
return cell;
}
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
if (tableView == self.rightTableView) {
return [NSString stringWithFormat:@"第%ld組", section];
// return [_leftArray objectAtIndex:section];
}
return nil;
}
#pragma mark ------------------
#pragma mark - 代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 如果是 左側(cè)的 tableView 直接return
if (scrollView == self.leftTableView) return;
// 取出顯示在 視圖 且最靠上 的 cell 的 indexPath
NSIndexPath *topHeaderViewIndexpath = [[self.rightTableView indexPathsForVisibleRows] firstObject];
// 左側(cè) talbelView 移動(dòng)的 indexPath
NSIndexPath *moveToIndexpath = [NSIndexPath indexPathForRow:topHeaderViewIndexpath.section inSection:0];
// 移動(dòng) 左側(cè) tableView 到 指定 indexPath 居中顯示
[self.leftTableView selectRowAtIndexPath:moveToIndexpath animated:YES scrollPosition:UITableViewScrollPositionMiddle];
}
//MARK: - 點(diǎn)擊 cell 的代理方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// 選中 左側(cè) 的 tableView
if (tableView == self.leftTableView) {
NSIndexPath *moveToIndexPath = [NSIndexPath indexPathForRow:0 inSection:indexPath.row];
// 將右側(cè) tableView 移動(dòng)到指定位置
[self.rightTableView selectRowAtIndexPath:moveToIndexPath animated:YES scrollPosition:UITableViewScrollPositionTop];
// 取消選中效果
[self.rightTableView deselectRowAtIndexPath:moveToIndexPath animated:YES];
}
}
@end
結(jié)束語(yǔ)
功能還不是很完善匪补，大家有興趣可以親自動(dòng)手實(shí)現(xiàn)一下佑钾，有storyboard方式實(shí)現(xiàn)的歡迎和大家分享西疤。
