scrollview、tableView嵌套解决方案

31 篇文章 0 订阅
本文分享了一个自定义的解决方案,通过嵌套scrollview和tableView实现topView跟随滚动的优雅交互,关键在于设置tableView的headerView策略。查看详细实现和GitHub代码Demo。
摘要由CSDN通过智能技术生成

scrollview、tableView嵌套解决方案

在网上找了很多,没有喜欢的方案。也参考了众多设计,做了一款自认为比较简洁、完美的方案:

大致思路:外层放置scrollview作为容器,容器内上部分topView,下部分tableView。当tableView滚动时,如果topView还在展示区域,就设置topView的y坐标,让topView跟随同步上移。

(注意:如果不设置tableView的headerView,tableView、和topView都会同时上移不是我想要的效果,所以设置tableView的headerView高度包括topView的高度,达到了完美的效果,具体实现看demo)

效果预览:

请添加图片描述

核心代码就是在父视图、子试图的滚动判断

//父视图滚动的回调,用于横向滚动判断

//父视图滚动的回调,用于横向滚动判断
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    
    CGFloat placeholderOffset = 0;
    if (self.topView.selectedIndex == 0) {
        if (self.firstTableView.contentOffset.y > CGRectGetHeight(self.topView.frame) - kItemheight) {
            placeholderOffset = CGRectGetHeight(self.topView.frame) - kItemheight;
        }else {
            placeholderOffset = self.firstTableView.contentOffset.y;
        }
        [self.secondTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }else {
        if (self.secondTableView.contentOffset.y > CGRectGetHeight(self.topView.frame) - kItemheight) {
            placeholderOffset = CGRectGetHeight(self.topView.frame) - kItemheight;
        }else {
            placeholderOffset = self.secondTableView.contentOffset.y;
        }
        [self.firstTableView setContentOffset:CGPointMake(0, placeholderOffset) animated:NO];
    }
}


//子视图滚动的回调,用于竖直方向上滚动判断

//子视图滚动的回调,用于竖直方向上滚动判断
- (void)updateTopViewFrame:(UIScrollView *)scrollView{
    CGFloat placeHolderHeight = CGRectGetHeight(self.topView.frame) - self.topView.itemHeight;
    CGFloat offsetY = scrollView.contentOffset.y;
    
    CGFloat y = 0.0;
    if (offsetY >= 0 && (offsetY <= placeHolderHeight)) {
        y = -offsetY;
    } else if (offsetY > placeHolderHeight) {
        y = -placeHolderHeight;
    } else if (offsetY < 0) {
        y = -offsetY;
    }
    
    [self.topView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.offset(y + kNavBarHeight);
    }];
}

githut demo下载地址:https://github.com/biyuhuaping/NestScrollView

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值