ios监听ScrollView/TableView滚动的正确姿势

Posted 2020-08-26 孙富有(iOS工程师)

主要介绍

1. 监测tableView垂直滚动的舒畅姿势
2. 监测scrollView/collectionView横向滚动的正确姿势

---

1.监测tableView垂直滚动的舒畅姿势

通常我们用KVO或者在scrollViewDidScroll代理方法中监听ScrollView/TableView的contentOffset，比如监听TableView的contentOffset来设置导航栏的透明度或者拉伸顶部的图片。

image

image

常见的姿势是在scrollViewDidScroll的代理方法中监听scrollView.contentOffset.y，会发现有导航栏时scrollView.contentOffset.y初始值可能会等于-64，如果再手动设置tableView.contentInset这个值又会改变，这个时候就需要计算出初始偏移量，然后再算偏移的差值，要是过几天再改下需求......重新计算

那有没有更舒畅的姿势？

有

首先定义2个成员属性，一个是监测范围的临界值，另一个用来记录scrollView.contentInset.top（重点）

        // 监测范围的临界点,>0代表向上滑动多少距离,<0则是向下滑动多少距离
        @property (nonatomic, assign)CGFloat threshold;
        // 记录scrollView.contentInset.top
        @property (nonatomic, assign)CGFloat marginTop;

        // 这里设值-80，即向下滑动80，-80到0就是咱们重点监测的范围
        self.threshold = -80;

然后在KVO回调或者scrollViewDidScroll代理方法中加上下面的代码。
需要理解的就是contentInset，四个值代表tableView的contentView上下左右距离边界的值，界面有导航栏时，系统会自动将tableView的contentView到顶部的距离设为64,即contentInset.top=64，如果导航栏透明就可以看到有空白区域。没有导航栏或者我们调用self.automaticallyAdjustsScrollViewInsets = NO时，tableView的contentInset.top就会变为0。通过下面的算法，我们就可以不用去刻意计算初始的偏移量，只要设置好临界值就行，newoffsetY 就是我们实际要监测的偏移。PS：手动设置tableView.contenInset需要在viewDidAppear中进行。

        // 实时监测scrollView.contentInset.top， 系统优化以及手动设置contentInset都会影响contentInset.top。
        if (self.marginTop != self.scrollView.contentInset.top) {
            self.marginTop = self.scrollView.contentInset.top;
        }
        //CGFloat offsetY = [change[@"new"] CGPointValue].y;
        CGFloat offsetY = scrollView.contentOffset.y;

        // newoffsetY 便是我们想监测的偏移offset.y，初始值为0
        // 向下滑动时<0，向上滑动时>0；
        CGFloat newoffsetY = offsetY + self.marginTop;

         if (newoffsetY >= self.threshold && newoffsetY <= 0) {
            CGFloat progress = newoffsetY/self.threshold;
        }

是骡子是马，拉出来溜溜，再看看效果图。

iamge

第一个页面（首页），上划变透明

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

    if (self.marginTop != scrollView.contentInset.top) {
        self.marginTop = scrollView.contentInset.top;
    }

    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat newoffsetY = offsetY + self.marginTop;

    // 临界值150，向上拖动时变透明
    if (newoffsetY >= 0 && newoffsetY <= 150) {
        [self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:1- newoffsetY/150];
    }else if (newoffsetY > 150){
        [self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:0];
    }else{
        [self.navigationController.navigationBar jp_setNavigationBarBackgroundAlpha:1];
    }

}

第二个界面仿知乎日报的效果，一生X命在他的文章仿写知乎日报 - 主页面补遗（Part 2）用另外的方法实现过。

来自一生X命

简单说下我的思路

1. tableView的y坐标为20，然后组头高度44，加起来刚好就是导航栏的高度。因为组头悬停在tableView的最上方，所以y坐标为20。
2. 在navigationBar上面添加一个高度为20的view，放在状态栏下面,跟组头一样的颜色。navigationBar透明后view看上去会和组头连接起来。
3. 在viewDidAppear方法里面计算第一个组头的frame,取y坐标。（最好在viewDidAppear方法里面，不然加了tableHeaderView可能会产生偏差）
4. 然后在scrollViewDidScroll方法实现导航栏的透明以及切换titleView

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    HeaderFrame = [self.tableView rectForHeaderInSection:1];
}

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

    if (self.marginTop != scrollView.contentInset.top) {
        self.marginTop = scrollView.contentInset.top;
    }

    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat newoffsetY = offsetY + self.marginTop;



    if (newoffsetY >= 0 && newoffsetY <= 150) {
        [self.navigationController.navigationBar jp_setStatusBarBackgroundViewAlpha:newoffsetY/150];
    }else if (newoffsetY > 150){
        [self.navigationController.navigationBar jp_setStatusBarBackgroundViewAlpha:1];
    }

    if (newoffsetY >= HeaderFrame.origin.y) {
        self.refrshView.hidden = YES;
        [self.navigationController.navigationBar setBackgroundColor:[[UIColor purpleColor] colorWithAlphaComponent:0]];

    }else if (newoffsetY < HeaderFrame.origin.y){
        [self.refrshView resetNavigationItemTitle:@"首页"];
        self.refrshView.hidden = NO;
    }
}

2.监测scrollView/collectionView横向滚动的正确姿势

先看效果图，下面的scrollView翻页后才移动上面的导航条，你会怎么实现？

iamge

首先想到的肯定是结束减速的代理方法：scrollViewDidEndDecelerating，但是滑动过快的时候是不会调用scrollViewDidEndDecelerating代理方法的，如果做过用3个界面+scrollView实现循环滚动展示图片，那么基本上都会碰到这么问题。如何准确的监听翻页？我的解决的思路如下

1. 把原来减速后需要处理的代码整合到一个方法中，并且需传入scrollView的contentOffset，来确定当前的page/index。后面简称【方法A】
2. 整个过程中主要留意三个代理方法，拖动后 开始减速-->结束减速-->开始拖动
3. 正常滑动速度的时候，先调用scrollViewWillBeginDecelerating再调用scrollViewDidEndDecelerating，然后调用方法A
4. 快速滑动的时候，先调用scrollViewWillBeginDecelerating,再调用scrollViewWillBeginDragging，不会调用scrollViewWillBeginDragging。咱们可以加个flag，来判断是否减速。没减速再调用方法A

// 开始减速的时候开始self.didEndDecelerating = NO;结束减速就会置为YES,如果滑动很快就还是NO。
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{   
 self.didEndDecelerating = NO;
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    self.didEndDecelerating = YES;
   // 调用方法A，传scrollView.contentOffset
}


// 再次拖拽的时候，判断有没有因为滑动太快而没有调用结束减速的方法。
// 如果没有，四舍五入手动确定位置。这样就可以解决滑动过快的问题
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    if (!self.didEndDecelerating) {
        // 先计算当期的page/index
        CGFloat index = scrollView.contentOffset.x/self.screenWidth;
       //再四舍五入推算本该减速时的scrollView的contentOffset。即：roundf(index)*self.screenWidth]
    }
}

 

文／溪枫狼（简书作者）
原文链接：http://www.jianshu.com/p/2172cca95cdc
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。