iOS用GKPageScrollView实现多层分类嵌套滑动

项目介绍：

前言

最近项目增加新功能，遇到需要多层嵌套滑动的效果，于是利用自己之前写的一个库GKPageScrollView实现了下，但在实现过程中也遇到不少问题，最主要是手势冲突的问题，于是对库也进行了更新，下面来详细说说：

效果图

先来看下效果图，主要实现了下面的两种多层嵌套效果

1、GKPageScrollView + 分类 + 分类

2、分类 + GKPageScrollView + 分类

实现

1、GKPageScrollView + 分类 + 分类

这个实现起来比较简单，因为用的JXCategoryView本身就支持多层嵌套，只是需要把对应的listView传递到GKPageScrollView即可，主要代码如下：

// 通过JXCategoryViewDelegate获取当前子列表的scrollView
#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    switch (index) {
        case 0:
            self.currentListScrollView = self.compListView.tableView;
            break;
        case 1:
            self.currentListScrollView = self.saleListView.tableView;
            break;
        case 2:
            self.currentListScrollView = self.priceListView.tableView;
            break;
        default:
            break;
    }
}

// 传递子列表的scrollView到GKPageScrollView
#pragma mark - GKPageListViewDelegate
- (UIScrollView *)listScrollView {
    return self.currentListScrollView;
}

2、分类 + GKPageScrollView + 分类

这个主要是分类嵌套多个GKPageScrollView来实现，主要代码如下：

// 添加多个带有GKPageScrollView的GKNest2View
CGFloat width = kScreenW;
CGFloat height = kScreenH - GK_STATUSBAR_HEIGHT - 50.0f;

[self.categoryView.titles enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    GKNest2View *nestView = [GKNest2View new];
    nestView.frame = CGRectMake(idx * width, 0, width, height);
    nestView.mainScrollView = self->_contentScrollView;
    [self->_contentScrollView addSubview:nestView];
}];
 _contentScrollView.contentSize = CGSizeMake(self.categoryView.titles.count * width, 0);

GKNest2View的实现

#pragma mark - GKPageScrollViewDelegate
- (UIView *)headerViewInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.headerView;
}

- (UIView *)segmentedViewInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.categoryView;
}

- (NSInteger)numberOfListsInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.categoryView.titles.count;
}

- (id<GKPageListViewDelegate>)pageScrollView:(GKPageScrollView *)pageScrollView initListAtIndex:(NSInteger)index {
    GKNestListView *listView = [GKNestListView new];
    return listView;
}

3、手势冲突的解决

多层嵌套最难的地方是手势的冲突问题，其中进行了各种尝试最终解决了手势冲突，方法主要是对手势的代理方法进行实现及修改

01、列表容器左右滑动与列表上下滑动冲突的解决

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    if ([self.gestureDelegate respondsToSelector:@selector(pageListContainerCollectionView:gestureRecognizerShouldBegin:)]) {
        return [self.gestureDelegate pageListContainerCollectionView:self gestureRecognizerShouldBegin:gestureRecognizer];
    }else {
        if (self.isNestEnabled) {
            if ([gestureRecognizer isMemberOfClass:NSClassFromString(@"UIScrollViewPanGestureRecognizer")]) {
                CGFloat velocityX = [(UIPanGestureRecognizer *)gestureRecognizer velocityInView:gestureRecognizer.view].x;
                // x大于0就是右滑
                if (velocityX > 0) {
                    if (self.contentOffset.x == 0) {
                        return NO;
                    }
                }else if (velocityX < 0) { // x小于0是往左滑
                    if (self.contentOffset.x + self.bounds.size.width == self.contentSize.width) {
                        return NO;
                    }
                }
            }
        }
    }
    return YES;
}

02、GKPageScrollView上下滑动与全屏返回手势冲突的解决

#pragma mark - GKPageTableViewGestureDelegate
- (BOOL)pageTableView:(GKPageTableView *)tableView gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    // 特殊处理，解决返回手势与GKPageTableView手势的冲突
    NSArray *internalTargets = [otherGestureRecognizer valueForKey:@"targets"];
    id internalTarget = [internalTargets.firstObject valueForKey:@"target"];
    if ([internalTarget isKindOfClass:NSClassFromString(@"_UINavigationInteractiveTransition")]) return NO;
    
    return YES;
}

上面只是部分的代码，主要实现还是要看具体的代码逻辑。

最后

GKPageScrollView与JXCategoryView结合使用，实现了上面两种嵌套效果，具体代码可以再GKPageScrollView中的Nest中查看。如果您觉得还不错，还请点个star，您的支持是我最大的动力。