iOS UITableView/UICollectionView的嵌套和悬停的解决方案

应用情景

情景一：

说明：是不是和tableView的Plain类型一样，其实这个是由两个列表实现的

情景二：

说明：此时，就可以发现和普通的列表有些不一样了

情景三：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWjR7iQG-1586005378122)(https://img-blog.csdn.net/20170926170507262?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTE9MSVRBMDE2NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

说明：笔者最初就是为了实现这种情况，由于项目需求，需要防QQ空间，不同的是需要类型的切换，当时没想到好的解决方案，最后受同事启发，在其demo上进行修改，使得tableView可以满足大部分的悬停需求

---

思路说明

1、由于是两个tableView嵌套实现，所以首要就是兼容手势，使得我们的拖拽手势可以向下传递

2、通过改变列表的contentOffset来让列表是否"滚动"

3、子列表默认不滚动，当父列表滚动到需要悬停的位置时，父列表"停止"滚动，子列表开始滚动

4、当子列表下拉，contentOffset.y小于0时，子列表"停止滚动"，父列表开始"滚动"

5、使用通知来接收滚动消息

---

主要实现过程（代码）

首先继承UITableView新建LolitaTableView类，并定义两种类型

typedef NS_ENUM(NSInteger , LolitaTableViewType) {
    LolitaTableViewTypeMain,  // 父列表
    LolitaTableViewTypeSub    // 子列表
};

1、兼容手势

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    if (self.type==LolitaTableViewTypeMain) {   // 父table类型需要兼容手势
        return YES;
    }
    return NO;
}

2、注册通知

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(scrollStop:) name:kScrollStopNotificationName object:nil];

3、重写setContentOffset方法

- (void)setContentOffset:(CGPoint)contentOffset{
    [super setContentOffset:contentOffset];
    CGFloat y = contentOffset.y;
    if(self.type == LolitaTableViewTypeMain){   // main类型
        CGFloat stayPosition = self.tableHeaderView.frame.size.height;  // 默认停留的位置
        if ([self.delegate_StayPosition respondsToSelector:@selector(lolitaTableViewHeightForStayPosition:)]) {
            stayPosition = [self.delegate_StayPosition lolitaTableViewHeightForStayPosition:self];  // 获取到停留的位置
        }
        if(self.canScroll == YES){
            if(y > stayPosition){
                contentOffset.y = stayPosition;
                [super setContentOffset:contentOffset];
                self.canScroll = NO;
                // 发送通知，主类不可滚动
                [[NSNotificationCenter defaultCenter] postNotificationName:kScrollStopNotificationName object:self userInfo:nil];
            }else{ // main正常滚动
                [super setContentOffset:contentOffset];
            }
        }else{ // main禁止滚动
            contentOffset.y = stayPosition;
            [super setContentOffset:contentOffset];
        }
    }else if(self.type == LolitaTableViewTypeSub){ // sub类型
        if(self.canScroll == YES){
            if(y < 0){
                contentOffset.y = 0;
                [super setContentOffset:contentOffset];
                self.canScroll = NO;
                // 发送通知，子类不可滚动
                [[NSNotificationCenter defaultCenter] postNotificationName:kScrollStopNotificationName object:self userInfo:nil];
            }else{ // sub正常滚动
                [super setContentOffset:contentOffset];
            }
        }else{ // sub禁止滚动
            contentOffset.y = 0;
            [super setContentOffset:contentOffset];
        }
    }else{
        [super setContentOffset:contentOffset];
    }
}

4、通知处理

- (void)scrollStop:(NSNotification *)notification{
    LolitaTableView *table = notification.object;
    
    if(self != table){  // 发送通知的table和当前self不是同一个时，则需要滚动
        self.canScroll = YES;
    }
    // 把其他所有的sub都移动到顶部,除去主的，其他table皆不能滚动
    if (table.type == LolitaTableViewTypeSub && self.type == LolitaTableViewTypeSub) {
        [self setContentOffset:CGPointZero];
        self.canScroll = NO;
    }
}

---

使用

1、父类tableView

@property (strong ,nonatomic) LolitaTableView *mainTable;
// 初始化父类列表
-(LolitaTableView *)mainTable{
    if (_mainTable==nil) {
        _mainTable = [[LolitaTableView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64) style:UITableViewStyleGrouped];
        _mainTable.delegate = self;
        _mainTable.dataSource = self;
        _mainTable.delegate_StayPosition = self;  // 悬停代理
        _mainTable.tableFooterView = [UIView new];
        _mainTable.showsVerticalScrollIndicator = NO;
        _mainTable.type = LolitaTableViewTypeMain; // 列表类型
    }
    return _mainTable;
}

注：需要将子列表加到列表上，最好是最后一个section的cell上，这样比较灵活；其他位置也可以添加，主要是需要配合悬停的位置使用

// 实现悬停代理
// !!!: 悬停的位置
-(CGFloat)lolitaTableViewHeightForStayPosition:(LolitaTableView *)tableView{
	// 悬停在第3个secion.y处
    return [tableView rectForSection:2].origin.y;
}

2、子类列表

-(LolitaTableView *)table{
    if (_table==nil) {
        _table = [[LolitaTableView alloc] initWithFrame:CGRectZero];
        _table.delegate = self;
        _table.dataSource = self;
        _table.showsVerticalScrollIndicator = NO;
        _table.tableFooterView = [UIView new];
        _table.type = LolitaTableViewTypeSub; // 除了类型要设置为子类，用法和系统类型一样
    }
    return _table;
}

---

Demo地址

---

2019-12-16 补充：

支持了 Cocoapods ，方便集成 : pod 'LLNestedTableView'；
修复了 iOS 13 下滚动异常的问题；
新增了联动的标识，防止多个页面错误通知；
新增了 KVO 的形式进行联动。

---

2020-07-27 补充：

重构了 LLNestedTableView，支持 列表视图 + 集合视图 的联动。

注意：

1、悬停位置的设置改用回调的方式实现
2、如果你的内容视图非上述两个视图，如 UIScrollView，请自行转换成上述两个视图，或者根据 列表视图 或者 集合视图实现的方式自行实现，大体思路不变
3、关于内容视图 和 主列表 同时滚动的问题，目前解决方案是，手动禁止某些滚动视图的滚动事件。PS：另一种思路是改写关键方法 -gestureRecognizer: shouldRecognizeSimultaneouslyWithGestureRecognizer: 的值，笔者目前还没有踩坑，只提供一种思路
4、UITableView/UICollectionView 需要弹性效果，UITableView 竖直方向默认是开启的，UICollectionView 在数量少，内容视图小于可见视图时，弹性是关闭的，你需要设置 alwaysBounceVertical 为 YES/true