# 多列类似Excel的TableView

之前项目需要，做过类似篮球比赛技术统计的功能。大家都知道，每只队伍有10多个球员，技术统计会包括：姓名、得分、篮板、助攻、盖帽、2分投篮、3分投篮、罚球……大概效果就类似Excel要做的。但是手机屏幕宽度有限，所以左右滑动成了一个需求。同时，为了保证滑动过程中也能直接明了的对上号，所以第一列姓名理应保持不动。

• 首列固定
• 向左滑动查看更多列
• 上拉刷新、下拉加载更多

---

代码块

1、宏定义

#define SCREEN_WIDTH     ([[UIScreen mainScreen] bounds].size.width)#define SCREEN_HEIGHT    ([[UIScreen mainScreen] bounds].size.height)#define BPCOLOR(r,g,b)   [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]#define BackgroundColor  BPCOLOR(239, 239, 239)#define BPClearColor     [UIColor clearColor]#define BPWhiteColor     [UIColor whiteColor]#define BPRedColor       [UIColor redColor]#define kNavHeight       64#define kHeaderHeight    49#define kCellHeight      60

2、基本控件-属性

@interface ViewController ()<UIScrollViewDelegate,UITableViewDelegate,UITableViewDataSource>@property (nonatomic, strong) UIScrollView *scrollView;@property (nonatomic, strong) UITableView *leftTableView;@property (nonatomic, strong) UITableView *rightTableView;@property (nonatomic, strong) UIView *leftHeaderView;@property (nonatomic, strong) UIView *rightHeaderView;@property (nonatomic, strong) NSMutableArray *dataArr;@property (nonatomic, strong) NSMutableArray *tempArr;@property (nonatomic, assign) NSInteger pageNum;@end

3、viewDidLoad

self.title = @"TableView";    self.view.backgroundColor = BackgroundColor;    self.automaticallyAdjustsScrollViewInsets = NO;    /**     *  scrollView     */    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, kNavHeight, SCREEN_WIDTH, SCREEN_HEIGHT-kNavHeight)];    _scrollView.bounces = NO; // 反弹    _scrollView.backgroundColor = BPWhiteColor;    _scrollView.scrollEnabled = YES;    _scrollView.delegate = self;    [self.view addSubview:_scrollView];    /**     *  rightHeaderView     */    _rightHeaderView = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH / 3, 0, SCREEN_WIDTH , kHeaderHeight)];    _rightHeaderView.backgroundColor = BPWhiteColor;    UILabel *rightLabel1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH/3, kHeaderHeight)];    rightLabel1.text = @"Right1";    rightLabel1.textColor = BPRedColor;    rightLabel1.textAlignment = NSTextAlignmentCenter;    [_rightHeaderView addSubview:rightLabel1];    UILabel *rightLabel2 = [[UILabel alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/3, 0, SCREEN_WIDTH/3, kHeaderHeight)];    rightLabel2.text = @"Right2";    rightLabel2.textColor = BPRedColor;    rightLabel2.textAlignment = NSTextAlignmentCenter;    [_rightHeaderView addSubview:rightLabel2];    UILabel *rightLabel3 = [[UILabel alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/3 * 2, 0, SCREEN_WIDTH/3, kHeaderHeight)];    rightLabel3.text = @"Right3";    rightLabel3.textColor = BPRedColor;    rightLabel3.textAlignment = NSTextAlignmentCenter;    [_rightHeaderView addSubview:rightLabel3];    UIView *lineView1 = [[UIView alloc] initWithFrame:CGRectMake(0, kHeaderHeight-1, _rightHeaderView.width, 1)];    lineView1.backgroundColor = BPCOLOR(217, 217, 217);    [_rightHeaderView addSubview:lineView1];    /**     *  rightTableView     */    _rightTableView = [[UITableView alloc] initWithFrame:CGRectMake(_rightHeaderView.x, 0, _rightHeaderView.width, _scrollView.height) style:UITableViewStylePlain];    _rightTableView.delegate = self;    _rightTableView.dataSource = self;    _rightTableView.backgroundColor = BPClearColor;    _rightTableView.separatorStyle = UITableViewCellSeparatorStyleNone;    _rightTableView.showsVerticalScrollIndicator = NO;    [_scrollView addSubview:_rightTableView];    /**     *  leftHeaderView     */    _leftHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, kHeaderHeight)];    _leftHeaderView.backgroundColor = BPClearColor;    UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH / 3, kHeaderHeight)];    tempView.backgroundColor = BPWhiteColor;    [_leftHeaderView addSubview:tempView];    UILabel *leftLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 100, kHeaderHeight)];    leftLabel.text = @"Left";    leftLabel.textColor = BPRedColor;    [_leftHeaderView addSubview:leftLabel];    UIView *lineView2 = [[UIView alloc] initWithFrame:CGRectMake(0, kHeaderHeight-1, tempView.width, 1)];    lineView2.backgroundColor = BPCOLOR(217, 217, 217);    [tempView addSubview:lineView2];    /**     *  leftTableView     */    _leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, _scrollView.height) style:UITableViewStylePlain];    _leftTableView.delegate = self;    _leftTableView.dataSource = self;    _leftTableView.backgroundColor = BPClearColor;    _leftTableView.separatorStyle = UITableViewCellSeparatorStyleNone;    _leftTableView.showsVerticalScrollIndicator = NO;    [_scrollView addSubview:_leftTableView];    _scrollView.contentSize = CGSizeMake(SCREEN_WIDTH / 3 * 4, _scrollView.height);    [self setupRefresh];

4、刷新

- (void)setupRefresh{    self.leftTableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNew)];    self.leftTableView.mj_header.automaticallyChangeAlpha = YES;    [self.leftTableView.mj_header beginRefreshing];    self.leftTableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMore)];}

---

逻辑

1、底层为一个屏幕大小的UIScrollerView；
2、rightTableView 加到UIScrollerView之上，需要注意的是它的.X和width.（leftTableView上固定的第一列的宽度就是rightTableView的x, 右边总共列数X列宽）。
3、leftTableView。leftTableView的width=屏幕宽度。之所以后加它到UIScrollerView上且宽度为屏幕宽度，是因为我们的上拉下拉刷新控件都由它来处理。宽度为屏幕宽度，那么就会盖住rightTableView了吧？没关系，有个属性：backgroundColor， 把设置 leftTableView，以及leftTableView的cell的backgroundColor设置为ClearColor;那么rightTableView就不会被盖住啦。 当然，leftTableView左边还有一列。在leftTableView的cell上自定义一个一定宽度的UIView就可以啦。
4、然后就是给leftTableView添加上拉下拉的刷新控件了。直接用MJRefresh，简单粗暴！

5、最重要的地方 - UIScrollerView Delegate

// leftTableView与rightTableView 上下滚动同步- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    if (self.leftTableView == scrollView) {        [self.rightTableView setContentOffset:self.leftTableView.contentOffset];    } else if (self.rightTableView == scrollView) {        [self.leftTableView setContentOffset:self.rightTableView.contentOffset];    } else  if (self.rightScrollView == scrollView) {        CGFloat contentXoffset = scrollView.contentOffset.x;        self.leftTableView.x = contentXoffset;    }}

leftTableView和rightTableView上下滚动同步，同时左右滑动scrollView，leftTableView.x随着scrollView的偏移量改变而改变，致使看上去水平方向它始终固定不动。

整个来讲，其实是为了达到目的不折手段。也看到在其他ipad项目里有更加屌爆的效果，可是找不到更有用的源码。之所以如此折腾还要搞成透明不透明的，最重要的一个原因就是刷新控件。
第一次写这玩意，请包涵。