906      阿裏雲  技術社區[雲棲]

Android 帶你從源碼的角度解析Scroller的滾動實現原理

今天給大家講解的是Scroller類的滾動實現原理，可能很多朋友不太了解該類是用來幹嘛的，但是研究Launcher的朋友應該對他很熟悉，Scroller類是滾動的一個封裝類，可以實現View的平滑滾動效果，什麼是實現View的平滑滾動效果呢，舉個簡單的例子，一個View從在我們指定的時間內從一個位置滾動到另外一個位置，我們利用Scroller類可以實現勻速滾動，可以先加速後減速，可以先減速後加速等等效果，而不是瞬間的移動的效果，所以Scroller可以幫我們實現很多滑動的效果。

在介紹Scroller類之前，我們先去了解View的scrollBy() 和scrollTo()方法的區別，在區分這兩個方法的之前，我們要先理解View 裏麵的兩個成員變量mScrollX， mScrollY，X軸方向的偏移量和Y軸方向的偏移量，這個是一個相對距離，相對的不是屏幕的原點，而是View的左邊緣，舉個通俗易懂的例子，一列火車從吉安到深圳，途中經過贛州，那麼原點就是贛州，偏移量就是 負的吉安到贛州的距離，大家從getScrollX()方法中的注釋中就能看出答案來

[java] view plaincopy

1. /** 
2.     * Return the scrolled left position of this view. This is the left edge of 
3.     * the displayed part of your view. You do not need to draw any pixels 
4.     * farther left, since those are outside of the frame of your view on 
5.     * screen. 
6.     * 
7.     * @return The left edge of the displayed part of your view, in pixels. 
8.     */  
9.    public final int getScrollX() {  
10.        return mScrollX;  
11.    }  

[java] view plaincopy

1. /** 
2.    * Set the scrolled position of your view. This will cause a call to 
3.    * {@link #onScrollChanged(int, int, int, int)} and the view will be 
4.    * invalidated. 
5.    * @param x the x position to scroll to 
6.    * @param y the y position to scroll to 
7.    */  
8.   public void scrollTo(int x, int y) {  
9.       if (mScrollX != x || mScrollY != y) {  
10.           int oldX = mScrollX;  
11.           int oldY = mScrollY;  
12.           mScrollX = x;  
13.           mScrollY = y;  
14.           onScrollChanged(mScrollX, mScrollY, oldX, oldY);  
15.           if (!awakenScrollBars()) {  
16.               invalidate();  
17.           }  
18.       }  
19.   }  

[java] view plaincopy

1. /** 
2.     * Move the scrolled position of your view. This will cause a call to 
3.     * {@link #onScrollChanged(int, int, int, int)} and the view will be 
4.     * invalidated. 
5.     * @param x the amount of pixels to scroll by horizontally 
6.     * @param y the amount of pixels to scroll by vertically 
7.     */  
8.    public void scrollBy(int x, int y) {  
9.        scrollTo(mScrollX + x, mScrollY + y);  
10.    }  

原來他裏麵調用了scrollTo()方法，那就好辦了，他就是相對於View上一個位置根據(x, y)來進行滾動，可能大家腦海中對這兩個方法還有點模煳，沒關係，還是舉個通俗的例子幫大家理解下，假如一個View,調用兩次scrollTo(-10, 0)，第一次向右滾動10，第二次就不滾動了，因為mScrollX和x相等了，當我們調用兩次scrollBy(-10, 0),第一次向右滾動10，第二次再向右滾動10，他是相對View的上一個位置來滾動的。

對於scrollTo()和scrollBy()方法還有一點需要注意，這點也很重要，假如你給一個LinearLayout調用scrollTo()方法，並不是LinearLayout滾動，而是LinearLayout裏麵的內容進行滾動，比如你想對一個按鈕進行滾動，直接用Button調用scrollTo()一定達不到你的需求，大家可以試一試，如果真要對某個按鈕進行scrollTo()滾動的話，我們可以在Button外麵包裹一層Layout，然後對Layout調用scrollTo()方法。

了解了scrollTo()和scrollBy()方法之後我們就了解下Scroller類了，先看其構造方法

[java] view plaincopy

1. /** 
2.  * Create a Scroller with the default duration and interpolator. 
3.  */  
4. public Scroller(Context context) {  
5.     this(context, null);  
6. }  
7.   
8. /** 
9.  * Create a Scroller with the specified interpolator. If the interpolator is 
10.  * null, the default (viscous) interpolator will be used. 
11.  */  
12. public Scroller(Context context, Interpolator interpolator) {  
13.     mFinished = true;  
14.     mInterpolator = interpolator;  
15.     float ppi = context.getResources().getDisplayMetrics().density * 160.0f;  
16.     mDeceleration = SensorManager.GRAVITY_EARTH   // g (m/s^2)  
17.                   * 39.37f                        // inch/meter  
18.                   * ppi                           // pixels per inch  
19.                   * ViewConfiguration.getScrollFriction();  
20. }  

接下來我們就要在Scroller類裏麵找滾動的方法，我們從名字上麵可以看出startScroll()應該是個滾動的方法，我們來看看其源碼吧

[java] view plaincopy

1. public void startScroll(int startX, int startY, int dx, int dy, int duration) {  
2.     mMode = SCROLL_MODE;  
3.     mFinished = false;  
4.     mDuration = duration;  
5.     mStartTime = AnimationUtils.currentAnimationTimeMillis();  
6.     mStartX = startX;  
7.     mStartY = startY;  
8.     mFinalX = startX + dx;  
9.     mFinalY = startY + dy;  
10.     mDeltaX = dx;  
11.     mDeltaY = dy;  
12.     mDurationReciprocal = 1.0f / (float) mDuration;  
13.     // This controls the viscous fluid effect (how much of it)  
14.     mViscousFluidScale = 8.0f;  
15.     // must be set to 1.0 (used in viscousFluid())  
16.     mViscousFluidNormalize = 1.0f;  
17.     mViscousFluidNormalize = 1.0f / viscousFluid(1.0f);  
18. }  

[java] view plaincopy

1. /** 
2.  * Call this when you want to know the new location.  If it returns true, 
3.  * the animation is not yet finished.  loc will be altered to provide the 
4.  * new location. 
5.  */   
6. public boolean computeScrollOffset() {  
7.     if (mFinished) {  
8.         return false;  
9.     }  
10.   
11.     int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime);  
12.   
13.     if (timePassed < mDuration) {  
14.         switch (mMode) {  
15.         case SCROLL_MODE:  
16.             float x = (float)timePassed * mDurationReciprocal;  
17.   
18.             if (mInterpolator == null)  
19.                 x = viscousFluid(x);   
20.             else  
21.                 x = mInterpolator.getInterpolation(x);  
22.   
23.             mCurrX = mStartX + Math.round(x * mDeltaX);  
24.             mCurrY = mStartY + Math.round(x * mDeltaY);  
25.             break;  
26.         case FLING_MODE:  
27.             float timePassedSeconds = timePassed / 1000.0f;  
28.             float distance = (mVelocity * timePassedSeconds)  
29.                     - (mDeceleration * timePassedSeconds * timePassedSeconds / 2.0f);  
30.               
31.             mCurrX = mStartX + Math.round(distance * mCoeffX);  
32.             // Pin to mMinX <= mCurrX <= mMaxX  
33.             mCurrX = Math.min(mCurrX, mMaxX);  
34.             mCurrX = Math.max(mCurrX, mMinX);  
35.               
36.             mCurrY = mStartY + Math.round(distance * mCoeffY);  
37.             // Pin to mMinY <= mCurrY <= mMaxY  
38.             mCurrY = Math.min(mCurrY, mMaxY);  
39.             mCurrY = Math.max(mCurrY, mMinY);  
40.               
41.             break;  
42.         }  
43.     }  
44.     else {  
45.         mCurrX = mFinalX;  
46.         mCurrY = mFinalY;  
47.         mFinished = true;  
48.     }  
49.     return true;  
50. }  

看了這麼多，到底要怎麼才能觸發滾動，你心裏肯定有很多疑惑，在說滾動之前我要先提另外一個方法computeScroll()，該方法是滑動的控製方法，在繪製View時，會在draw()過程調用該方法。我們先看看computeScroll()的源碼

[java] view plaincopy

1. /** 
2.     * Called by a parent to request that a child update its values for mScrollX 
3.     * and mScrollY if necessary. This will typically be done if the child is 
4.     * animating a scroll using a {@link android.widget.Scroller Scroller} 
5.     * object. 
6.     */  
7.    public void computeScroll() {  
8.    }  

[java] view plaincopy

1. public void draw(Canvas canvas) {  
2.        final int privateFlags = mPrivateFlags;  
3.        final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&  
4.                (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);  
5.        mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;  
6.   
7.        /* 
8.         * Draw traversal performs several drawing steps which must be executed 
9.         * in the appropriate order: 
10.         * 
11.         *      1. Draw the background 
12.         *      2. If necessary, save the canvas' layers to prepare for fading 
13.         *      3. Draw view's content 
14.         *      4. Draw children 
15.         *      5. If necessary, draw the fading edges and restore layers 
16.         *      6. Draw decorations (scrollbars for instance) 
17.         */  
18.   
19.        // Step 1, draw the background, if needed  
20.        int saveCount;  
21.   
22.        if (!dirtyOpaque) {  
23.            final Drawable background = mBackground;  
24.            if (background != null) {  
25.                final int scrollX = mScrollX;  
26.                final int scrollY = mScrollY;  
27.   
28.                if (mBackgroundSizeChanged) {  
29.                    background.setBounds(0, 0,  mRight - mLeft, mBottom - mTop);  
30.                    mBackgroundSizeChanged = false;  
31.                }  
32.   
33.                if ((scrollX | scrollY) == 0) {  
34.                    background.draw(canvas);  
35.                } else {  
36.                    canvas.translate(scrollX, scrollY);  
37.                    background.draw(canvas);  
38.                    canvas.translate(-scrollX, -scrollY);  
39.                }  
40.            }  
41.        }  
42.   
43.        // skip step 2 & 5 if possible (common case)  
44.        final int viewFlags = mViewFlags;  
45.        boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;  
46.        boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;  
47.        if (!verticalEdges && !horizontalEdges) {  
48.            // Step 3, draw the content  
49.            if (!dirtyOpaque) onDraw(canvas);  
50.   
51.            // Step 4, draw the children  
52.            dispatchDraw(canvas);  
53.   
54.            // Step 6, draw decorations (scrollbars)  
55.            onDrawScrollBars(canvas);  
56.   
57.            // we're done...  
58.            return;  
59.        }  
60.   
61.        ......  
62.        ......  
63.        ......  

我們隻截取了draw()的部分代碼，這上麵11-16行為我們寫出了繪製一個View的幾個步驟，我們看看第四步繪製孩子的時候會觸發dispatchDraw()這個方法，來看看源碼是什麼內容

[java] view plaincopy

1. /** 
2.     * Called by draw to draw the child views. This may be overridden 
3.     * by derived classes to gain control just before its children are drawn 
4.     * (but after its own view has been drawn). 
5.     * @param canvas the canvas on which to draw the view 
6.     */  
7.    protected void dispatchDraw(Canvas canvas) {  
8.   
9.    }  

[java] view plaincopy

1. @Override  
2. protected void dispatchDraw(Canvas canvas) {  
3.     final int count = mChildrenCount;  
4.     final View[] children = mChildren;  
5.     int flags = mGroupFlags;  
6.   
7.     if ((flags & FLAG_RUN_ANIMATION) != 0 && canAnimate()) {  
8.         final boolean cache = (mGroupFlags & FLAG_ANIMATION_CACHE) == FLAG_ANIMATION_CACHE;  
9.   
10.         final boolean buildCache = !isHardwareAccelerated();  
11.         for (int i = 0; i < count; i++) {  
12.             final View child = children[i];  
13.             if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE) {  
14.                 final LayoutParams params = child.getLayoutParams();  
15.                 attachLayoutAnimationParameters(child, params, i, count);  
16.                 bindLayoutAnimation(child);  
17.                 if (cache) {  
18.                     child.setDrawingCacheEnabled(true);  
19.                     if (buildCache) {                          
20.                         child.buildDrawingCache(true);  
21.                     }  
22.                 }  
23.             }  
24.         }  
25.   
26.         final LayoutAnimationController controller = mLayoutAnimationController;  
27.         if (controller.willOverlap()) {  
28.             mGroupFlags |= FLAG_OPTIMIZE_INVALIDATE;  
29.         }  
30.   
31.         controller.start();  
32.   
33.         mGroupFlags &= ~FLAG_RUN_ANIMATION;  
34.         mGroupFlags &= ~FLAG_ANIMATION_DONE;  
35.   
36.         if (cache) {  
37.             mGroupFlags |= FLAG_CHILDREN_DRAWN_WITH_CACHE;  
38.         }  
39.   
40.         if (mAnimationListener != null) {  
41.             mAnimationListener.onAnimationStart(controller.getAnimation());  
42.         }  
43.     }  
44.   
45.     int saveCount = 0;  
46.     final boolean clipToPadding = (flags & CLIP_TO_PADDING_MASK) == CLIP_TO_PADDING_MASK;  
47.     if (clipToPadding) {  
48.         saveCount = canvas.save();  
49.         canvas.clipRect(mScrollX + mPaddingLeft, mScrollY + mPaddingTop,  
50.                 mScrollX + mRight - mLeft - mPaddingRight,  
51.                 mScrollY + mBottom - mTop - mPaddingBottom);  
52.   
53.     }  
54.   
55.     // We will draw our child's animation, let's reset the flag  
56.     mPrivateFlags &= ~PFLAG_DRAW_ANIMATION;  
57.     mGroupFlags &= ~FLAG_INVALIDATE_REQUIRED;  
58.   
59.     boolean more = false;  
60.     final long drawingTime = getDrawingTime();  
61.   
62.     if ((flags & FLAG_USE_CHILD_DRAWING_ORDER) == 0) {  
63.         for (int i = 0; i < count; i++) {  
64.             final View child = children[i];  
65.             if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) {  
66.                 more |= drawChild(canvas, child, drawingTime);  
67.             }  
68.         }  
69.     } else {  
70.         for (int i = 0; i < count; i++) {  
71.             final View child = children[getChildDrawingOrder(count, i)];  
72.             if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) {  
73.                 more |= drawChild(canvas, child, drawingTime);  
74.             }  
75.         }  
76.     }  
77.   
78.     // Draw any disappearing views that have animations  
79.     if (mDisappearingChildren != null) {  
80.         final ArrayList<View> disappearingChildren = mDisappearingChildren;  
81.         final int disappearingCount = disappearingChildren.size() - 1;  
82.         // Go backwards -- we may delete as animations finish  
83.         for (int i = disappearingCount; i >= 0; i--) {  
84.             final View child = disappearingChildren.get(i);  
85.             more |= drawChild(canvas, child, drawingTime);  
86.         }  
87.     }  
88.   
89.     if (debugDraw()) {  
90.         onDebugDraw(canvas);  
91.     }  
92.   
93.     if (clipToPadding) {  
94.         canvas.restoreToCount(saveCount);  
95.     }  
96.   
97.     // mGroupFlags might have been updated by drawChild()  
98.     flags = mGroupFlags;  
99.   
100.     if ((flags & FLAG_INVALIDATE_REQUIRED) == FLAG_INVALIDATE_REQUIRED) {  
101.         invalidate(true);  
102.     }  
103.   
104.     if ((flags & FLAG_ANIMATION_DONE) == 0 && (flags & FLAG_NOTIFY_ANIMATION_LISTENER) == 0 &&  
105.             mLayoutAnimationController.isDone() && !more) {  
106.         // We want to erase the drawing cache and notify the listener after the  
107.         // next frame is drawn because one extra invalidate() is caused by  
108.         // drawChild() after the animation is over  
109.         mGroupFlags |= FLAG_NOTIFY_ANIMATION_LISTENER;  
110.         final Runnable end = new Runnable() {  
111.            public void run() {  
112.                notifyAnimationListener();  
113.            }  
114.         };  
115.         post(end);  
116.     }  
117. }  

[java] view plaincopy

1.  protected boolean drawChild(Canvas canvas, View child, long drawingTime) {  
2.     ......  
3.     ......  
4.   
5.     if (!concatMatrix && canvas.quickReject(cl, ct, cr, cb, Canvas.EdgeType.BW) &&  
6.                 (child.mPrivateFlags & DRAW_ANIMATION) == 0) {  
7.             return more;  
8.         }  
9.   
10.         child.computeScroll();  
11.   
12.         final int sx = child.mScrollX;  
13.         final int sy = child.mScrollY;  
14.   
15.         boolean scalingRequired = false;  
16.         Bitmap cache = null;  
17.   
18.     ......  
19.     ......  
20.   
21. }  

整理下思路，來看看View滾動的實現原理，我們先調用Scroller的startScroll()方法來進行一些滾動的初始化設置，然後迫使View進行繪製，我們調用View的invalidate()或postInvalidate()就可以重新繪製View，繪製View的時候會觸發computeScroll()方法，我們重寫computeScroll()，在computeScroll()裏麵先調用Scroller的computeScrollOffset()方法來判斷滾動有沒有結束，如果滾動沒有結束我們就調用scrollTo()方法來進行滾動，該scrollTo()方法雖然會重新繪製View,但是我們還是要手動調用下invalidate()或者postInvalidate()來觸發界麵重繪，重新繪製View又觸發computeScroll()，所以就進入一個循環階段，這樣子就實現了在某個時間段裏麵滾動某段距離的一個平滑的滾動效果
也許有人會問，幹嘛還要調用來調用去最後在調用scrollTo()方法，還不如直接調用scrollTo()方法來實現滾動，其實直接調用是可以，隻不過scrollTo()是瞬間滾動的，給人的用戶體驗不太好，所以Android提供了Scroller類實現平滑滾動的效果。為了方麵大家理解，我畫了一個簡單的調用示意圖

最後更新：2017-04-03 12:56:00

  上一篇： Oracle中的sql語句優化

  下一篇： WinFrom 控件 屬性 小結