需求

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

multiScroll.gif

UI 圖層

UI 圖層由6個(gè)控件組成，分別是：

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

UI 層級(jí).png

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

雙向滾動(dòng)

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

上下滾動(dòng)左邊的 tableView 的時(shí)候，右邊 tableView 保持 x 軸方向不變，根據(jù)左邊 tableView 的 y 軸的 contentOffset，改變其 y 軸方向的 contentOffset，上下滾動(dòng)右邊的 tableView 也是同理，而右邊 tableView 左右滾動(dòng)是通過(guò)撐大 scrollView 的 contentSize 來(lái)實(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