美文网首页搜集知识iOS开发记录iOS Developer
iOS TableView上拉下拉刷新控件(二)

iOS TableView上拉下拉刷新控件(二)

作者: 宫城_ | 来源:发表于2016-01-06 17:25 被阅读1160次

    继上一篇iOS TableView上拉下拉刷新控件(一)讲解之后,这篇我们来讲如何将loading圆圈动画和TableView结合起来一起使用。

    (在代码排版上面有问题的地方,大家多多包涵...~)

    首先,我们需要将loading圆圈和提示label加到一个view上去显示,实现的主要点有两点:第一,在上拉或者下拉的过程中,我们通过progress值去控制loading圆圈的动画和label的alpha值,第二,通过设置拉动的方向来设置label提示的内容,具体可以看源码里面我是怎么实现的,我将这个刷新视图单独做了封装,大家可以单独使用这个刷新视图源码

    然后,我们该怎么去获得这个progress值呢?

    首先,我们在初始化的时候需要监听所关联的scrollView的contentOffset值,

    [self.scrollView addObserver:selfforKeyPath:@"contentOffset"options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOldcontext:nil];

    然后在observeValueForKeyPath里面,我们获取contentOffset的最新值,

    CGPoint contentOffset = [[change valueForKey:NSKeyValueChangeNewKey]CGPointValue];

    然后再通过计算来改变progress值,

    self.progress=MAX(0.0,MIN(fabs((self.originOffset+ contentOffset.y)/kMaxPullDownDistance),1.0));

    (注:在这里有个originOffset值,这个是我用来处理是否有导航栏的情况,有则该值为64.0,没有则为0.0)

    计算的思路是我们通过所关联的scrollView的contentOffset与我们所设置的最大的拉动距离值相除作比较,得到的就是拉动的一个范围比例,因为contentOffset会超出我们设置的最大拉动距离,所以我们需要再取最小最大值,来获取到最后的progress值。


    在这里我插一个小的知识点,因为这个是在写上拉时,所必须知道的一个点,

    contentOffset是怎么算的?

    contentOffset是scrollview当前显示区域顶点相对于frame顶点的偏移量,

    contentOffset

    但当上拉刷新之后,此时scrollview的contentSize变化了,(contentSize指的是可显示区域),在计算contentOffset时,需要将contentSize减去scrollView的高度,来和contentOffset作比较。

    拿到progress之后,此时我们离完成这个控件的任务就差不多了。

    首先,我们需要将progress赋值给loading圆圈和提示label,

    然后如果我们拉动的距离超过了设置最大值的时候,我们做loading,并且通过block让外部做一些网络请求或者其他的操作

    [self startLoading:self.refreshView];

    // 0.3s animation time is the best experience

    [UIView animateWithDuration:0.3 animations:^{

    self.scrollView.contentInset=UIEdgeInsetsMake(kMaxPullDownDistance+self.originOffset,0,0,0);

    }completion:^(BOOLfinished) {

    if(self.refreshingBlock) {

    self.refreshingBlock();

    }

    }];

    在上拉时,有一点不同,scrollView的contentSize可能是会变化的,而我们的控件是要始终显示在它的最下方的,所以我们在上拉时,需要对contentSize也加监听

    [self.scrollView addObserver:selfforKeyPath:@"contentSize"options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOldcontext:nil];

    并且在observeValueForKeyPath里面,需要设置控件的center来改变我们的显示位置,以及progress值,其他操作都和下拉刷新一样。


    ok,我们的上拉下拉刷新控件完成喽~

    如果有什么意见或者建议,欢迎大家留言,知识是需要交流的,我相信会有更好更简洁的方法来处理

    这个是我的个人微信公众号,会不定期发表一些iOS开发文章以及疑难问题和我在阅读技术和非技术书籍的一些感悟,欢迎大家订阅!

    宫城Dev

    相关文章

      网友评论

      • bf7edeaa0ddd:如果一个页面有多个tableview放在一个scrollview里,scrollview放在控制器的view上 刷新该加到哪个上?
        宫城_:@happycoder 是
        bf7edeaa0ddd:@宫城_ 三个tableview各自都加吗?
        宫城_:@happycoder 如果是分别刷新数据源的,那就需要加到tableView上
      • 帅气的小狗:写得不错,希望能用代码的排版,这样看着有点累啊
        宫城_:@帅气的小狗 嗯,前面没用markdown去写,后面开始用了😄

      本文标题:iOS TableView上拉下拉刷新控件(二)

      本文链接:https://www.haomeiwen.com/subject/zubxkttx.html