正文

Android 带你从源码的角度解析Scroller的滚动实现原理

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转帖请注明本文出自xiaanming的博客（http://blog.csdn.net/xiaanming/article/details/17483273），请尊重他人的辛勤劳动成果，谢谢！

今天给大家讲解的是Scroller类的滚动实现原理，可能很多朋友不太了解该类是用来干嘛的，但是研究Launcher的朋友应该对他很熟悉，Scroller类是滚动的一个封装类，可以实现View的平滑滚动效果，什么是实现View的平滑滚动效果呢，举个简单的例子，一个View从在我们指定的时间内从一个位置滚动到另外一个位置，我们利用Scroller类可以实现匀速滚动，可以先加速后减速，可以先减速后加速等等效果，而不是瞬间的移动的效果，所以Scroller可以帮我们实现很多滑动的效果。

在介绍Scroller类之前，我们先去了解View的scrollBy() 和scrollTo()方法的区别，在区分这两个方法的之前，我们要先理解View 里面的两个成员变量mScrollX， mScrollY，X轴方向的偏移量和Y轴方向的偏移量，这个是一个相对距离，相对的不是屏幕的原点，而是View的左边缘，举个通俗易懂的例子，一列火车从吉安到深圳，途中经过赣州，那么原点就是赣州，偏移量就是 负的吉安到赣州的距离，大家从getScrollX()方法中的注释中就能看出答案来

  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. }

现在我们知道了向右滑动 mScrollX就为负数，向左滑动mScrollX为正数，接下来我们先来看看 scrollTo()方法的源码

  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. }

从该方法中我们可以看出，先判断传进来的(x, y)值是否和View的X, Y偏移量相等，如果不相等，就调用onScrollChanged()方法来通知界面发生改变，然后重绘界面，所以这样子就实现了移动效果啦， 现在我们知道了scrollTo()方法是滚动到(x, y)这个偏移量的点，他是相对于View的开始位置来滚动的。在看看scrollBy()这个方法的代码

  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类了，先看其构造方法

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

只有两个构造方法，第一个只有一个Context参数，第二个构造方法中指定了Interpolator，什么Interpolator呢？中文意思插补器，了解Android动画的朋友都应该熟悉
Interpolator，他指定了动画的变化率，比如说匀速变化，先加速后减速，正弦变化等等，不同的Interpolator可以做出不同的效果出来，第一个使用默认的Interpolator(viscous)

接下来我们就要在Scroller类里面找滚动的方法，我们从名字上面可以看出startScroll()应该是个滚动的方法，我们来看看其源码吧

  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. }

在这个方法中我们只看到了对一些滚动的基本设置动作，比如设置滚动模式，开始时间，持续时间等等，并没有任何对View的滚动操作，也许你正纳闷，不是滚动的方法干嘛还叫做startScroll(),稍安勿躁，既然叫开始滚动，那就是对滚动的滚动之前的基本设置咯。

  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. int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime);
  11. if (timePassed < mDuration) {
  12. switch (mMode) {
  13. case SCROLL_MODE:
  14. float x = (float)timePassed * mDurationReciprocal;
  15. if (mInterpolator == null)
  16. x = viscousFluid(x);
  17. else
  18. x = mInterpolator.getInterpolation(x);
  19. mCurrX = mStartX + Math.round(x * mDeltaX);
  20. mCurrY = mStartY + Math.round(x * mDeltaY);
  21. break;
  22. case FLING_MODE:
  23. float timePassedSeconds = timePassed / 1000.0f;
  24. float distance = (mVelocity * timePassedSeconds)
  25. - (mDeceleration * timePassedSeconds * timePassedSeconds / 2.0f);
  26. mCurrX = mStartX + Math.round(distance * mCoeffX);
  27. // Pin to mMinX <= mCurrX <= mMaxX
  28. mCurrX = Math.min(mCurrX, mMaxX);
  29. mCurrX = Math.max(mCurrX, mMinX);
  30. mCurrY = mStartY + Math.round(distance * mCoeffY);
  31. // Pin to mMinY <= mCurrY <= mMaxY
  32. mCurrY = Math.min(mCurrY, mMaxY);
  33. mCurrY = Math.max(mCurrY, mMinY);
  34. break;
  35. }
  36. }
  37. else {
  38. mCurrX = mFinalX;
  39. mCurrY = mFinalY;
  40. mFinished = true;
  41. }
  42. return true;
  43. }

我们在startScroll()方法的时候获取了当前的动画毫秒赋值给了mStartTime，在computeScrollOffset()中再一次调用AnimationUtils.currentAnimationTimeMillis()来获取动画
毫秒减去mStartTime就是持续时间了，然后进去if判断，如果动画持续时间小于我们设置的滚动持续时间mDuration，进去switch的SCROLL_MODE，然后根据Interpolator来计算出在该时间段里面移动的距离，赋值给mCurrX， mCurrY， 所以该方法的作用是，计算在0到mDuration时间段内滚动的偏移量，并且判断滚动是否结束，true代表还没结束，false则表示滚动介绍了，Scroller类的其他的方法我就不提了，大都是一些get(), set()方法。

看了这么多，到底要怎么才能触发滚动，你心里肯定有很多疑惑，在说滚动之前我要先提另外一个方法computeScroll()，该方法是滑动的控制方法，在绘制View时，会在draw()过程调用该方法。我们先看看computeScroll()的源码

  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. }

没错，他是一个空的方法，需要子类去重写该方法来实现逻辑，到底该方法在哪里被触发呢。我们继续看看View的绘制方法draw()

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

我们只截取了draw()的部分代码，这上面11-16行为我们写出了绘制一个View的几个步骤，我们看看第四步绘制孩子的时候会触发dispatchDraw()这个方法，来看看源码是什么内容

  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. }

好吧，又是定义的一个空方法，给子类来重写的方法,所以我们找到View的子类ViewGroup来看看该方法的具体实现逻辑

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

这个方法代码有点多，但是我们还是挑重点看吧，从65-79行可以看出 在dispatchDraw()里面会对ViewGroup里面的子View调用drawChild()来进行绘制，接下来我们来看看drawChild()方法的代码

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

只截取了部分代码，看到child.computeScroll()你大概明白什么了吧，转了老半天终于找到了computeScroll()方法被触发，就是ViewGroup在分发绘制自己的孩子的时候，会对其子View调用computeScroll()方法

整理下思路，来看看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类实现平滑滚动的效果。为了方面大家理解，我画了一个简单的调用示意图

好了，讲到这里就已经讲完了Scroller类的滚动实现原理啦，不知道大家理解了没有，Scroller能实现很多滚动的效果，由于考虑到这篇文章的篇幅有点长，所以这篇文章就不带领大家来使用Scroller类了，我将在下一篇文章将会带来Scroller类的使用，希望大家到时候关注下，有疑问的同学在下面留言，我会为大家解答的！

相关阅读

目录[+]