需求

項目中需要用到如下的「橫向」和「縱向」雙向滾動的表格功能，在這里分享下實(shí)現(xiàn)方式。

multiScroll.gif

UI 圖層

UI 圖層由6個控件組成，分別是：

1. 左邊頭部視圖
2. 左邊tableView
3. 右邊scrollView
4. 右邊容器視圖
5. 右邊頭部視圖
6. 右邊tableView

UI 層級.png

按照上面思路進(jìn)行 UI 布局，需要注意的是右邊 scrollView 的布局需要保證添加在其中的 tableView 能夠左右滾動。

雙向滾動

雙向滾動的功能實(shí)現(xiàn)其實(shí)很簡單，通過 scrollView 的代理，tableView 滑動的時候，相應(yīng)改變 tableView 的 contentOffset.

上下滾動左邊的 tableView 的時候，右邊 tableView 保持 x 軸方向不變，根據(jù)左邊 tableView 的 y 軸的 contentOffset，改變其 y 軸方向的 contentOffset，上下滾動右邊的 tableView 也是同理，而右邊 tableView 左右滾動是通過撐大 scrollView 的 contentSize 來實(shí)現(xiàn)的。

- (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