iOS-纵向横向双向滑动的TableView的实现

需求

项目中需要用到如下的「横向」和「纵向」双向滚动的表格功能，在这里分享下实现方式。

multiScroll.gif

UI 图层

UI 图层由6个控件组成，分别是：

1. 左边头部视图
2. 左边tableView
3. 右边scrollView
4. 右边容器视图
5. 右边头部视图
6. 右边tableView

UI 层级.png

按照上面思路进行 UI 布局，需要注意的是右边 scrollView 的布局需要保证添加在其中的 tableView 能够左右滚动。

双向滚动

双向滚动的功能实现其实很简单，通过 scrollView 的代理，tableView 滑动的时候，相应改变 tableView 的 contentOffset.

上下滚动左边的 tableView 的时候，右边 tableView 保持 x 轴方向不变，根据左边 tableView 的 y 轴的 contentOffset，改变其 y 轴方向的 contentOffset，上下滚动右边的 tableView 也是同理，而右边 tableView 左右滚动是通过撑大 scrollView 的 contentSize 来实现的。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    if (scrollView.isDragging || scrollView.isTracking || scrollView.isDecelerating) {
        
        if (scrollView == _leftTableView) {
            
            [_rightTableView setContentOffset:CGPointMake(_rightTableView.contentOffset.x, _leftTableView.contentOffset.y)];
        }
        
        if (scrollView == _rightTableView) {
            
            [_leftTableView setContentOffset:CGPointMake(0, _rightTableView.contentOffset.y)];
        }
    }
}

demo

https://github.com/Li-Qu-Tech/MultiScrollTableView.git