UIScrollView嵌套UItableView 實現流暢滑動體驗

因為最近工作項目中需要用到UIScrollView嵌套UItableView嵌套交互問題，順便網上搜了下的demo，發現實現的效果並不是很理想，滑動偶爾會有延遲現象，所以自己想了個辦法，順便把自己實現寫了個demo分享出來，當然有更好的實現歡迎留言。

實現過程，最底部放置的為一個UIScrollView，設置ScrollView的contentSize屬性，使可以發生橫向滾動，同時隱藏橫向滾動條，設置代理為當前控制器本身。然后，在最底部的UIScrollView上放置2個UITableView,因為只有2個所以沒有考慮重用問題，如果數量大於3個建議寫下UIScrollView子視圖的重用。最后在最上面覆蓋一個topView，使得它可以和tableView發生縱向滾動，為了實現最上面的topView可以隨着tableView發生一起滾動，需要在tableView的scrollViewDidScroll代理方法中獲取tableview的contentOffset偏移量，隨便改變topView的frame。

當手勢點開始落在從topView上時候，在controller的loadView方法中設置自定義view，通過在自定義view中重載hittest方法，判斷是否需要讓tableView進行交互。此時需要注意的是因為有自定義的左右選擇segmentControl，這么設置的時候segmentController是不會相應點擊方法的。為了讓segmentController可以實現隨着tableView滾動並且可以相應單擊事件，我在在controller的view上添加了單擊手勢，判定是否點擊在了自定義的segmentControll上(因為tableView本身不會相應- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event事件，所以也可以自定義一個tableVuew,重載touchBegin 等方法，然后把tableView繼承自這個tableView， 這樣就可以相應相應的touchbegin等方法了)， 好了，下面直接上代碼

controller中代碼如下：

#pragma mark - 底部的scrollViuew的代理方法scrollViewDidScroll

 
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat placeholderOffset = 0;
    if (self.topView.getSelectedItemIndex == 0) {

        if (self.firstTableView.contentOffset.y > self.topView.height - kItemheight) {
            placeholderOffset = self.topView.height - kItemheight;
        }
         else {
            placeholderOffset = self.firstTableView.contentOffset.y;
        }
        [self.secondTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }
     else {

        if (self.secondTableView.contentOffset.y > self.topView.height - kItemheight {
            placeholderOffset = self.topView.height - kItemheight;
        }
         else {
            placeholderOffset = self.secondTableView.contentOffset.y;
        }

        [self.firstTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }
}


 

#pragma mark - 底部的scrollViuew的代理方法scrollViewDidEndDecelerating

 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{    

    NSInteger index = ceilf(scrollView.contentOffset.x / kScreen_Width);
    self.topView.selectedItemIndex = index;
}



controller的view中部分代碼如下 

#pragma mark - 重載系統的hitTest方法

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    ViewController *currentVC = (ViewController *)self.nextResponder;
    currentVC.printPoint = point;

    if ([self.topView pointInside:point withEvent:event]) {

        self.scrollView.scrollEnabled = NO;

        if (self.scrollView.contentOffset.x < kScreen_Width *0.5) {
            return self.firstTableView;
        }
         else {
            return self.secondTableView;
        }
    }
     else {
        self.scrollView.scrollEnabled = YES;
        return [super hitTest:point withEvent:event];
    }
}

 

 

#pragma mark - 添加手勢的相應方法

- (void)tapGestureAction:(UITapGestureRecognizer *)gesture
{
    CGPoint point = [gesture locationInView:self.topView];

    if (CGRectContainsPoint(self.topView.leftBtnFrame, point)) {
        if (self.scrollView.contentOffset.x > 0.5 * kScreen_Width) {
            [self.scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
            self.topView.selectedItemIndex = 0;
        }
    }
     else if (CGRectContainsPoint(self.topView.rightBtnFrame, point)) {

        if (self.scrollView.contentOffset.x < 0.5 * kScreen_Width) {
            [self.scrollView setContentOffset:CGPointMake(kScreen_Width, 0) animated:NO];
            self.topView.selectedItemIndex = 1;
        }
    }
}



firstTableView中部分代碼如下

#pragma mark - firstTableView的代理方法scrollViewDidScroll

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat placeHolderHeight = self.topView.height - self.topView.itemHeight;

    CGFloat offsetY = scrollView.contentOffset.y;

    if (offsetY >= 0 && offsetY <= placeHolderHeight) {
        self.topView.y = -offsetY;
    }
    else if (offsetY > placeHolderHeight) {
        self.topView.y = - placeHolderHeight;
    }
    else if (offsetY <0) {
        self.topView.y =  - offsetY;
    }
}



secondTableView中部分代碼如下

#pragma mark - secondTableView的代理方法scrollViewDidScroll

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat placeHolderHeight = self.topView.height - self.topView.itemHeight;

    CGFloat offsetY = scrollView.contentOffset.y;

    if (offsetY >= 0 && offsetY <= placeHolderHeight) {
        self.topView.y = -offsetY;
    } 
    else if (offsetY > placeHolderHeight) {
        self.topView.y = - placeHolderHeight;
    } 
    else if (offsetY <0) {
        self.topView.y =  - offsetY;
    }
}
            

 

完整項目下載地址如下：https://github.com/maxzhang123/nestScrollView

轉載請注明 出處，謝謝