【中软国际】HarmonyOS自定义控件之速度检测VelocityDetector 原创 精华

一般在涉及到滚动的场景时，我们会用到速度检测。比如列表滑动时，我们需要拿到手指抬起时的瞬时速度，来做惯性滚动。又比如在滚动翻页时，我们要根据手指速度来判断是否翻到下一页还是继续保持当页。

接下来我们就来看看HarmonyOS中的VelocityDetector如何使用。

使用方法

VelocityDetector使用起来还是比较简单的，主要是分为以下几步：

• 获取VelocityDetector实例
• 为VelocityDetector添加TouchEvent
• 计算速度
• 获取计算后的速度
• 清除已添加的event

获取实例

通过obtainInstance函数获取实例：

VelocityDetector detector = VelocityDetector.obtainInstance();

添加TouchEvent

在控件的TouchEventListener内调用addEvent函数：

component.setTouchEventListener(new TouchEventListener() {
    @Override
    public boolean onTouchEvent(Component component, TouchEvent ev) {
        detector.addEvent(ev);
        return true;
    }
});

计算速度

一般情况下，我们需要在手指抬起时计算速度，因为我们需要的是手指抬起后的速度值。因此我们可以在TouchEvent.PRIMARY_POINT_UP时调用calculateCurrentVelocity函数来计算速度：

static final int MAX_VELOCITY = 10000;

@Override
public boolean onTouchEvent(Component component, TouchEvent ev) {
    detector.addEvent(ev);
    if (ev.getAction() == TouchEvent.PRIMARY_POINT_UP) {
        detector.calculateCurrentVelocity(1000, MAX_VELOCITY, MAX_VELOCITY);
    }
    return true;
}

calculateCurrentVelocity函数有两个重载：

void calculateCurrentVelocity(int units);
void calculateCurrentVelocity(int units, float maxVxVelocity, float maxVyVelocity)

其中：

• units为单位，1代表像素/毫秒，1000代表像素/秒，以此类推。一般情况下我们都传1000，获取的速度代表手指每秒移动多少像素
• maxVxVelocity为横向最大速度为多少，比如惯性滚动时，如果我们不希望滚动过快，可以设置一个最大速度
• maxVyVelocity为纵向最大速度为多少，比如惯性滚动时，如果我们不希望滚动过快，可以设置一个最大速度

获取速度

在计算速度之后就能直接获取速度值了：

float velocityY = detector.getVerticalVelocity();
float velocityX = detector.getHorizontalVelocity();

// 或者获取速度数组，下标0为横向速度，下标1为纵向速度
float[] velocity = detector.getVelocity();

获取到的速度可能是正值也可能是负值，正负值代表了速度的方向，这个大家可以通过日志自行实验一下。

清除

最后，我们需要清除前面添加的TouchEvent，为新一轮的事件做准备，避免旧的TouchEvent影响了后续的速度计算。这里我们在获取到速度后或者CANCEL事件中，就可以调用clear函数：

if (ev.getAction() == TouchEvent.PRIMARY_POINT_UP) {
    ...
    float[] velocity = detector.getVelocity();
    ...
    detector.clear();
}

if (ev.getAction() == TouchEvent.CANCEL) {
     detector.clear();
}

总结

VelocityDetector目前只能获取一个手指的速度，在多点触控的情况下，暂时没法获取其他手指的速度。

到此我们就获取到了手指抬起时的速度了，至于怎么利用这个速度，后续会在惯性滚动相关的文章中讲述。接下来我们再来分析一下VelocityDetector存在什么问题。

问题

首先我们来了解一下VelocityDetector的基本原理：

我们通过addEvent将TouchEvent传递给VelocityDetector，然后通过calculateCurrentVelocity来计算速度，在这个过程中，VelocityDetector基本上就是通过TouchEvent拿到手指的坐标，然后通过移动距离以及时间来计算速度。当然内部算法远比说的复杂，但是我们只需要记住一个关键变量即可：移动距离。

TouchEvent有两个函数可以拿到手指坐标来计算距离：getPointerPosition与getPointerScreenPosition。VelocityDetector究竟用的哪一个呢？我们可以通过如下代码来实验：

	@Override
    public boolean onTouchEvent(Component component, TouchEvent ev) {
        detector.addEvent(cloneEvent(ev));
        
        return true;
    }

	private TouchEvent cloneEvent(TouchEvent event) {
        return new TouchEvent() {

            @Override
            public int getIndex() {
                System.out.println(TAG + "getIndex");
                return event.getIndex();
            }

            @Override
            public MmiPoint getPointerPosition(int i) {
                System.out.println(TAG + "getPointerPosition");
                return event.getPointerPosition(i);
            }

            @Override
            public MmiPoint getPointerScreenPosition(int i) {
                System.out.println(TAG + "getPointerScreenPosition");
                return event.getPointerScreenPosition(i);
            }

            ......
        };
    }

在手指移动过程中，日志如下：

08-04 17:14:09.296 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex
08-04 17:14:09.296 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getPointerPosition
08-04 17:14:09.297 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex
08-04 17:14:09.297 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getPointerPosition
08-04 17:14:09.469 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex
....

答案很明显，VelocityDetector使用的是getPointerPosition。getPointerPosition获取的坐标是相对于父控件的，而不是屏幕的左上角，那么根据getPointerPosition的描述我们有理由猜测：

当被监听的控件，在手指移动过程中，不断的改变自己的位置，那么通过getPointerPosition获取的手指坐标会加上控件的位移量，导致滑动距离计算偏离预期。

下面我们来实验一下。在父布局中，子控件监听触摸事件，通过getPointerPosition获取手指坐标并计算MOVE与DOWN中坐标的差，并使用setComponentPosition与坐标差改变子控件的位置。

然后我们打印getPointerPosition获取的y坐标，getPointerScreenPosition获取的y坐标，以及移动距离，代码如下：

	Component child = getComponentAt(1);
	child.setTouchEventListener(this);
    int top = child.getTop();

	@Override
    public boolean onTouchEvent(Component component, TouchEvent ev) {
        float y = getY(ev);
        float screenY = getScreenY(ev);
        switch (ev.getAction()) {
            case TouchEvent.PRIMARY_POINT_DOWN:
                downY = y;
                downScreenY = screenY;
                break;

            case TouchEvent.POINT_MOVE:
                float deltaY = y - downY;
                float deltaScreenY = screenY - downScreenY;
                System.out.println(TAG  + "y: " + y + " screenY: " + screenY + ", deltaY: " + deltaY + " deltaScreenY" + deltaScreenY);
                moveChildren((int) deltaY);
                break;
        }

        return true;
    }

	private void moveChildren(int deltaY) {
        child.setComponentPosition(0, top + deltaY, child.getWidth(), top + deltaY + child.getHeight());
    }

日志如下：

y: 1206.0348, screenY: 1905.0348, deltaY: -13.782349, deltaScreenY: -13.782349 
y: 1095.856, screenY: 1781.856, deltaY: -123.96118, deltaScreenY: -136.96118 
y: 1204.7794, screenY: 1780.7794, deltaY: -15.03772, deltaScreenY: -138.03772 
y: 1041.5786, screenY: 1725.5786, deltaY: -178.23853, deltaScreenY: -193.23853 
y: 1094.1056, screenY: 1615.1056, deltaY: -125.71155, deltaScreenY: -303.71155 
y: 972.12244, screenY: 1546.1224, deltaY: -247.6947, deltaScreenY: -372.6947 
y: 1066.4863, screenY: 1518.4863, deltaY: -153.33081, deltaScreenY: -400.3308 
y: 917.2855, screenY: 1463.2855, deltaY: -302.53162, deltaScreenY: -455.53162 
y: 1024.8671, screenY: 1421.8671, deltaY: -194.95007, deltaScreenY: -496.95007 
y: 875.4486, screenY: 1380.4486, deltaY: -344.36853, deltaScreenY: -538.3685 
y: 941.0178, screenY: 1296.0178, deltaY: -278.79932, deltaScreenY: -622.7993 
y: 821.4109, screenY: 1242.4109, deltaY: -398.40625, deltaScreenY: -676.40625 
y: 883.01855, screenY: 1184.0186, deltaY: -336.79858, deltaScreenY: -734.7986 
y: 817.2832, screenY: 1180.2832, deltaY: -402.53394, deltaScreenY: -738.53394 
y: 834.93787, screenY: 1131.9379, deltaY: -384.87927, deltaScreenY: -786.8793 

可以发现通过getPointerPosition计算出来deltaY是忽大忽小而不是线性增加的，并且与getPointerScreenPosition计算的deltaScreenY对比可以发现，deltaY等于deltaScreenY减去上一次的deltaY。也就证明了：通过getPointerPosition获取的手指坐标会加上该控件的位移量。

那么这对VelocityDetector有什么影响呢？VelocityDetector计算速度有一个重要的因素就是距离，在这种情况下距离忽大忽小，就会导致速度计算出来的值会小于正常速度，甚至于正负值都不太一样。

总结一下：当一个控件在该控件的触摸事件内，改变了自己相对于父控件的位置，那么通过VelocityDetector获取的速度就会出现误差。能影响控件位置的函数有setTop（在实验中setTop未能改变控件的位置，还不确定是为什么）、setContentPosition、setComponentPosition，甚至还包括setTranslationY、setTranslationX。并且如果在该控件的触摸事件内，父控件改变了位置，也会产生此问题。

在这种情况下，触摸事件内计算距离的问题好解决，不使用getPointerPosition直接使用getPointerScreenPosition即可。但是VelocityDetector的问题如何解决呢？两个办法：代理法与偏移法。

代理法

通过一个TouchEventProxy，内部维护一个TouchEvent，并将其getPointerPosition实现转发至TouchEvent的getPointerScreenPosition中。

public class TouchEventProxy extends TouchEvent {

    private TouchEvent event;

    public void setEvent(TouchEvent event) {
        this.event = event;
    }

    @Override
    public int getAction() {
        return event.getAction();
    }

    @Override
    public int getIndex() {
        return event.getIndex();
    }

    @Override
    public long getStartTime() {
        return event.getStartTime();
    }

    @Override
    public int getPhase() {
        return event.getPhase();
    }

    @Override
    public MmiPoint getPointerPosition(int i) {
        // 转发至getPointerScreenPosition
        return event.getPointerScreenPosition(i);
    }

    @Override
    public void setScreenOffset(float v, float v1) {
        event.setScreenOffset(v, v1);
    }

    @Override
    public MmiPoint getPointerScreenPosition(int i) {
        return event.getPointerScreenPosition(i);
    }

    @Override
    public int getPointerCount() {
        return event.getPointerCount();
    }

    @Override
    public int getPointerId(int i) {
        return event.getPointerId(i);
    }

    @Override
    public float getForce(int i) {
        return event.getForce(i);
    }

    @Override
    public float getRadius(int i) {
        return event.getRadius(i);
    }

    @Override
    public int getSourceDevice() {
        return event.getSourceDevice();
    }

    @Override
    public String getDeviceId() {
        return event.getDeviceId();
    }

    @Override
    public int getInputDeviceId() {
        return event.getInputDeviceId();
    }

    @Override
    public long getOccurredTime() {
        return event.getOccurredTime();
    }
}

使用起来也很简单：

	TouchEventProxy proxy = new TouchEventProxy();

	@Override
    public boolean onTouchEvent(Component component, TouchEvent ev) {
        proxy.setEvent(ev);
        detector.addEvent(proxy);
        ......
        return true;
    }

位移法

通过反射TouchEvent发现，其内部含有能设置偏移量的函数，该函数会影响getPointerPosition的值。那么我们就可以在触摸事件内，对比getPointerPosition与getPointerScreenPosition的差，并通过函数设置偏移，强制使坐标同步。这里只提供位移法的可行并验证过的思路，代码大家可以自行尝试。

对比

既然有方法可以修复速度的问题，那么我们就可以对比修复前与修复后的速度，到底有多少差距。我们定义两个VelocityDetector实例，一个add代理，一个add原始的event，然后同时获取速度来看看：

    VelocityDetector detector1 = VelocityDetector.obtainInstance();
    VelocityDetector detector2 = VelocityDetector.obtainInstance();
	TouchEventProxy proxy = new TouchEventProxy();

	@Override
    public boolean onTouchEvent(Component component, TouchEvent ev) {
        proxy.setEvent(ev);

        detector1.addEvent(ev);
        detector2.addEvent(proxy);
        
        float y = getY(ev);
        switch (ev.getAction()) {
            case TouchEvent.PRIMARY_POINT_DOWN:
                downY = y;
                break;

            case TouchEvent.POINT_MOVE:
                float deltaY = y - downY;
                moveChildren((int) deltaY);
                break;

            case TouchEvent.PRIMARY_POINT_UP:
                detector1.calculateCurrentVelocity(1000);
                detector2.calculateCurrentVelocity(1000);
                System.out.println(TAG + "detector1: " + detector1.getVerticalVelocity() + ", detector2: " + detector2.getVerticalVelocity());

                detector1.clear();
                detector2.clear();
                break;
        }

        return true;
    }

快速上滑：

08-05 09:36:29.004 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: -5332.0, detector2: -9285.0

慢一点上滑：

08-05 09:35:39.065 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: -1003.0, detector2: -3560.0

先慢速最后快速上滑：

08-05 09:37:04.066 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: -4176.0, detector2: -4491.0

快速下滑：

08-05 09:39:44.785 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: 1955.0, detector2: 6660.0

慢速下滑：

08-05 09:40:32.813 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: 907.0, detector2: 3835.0

先慢速最后快速下滑：

08-05 09:39:15.739 1846-1846/? I System.out:  ParallaxLayout TouchEvent: detector1: -784.0, detector2: 1937.0

总结

可以发现上滑过程采样越少（慢速突然变快的情况）两个速度越接近，但是在下滑过程中，如果速度比较慢甚至会得到一个方向相反的速度。

作者：朱帆

更多原创内容请关注：中软国际 HarmonyOS 技术学院

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。