PullToRefresh原理解析

原文: http://blog.csdn.net/anxiaoyi520/article/details/41677507?utm_source=tuicool&utm_medium=referral

代码届有一句非常经典的话：“不要重复制造轮子”，多少人看过之后便以此为本，把鲁迅的“拿来主义”发扬光大，只搜轮子，不造轮子。但现在我想补充的一句是“不要重复制造轮子，不等于不需要知道轮子是如何制造的”！

读过PullToRefresh的源码之后，我便依照着做了一个小Demo出来，下面就此原理为大家解析一番。究竟是哪句代码实现了如此强大的功能，究竟是哪个方法是贯穿全文上下？

原理：在View中有一个scrollTo方法，可以将整个View移动到指定的位置，PullToRefresh就是重写了onTouchEvent方法来检测用户滑动的偏移距离，然后用滑动距离调用scrollTo方法来实现整个View的上下左右移动的。

先上图：

我的Demo：

手机QQ的是上下可以滑动，我的demo是向上，向下，向左，向右都可以滑动，松手之后，自动回到原来的位置。

注，在我的demo里继承的是FrameLayout进行的重写，同样你也可以选择重写LinearLayout或者其他ViewGroup，你可以在新版的手机QQ中看到有大量的布局都支持类似我这种demo的上下滑动（或者叫做弹动）

1.首先来看所需要的变量：

[java] view plain copy

 

1. private float mLastMotionX, mLastMotionY; //记录手指触摸的位置X，Y坐标  
2. private float mDeltaX, mDeltaY;//记录当前手指拉动的X和Y偏移量  
3.       
4. private ScrollToHomeRunnable mScrollToHomeRunnable; //一会儿介绍，用来从偏移点回到原点的  
5.       
6. private enum State{ //当前出于什么状态：正在刷新？水平拉动？垂直拉动？正常状态？  
7.     REFRESHING,  
8.     PULLING_HORIZONTAL,  
9.     PULLING_VERTICAL,  
10.     NORMAL,  
11. }  
12.       
13. private enum Orientation{ //记录拉动的方向：水平？垂直？  
14.     HORIZONTAL,  
15.     VERTICAL  
16. }  
17.       
18. private State mState; //当前状态  
19. private Orientation mOrientation; //当前拉动方向  

2.初始化方法，初始化的时候只需要将mState 设置为 NORMAL状态即可。

[java] view plain copy

 

1. private void init(Context context){  
2.     mState = State.NORMAL;  
3. }  

3-1.重写onTouchEvent方法，检测用户滑动的距离，方向等，然后调用scrollTo来让整个View偏移，这可谓是核心代码了，先看伪代码：

[java] view plain copy

 

1. @Override  
2. public boolean onTouchEvent(MotionEvent event) {  
3.     int action = event.getAction();  
4.     switch(action){  
5.     case MotionEvent.ACTION_DOWN:  
6.          /** 
7.           * 记录X，Y坐标，恢复mDeltaX和mDeltaY为0 
8.           */  
9.         break;  
10.           
11.     case MotionEvent.ACTION_MOVE:  
12.         /** 
13.          * 根据当前触摸点 - 上次记录的x或者y坐标，得到增量，然后应用到scrollTo方法上去， 
14.          * 然后重新记录x，y坐标 
15.          */  
16.         break;  
17.           
18.     case MotionEvent.ACTION_UP:  
19.         /** 
20.          * 用户松开手指之后，View自动回到偏移量为0的位置 
21.          */  
22.         break;  
23.     }  
24.     return true;  
25. }  

3-2：我们先来实现当手指ACTION_DOWN，即刚刚点下的时候，应该做哪些工作？如下代码所示，其实所做的工作非常简单，每次只需要重新记录当前手指的X坐标，Y坐标，并把X偏移量和Y偏移量调整为0即可，每次都从最远点的位置开始拉动。

[java] view plain copy

 

1. case MotionEvent.ACTION_DOWN:  
2.     mLastMotionX = event.getX();  
3.     mLastMotionY = event.getY();  
4.     mDeltaY = .0F;  
5.     mDeltaX = .0F;  
6.     break;  

3-3：当用户在屏幕上滑动的时候，即ACTION_MOVE的时候，应该记录用户此次点击的X坐标（或Y坐标）与一开始ACTION_DOWN的时候X坐标（或者Y坐标）的差值，然后记录此差值并调用scrollTo方法：

[java] view plain copy

 

1. case MotionEvent.ACTION_MOVE:  
2.     float innerDeltaY = event.getY() - mLastMotionY; //记录Y的差值  
3.     float innerDeltaX = event.getX() - mLastMotionX; //记录X的差值  
4.     float absInnerDeltaY = Math.abs(innerDeltaY); //Y差值绝对值  
5.     float absInnerDeltaX = Math.abs(innerDeltaX); //X差值绝对值  
6.     //当Y差值绝对值 大于 X差值绝对值的时候，我们可以认为用户正在上下滑动  
7.     if(absInnerDeltaY > absInnerDeltaX && mState != State.PULLING_HORIZONTAL){  
8.         mOrientation = Orientation.VERTICAL;//将当前滑动方向置为垂直滑动  
9.         mState = State.PULLING_VERTICAL;//滑动状态：正在垂直拉动  
10.         if(innerDeltaY > 1.0F){ //innerDeltaY为正数，用户正在向下拉动，1.0F可看做阈值，下面类似  
11.             mDeltaY -= absInnerDeltaY; //注意这个地方是-=，即累减的过程  
12.             pull(mDeltaY);  
13.         }else if(innerDeltaY < -1.0F){ //innerDeltaY为负数，用户正在向上拉动  
14.             mDeltaY += absInnerDeltaY; //累加  
15.             pull(mDeltaY);  
16.         }//下面的代码是水平滑动  
17.     }else if(absInnerDeltaY < absInnerDeltaX && mState != State.PULLING_VERTICAL){  
18.         mOrientation = Orientation.HORIZONTAL;  
19.         mState = State.PULLING_HORIZONTAL;  
20.         if(innerDeltaX > 1.0F){  
21.             mDeltaX -= absInnerDeltaX;  
22.             pull(mDeltaX);  
23.         }else if(innerDeltaX < -1.0F){  
24.             mDeltaX += absInnerDeltaX;  
25.             pull(mDeltaX);  
26.         }  
27.     }  
28.     //重新记录新的坐标值  
29.     mLastMotionX = event.getX();  
30.     mLastMotionY = event.getY();  
31.     break;  

3-4 大家可能注意到，判断水平还是垂直移动的时候，有一个mState != State.PULLING_XXX 条件，这个条件是为了限制滑动的方向的，即当用户正在处于垂直滑动的时候，就禁止用户水平滑动；当水平滑动的时候就禁止垂直滑动，每次只能按一个方向进行滑动。

在测试的时候，大家即可感受到，向下拉动屏幕的时候，比如偏移值为200，那么如果你想让屏幕真的偏移200，需要调用scrollTo(0, -200)，这也是为什么innerDelta为正值的时候，需要累减；为负值（用户开始向上滑动），要累加的原因。

3-5 当用户手指离开的时候，按照PullToRefresh来说就是开始执行用户的任务（比如刷新数据等等操作），任务执行完毕之后，View重新调用scrollTo一定的距离（这个距离就是在ACTION_MOVE阶段，记录的mDeltaY和mDeltaX偏移量）回到自己原来的位置，在我的demo里，只是简单的当用户手指离开之后就立马回到原来的位置：

[java] view plain copy

 

1. case MotionEvent.ACTION_UP:  
2.     switch(mOrientation){//根据ACTION_MOVE的时候所确定的方向开始判断  
3.     case VERTICAL:  
4.         smoothScrollTo(mDeltaY);//垂直拉动，让View重新mDeltaY，重新回到Y的原点  
5.         break;  
6.           
7.     case HORIZONTAL:  
8.         smoothScrollTo(mDeltaX);//如果水平拉动，让View重新滑动mDeltaX，重新回到X的原点  
9.         break;  
10.           
11.     default:  
12.         break;  
13.     }  
14.     break;  

3-6：用户触摸阶段（ACTION_MOVE）的拉动方法，除以2.0将拉动的距离缩放，这里代表如果用户已知从上滑到下面，那么整个View最多偏移半个屏幕。

[java] view plain copy

 

1. private void pull(float diff){  
2.     int value = Math.round(diff / 2.0F);//diff就是偏移量，除以2.0相当于一个缩放  
3.     if(mOrientation == Orientation.VERTICAL){  
4.         scrollTo(0, value);//注意这里是核心了，Y方向上移动value距离，X方向上保持不变  
5.     }else if(mOrientation == Orientation.HORIZONTAL){  
6.         scrollTo(value, 0);//X方向上移动value距离，Y方向上保持不变  
7.     }  
8. }  

3-7：用户松手之后（ACTION_UP）的View自动回到原位置的方法：

[java] view plain copy

 

1. private void smoothScrollTo(float diff){  
2.     int value = Math.round(diff / 2.0F);  
3.     mScrollToHomeRunnable = new ScrollToHomeRunnable(value, 0);  
4.     mState = State.REFRESHING;//当前状态为正在刷新  
5.     post(mScrollToHomeRunnable);//view自身有一个post方法，我们提交一个scrollTo的任务给它  
6. }  

3-8-1：下面来看ScrollToHomeRunnable类的定义，ScrollToHomeRunnable就是用来调用scrollTo的，目的就是要使View从X偏移量或者Y偏移量返回到初始位置去，那么为什么要单独的把它封装成一个Runnable类呢？其一是为了调用View自身的View.post(Runnable runnable)和View.postDelayed(Runnable runnable, int delayMills)方法，其二是为了给他一些装饰效果，比如这里的减速差值，模拟一些特殊的效果。

通过post和postDelayed方法我们可以不停的把这个任务放在View自身的消息队列中，以达到不停地调用scrollTo的目的，一旦回到原点之后，我们就停止调用。其实在这里使用Handler.post(Runnable runnable)也可以实现这样的操作（不停的把一个Runnable任务添加到消息队列中去），大家可以试试，但我测试的是Handler没有直接View.post(Runnable)平滑性高。

3-8-2：ScrollToHomeRunnable的构造器，很简单，存储目标值和当前的偏移量，初始化DecelerateInterpolator差值器。

[java] view plain copy

 

1. public ScrollToHomeRunnable(int current, int target){  
2.     this.target = target;  
3.     this.current = current;  
4.     mInterpolator = new DecelerateInterpolator();  
5. }  

3-8-3：ScrollToHomeRunnable的run方法，在这个地方，原PullToRefresh的作者很聪明，知道调用getInterpolation这个方法，来得到一系列的差值点，以此得到一串不同的滑动距离，比如”102，86，67，53，40，32，22，15，9，5，2，0“或者”-178，-157，-130，-107，-84，-65，-49，-35，-22，-13，-6，-2，0“，就是这么一串值，来让用户感觉到这个”突然性的回到了原来的位置“这种感觉。

在规格化时间方面，PullToRefresh的作者想的也很周到，全部都使用的long这种存储类型，避免使用了float来让软件做较多的float计算，他先将时间差值放大1000倍，然后规格化至（0,1000）中的一个值，然后再缩小得到（0，1.0F）中的一个浮点值，并当做参数调用getInterpolation方法，得到下一个需要移动到哪一个位置，以此不停的确定的delta值，就不停的确定current值，只要scrollTo之后，发现current 依然没有到达target的值，那么就再次调用postDelayed方法，重新scrollTo。

注：代码中200这个值代表的意思是：200ms，即经过200ms返回原位置去。

[java] view plain copy

 

1. @Override  
2. public void run() {  
3.     if(mStartTime == -1){  
4.         mStartTime = System.currentTimeMillis();  
5.     }else{  
6.         long normalizedTime = (1000 * (System.currentTimeMillis() - mStartTime)) / 200;  
7.         normalizedTime = Math.max(Math.min(normalizedTime, 1000), 0);  
8.         final int delta = Math.round((current - target)  
9.                 * mInterpolator.getInterpolation(normalizedTime / 1000f));  
10.           
11.         current = current - delta;                
12.         if(mOrientation == Orientation.HORIZONTAL){  
13.             scrollTo(current, 0);//水平scroll  
14.         }else if(mOrientation == Orientation.VERTICAL){  
15.             scrollTo(0, current);//垂直scroll  
16.         }  
17.     }  
18.       
19.     if(current != target){//没有回到原点：在经过16毫秒之后继续postDelayed这个任务  
20.         postDelayed(this, 16);  
21.     }else{  
22.         mState = State.NORMAL;//回到原点，mState置为NORMAL状态  
23.     }  
24. }  

3-9：最后的补充。如果没有上述的差值器的帮忙，以及不是200ms，或者每次current 只是简单的递减的话，用户可以清楚的看到这个不断回到原来位置的过程，在这期间，如果用户点击的话，将会导致mDeltaX和mDeltaY为0，View会立马调到原位置去，虽然这里在特别快的时候来不及点击，但是还是需要在onTouchEvent一开头的地方补充上这句代码，如果当前正处于刷新状态，那么立即返回（禁止用户点击）：

[java] view plain copy

 

1. if(mState == State.REFRESHING){  
2.     return true;  
3. }  

3-10：个人QQ：1291700520，Android Programmer. 如转载、引用等还望注明链接来源，代码下载地址：

https://github.com/anxiaoyi/PullToRefreshTheory