方法描述：

重置 VelocityTracker 回其初始状态。

(4) addMovement(MotionEvent event)

public void addMovement(MotionEvent event)

方法描述：

为 VelocityTracker 传入触摸事件（包括ACTION_DOWN、ACTION_MOVE、ACTION_UP等），这样 VelocityTracker 才能在调用了 computeCurrentVelocity 方法后，正确的获得当前的速度。

(5)  computeCurrentVelocity(int units)

public void computeCurrentVelocity(int units)

方法描述：

根据已经传入的触摸事件计算出当前的速度，可以通过getXVelocity 或 getYVelocity进行获取对应方向上的速度。值得注意的是，计算出的速度值不超过Float.MAX_VALUE。

参数解析：

第一个参数 units： 速度的单位。值为1表示每毫秒像素数，1000表示每秒像素数。

(6) computeCurrentVelocity(int units, float maxVelocity)

public void computeCurrentVelocity(int units, float maxVelocity)

方法描述：

根据已经传入的触摸事件计算出当前的速度，可以通过getXVelocity 或 getYVelocity进行获取对应方向上的速度。值得注意的是，计算出的速度值不超过maxVelocity。

参数解析：

第一个参数 units： 速度的单位。值为1表示每毫秒像素数，1000表示每秒像素数。

第二个参数 maxVelocity： 最大的速度，计算出的速度不会超过这个值。值得注意的是，这个参数必须是正数，且其单位就是我们在第一参数设置的单位。

(7) getXVelocity()

public float getXVelocity()

方法描述：

获取最后计算的水平方向速度，使用此方法前需要记得先调用computeCurrentVelocity

(8) getYVelocity()

 public float getYVelocity()

方法描述：

获取最后计算的垂直方向速度，使用此方法前需要记得先调用computeCurrentVelocity

(9) getXVelocity(int id)

public float getXVelocity(int id)

方法描述：

获取对应的手指id最后计算的水平方向速度，使用此方法前需要记得先调用computeCurrentVelocity

参数解析：

第一个参数 id： 触碰的手指的id

(10) getYVelocity(int id)

public float getYVelocity(int id)

方法描述：

获取对应的手指id最后计算的垂直方向速度，使用此方法前需要记得先调用computeCurrentVelocity

参数解析：

第一个参数 id： 触碰的手指的id

3、小结

VelocityTracker 的 API 简单明了，我们可以用记住一个套路。

1. 在触摸事件为 ACTION_DOWN 或是进入 onTouchEvent 方法时，通过 obtain 获取一个 VelocityTracker ；

2. 在触摸事件为 ACTION_UP 时，调用 recycle 进行释放 VelocityTracker；

3. 在进入 onTouchEvent 方法或将 ACTION_DOWN、ACTION_MOVE、ACTION_UP 的事件通过 addMovement 方法添加进 VelocityTracker；

4. 在需要获取速度的地方，先调用 computeCurrentVelocity 方法，然后通过 getXVelocity、getYVelocity 获取对应方向的速度；

四、实战——带惯性滑动的柱状图

1、效果图

github 地址：传送门

虽然我们是 Scroller 和 VelocityTracker 的实战，但我们还是有必要先略提一下柱子和点的绘制，以及其动画的大致思路。然后再加入 Scroller 和 VelocityTracker。

2、绘制思路

我们来看下面这张小盆友手绘的解析图，黑色的框代表CANVAS，蓝色的框代表用户看到的手机屏幕，深蓝色的框是我们真正每次需要绘制的区域。

/**
 * 是否在可视的范围内
 *
 * @param x
 * @return true：在可视的范围内；false：不在可视的范围内
 */
private boolean isInVisibleArea(float x) {
    float dx = x - getScrollX();

    return -mBarInterval <= dx && dx <= mViewWidth + mBarInterval;
}

至此，图像的绘制问题就解决了，代码就不粘贴出来了，童鞋们可以进入传送门 跟着思路捋一捋。

还有一个问题，就是如何让画面跟着手指 移动 起来，这就需要重写 onTouchEvent 方法了，计算出手指的水平移动距离，然后通过 scrollBy 方法让内容移动起来。

值得一提，scrollTo 和 scrollBy 方法，都是针对 内容 或是说 canvas 进行移动。

至于如何让小红点动起来，这里使用了 ValueAnimator 进行从零至一的增加，达到不断接近目标坐标的效果。

对属性动画源码感兴趣的童鞋，可以移步小盆友的另一片博文：带有活力的属性动画源码分析与实战

3、如何惯性滑动起来

经过上一小节，我们已经知道如何绘制这一简单却又常见的柱形图了，但美中不足的就是没有 fling 的效果。所以我们需要先借住 VelocityTracker 进行获取我们当前手指的滑动速度，但这里需要注意的是，要限制其最大和最小速度。因为速度过快和过慢，都会导致交互效果不佳。获取代码如下

mMaximumVelocity = ViewConfiguration.get(context).getScaledMaximumFlingVelocity();
mMinimumVelocity = ViewConfiguration.get(context).getScaledMinimumFlingVelocity();

然后根据我们在 VelocityTracker小结 中的套路，进行获取手指离屏时的水平速度。以下是只保留 VelocityTracker 相关代码

/**
 * 控制屏幕不越界
 *
 * @param event
 * @return
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
   	// 省略无关代码...
   	
    if (mVelocityTracker == null) {
        mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(event);

    if (MotionEvent.ACTION_DOWN == event.getAction()) {
        // 省略无关代码...
    } else if (MotionEvent.ACTION_MOVE == event.getAction()) {
        // 省略无关代码...
    } else if (MotionEvent.ACTION_UP == event.getAction()) {
        // 计算当前速度， 1000表示每秒像素数等
        mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
        // 获取横向速度
        int velocityX = (int) mVelocityTracker.getXVelocity();

        // 速度要大于最小的速度值，才开始滑动
        if (Math.abs(velocityX) > mMinimumVelocity) {
        	// 省略无关代码...
        }

        if (mVelocityTracker != null) {
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }
    return super.onTouchEvent(event);
}

获取完水平的速度，接下来我们需要进行真正的 fling 效果。通过一个线程来进行不断的 移动 画布，从而达到滚动效果（RecycleView中的滚动也是通过线程达到效果，有兴趣的同学可以进入RecycleView 的源码进行查看，该线程类的名字为 ViewFlinger ）。

/**
 * 滚动线程
 */
private class FlingRunnable implements Runnable {

    private Scroller mScroller;

    private int mInitX;
    private int mMinX;
    private int mMaxX;
    private int mVelocityX;

    FlingRunnable(Context context) {
        this.mScroller = new Scroller(context, null, false);
    }

    void start(int initX,
               int velocityX,
               int minX,
               int maxX) {
        this.mInitX = initX;
        this.mVelocityX = velocityX;
        this.mMinX = minX;
        this.mMaxX = maxX;

        // 先停止上一次的滚动
        if (!mScroller.isFinished()) {
            mScroller.abortAnimation();
        }

        // 开始 fling
        mScroller.fling(initX, 0, velocityX,
                0, 0, maxX, 0, 0);
        post(this);
    }

    @Override
    public void run() {

        // 如果已经结束，就不再进行
        if (!mScroller.computeScrollOffset()) {
            return;
        }

        // 计算偏移量
        int currX = mScroller.getCurrX();
        int diffX = mInitX - currX;

        // 用于记录是否超出边界，如果已经超出边界，则不再进行回调，即使滚动还没有完成
        boolean isEnd = false;

        if (diffX != 0) {

            // 超出右边界，进行修正
            if (getScrollX() + diffX >= mCanvasWidth - mViewWidth) {
                diffX = (int) (mCanvasWidth - mViewWidth - getScrollX());
                isEnd = true;
            }

            // 超出左边界，进行修正
            if (getScrollX() <= 0) {
                diffX = -getScrollX();
                isEnd = true;
            }
            
            if (!mScroller.isFinished()) {
                scrollBy(diffX, 0);
            }
            mInitX = currX;
        }

        if (!isEnd) {
            post(this);
        }
    }

    /**
     * 进行停止
     */
    void stop() {
        if (!mScroller.isFinished()) {
            mScroller.abortAnimation();
        }
    }
}

最后就是使用起这个线程，而使用的地方主要有两个点，一个手指按下时（即MotionEvent.ACTION_DOWN）和手指抬起时（即 MotionEvent.ACTION_UP ），删除了不相关代码，剩余代码如下。

public boolean onTouchEvent(MotionEvent event) {
    // 省略不相关代码...

    if (MotionEvent.ACTION_DOWN == event.getAction()) {
		// 省略不相关代码...
        mFling.stop();
    } else if (MotionEvent.ACTION_MOVE == event.getAction()) {
        // 省略不相关代码...
    } else if (MotionEvent.ACTION_UP == event.getAction()) {
        // 省略不相关代码...

        // 速度要大于最小的速度值，才开始滑动
        if (Math.abs(velocityX) > mMinimumVelocity) {

            int initX = getScrollX();

            int maxX = (int) (mCanvasWidth - mViewWidth);
            if (maxX > 0) {
                mFling.start(initX, velocityX, initX, maxX);
            }
        }
        // 省略不相关代码...
    }

    return super.onTouchEvent(event);

}

当我们 MotionEvent.ACTION_DOWN 时，我们需要停止滚动的效果，达到立马停止到手指触碰的地方。

当我们 MotionEvent.ACTION_UP 时，我们需要计算 fling 方法所需的最小值和最大值。根据我们在线程中的计算方式，所以我们的最小值和初始值为 getScrollX() 的值 而最大值为 mCanvasWidth - mViewWidth。

完整代码的github 地址：传送门

五、写在最后

Scroller 和 VelocityTracker 的搭配使用，能让我们的控件使用起来更加丝滑，交互感更强，当然用户体验就越好。最后如果你从这篇文章有所收获，请给我个赞❤️，并关注我吧。文章中如有理解错误或是晦涩难懂的语句，请评论区留言，我们进行讨论共同进步。你的鼓励是我前进的最大动力。如果需要更为深入的探讨，加我微信吧。

作者：猛猛的小盆友