HarmonyOS自定义控件之速度检测VelocityDetector

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

[[419340]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

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

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

使用方法

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

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

获取实例

通过obtainInstance函数获取实例:

  1. VelocityDetector detector = VelocityDetector.obtainInstance(); 

添加TouchEvent

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

  1. component.setTouchEventListener(new TouchEventListener() { 
  2.     @Override 
  3.     public boolean onTouchEvent(Component component, TouchEvent ev) { 
  4.         detector.addEvent(ev); 
  5.         return true
  6.     } 
  7. }); 

计算速度

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

  1. static final int MAX_VELOCITY = 10000; 
  2.  
  3. @Override 
  4. public boolean onTouchEvent(Component component, TouchEvent ev) { 
  5.     detector.addEvent(ev); 
  6.     if (ev.getAction() == TouchEvent.PRIMARY_POINT_UP) { 
  7.         detector.calculateCurrentVelocity(1000, MAX_VELOCITY, MAX_VELOCITY); 
  8.     } 
  9.     return true

calculateCurrentVelocity函数有两个重载:

  1. void calculateCurrentVelocity(int units); 
  2. void calculateCurrentVelocity(int units, float maxVxVelocity, float maxVyVelocity) 

其中:

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

获取速度

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

  1. float velocityY = detector.getVerticalVelocity(); 
  2. float velocityX = detector.getHorizontalVelocity(); 
  3.  
  4. // 或者获取速度数组,下标0为横向速度,下标1为纵向速度 
  5. float[] velocity = detector.getVelocity(); 

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

清除

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

  1. if (ev.getAction() == TouchEvent.PRIMARY_POINT_UP) { 
  2.     ... 
  3.     float[] velocity = detector.getVelocity(); 
  4.     ... 
  5.     detector.clear(); 
  6.  
  7. if (ev.getAction() == TouchEvent.CANCEL) { 
  8.      detector.clear(); 

总结

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

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

问题

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

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

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

  1. @Override 
  2.     public boolean onTouchEvent(Component component, TouchEvent ev) { 
  3.         detector.addEvent(cloneEvent(ev)); 
  4.          
  5.         return true
  6.     } 
  7.  
  8.     private TouchEvent cloneEvent(TouchEvent event) { 
  9.         return new TouchEvent() { 
  10.  
  11.             @Override 
  12.             public int getIndex() { 
  13.                 System.out.println(TAG + "getIndex"); 
  14.                 return event.getIndex(); 
  15.             } 
  16.  
  17.             @Override 
  18.             public MmiPoint getPointerPosition(int i) { 
  19.                 System.out.println(TAG + "getPointerPosition"); 
  20.                 return event.getPointerPosition(i); 
  21.             } 
  22.  
  23.             @Override 
  24.             public MmiPoint getPointerScreenPosition(int i) { 
  25.                 System.out.println(TAG + "getPointerScreenPosition"); 
  26.                 return event.getPointerScreenPosition(i); 
  27.             } 
  28.  
  29.             ...... 
  30.         }; 
  31.     } 

在手指移动过程中,日志如下:

  1. 08-04 17:14:09.296 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex 
  2. 08-04 17:14:09.296 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getPointerPosition 
  3. 08-04 17:14:09.297 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex 
  4. 08-04 17:14:09.297 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getPointerPosition 
  5. 08-04 17:14:09.469 24871-24871/com.ryan.ohos.parallaxlayout I System.out:  ParallaxLayout TouchEvent: getIndex 
  6. .... 

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

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

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

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

  1. Component child = getComponentAt(1); 
  2. child.setTouchEventListener(this); 
  3.    int top = child.getTop(); 
  4.  
  5. @Override 
  6.    public boolean onTouchEvent(Component component, TouchEvent ev) { 
  7.        float y = getY(ev); 
  8.        float screenY = getScreenY(ev); 
  9.        switch (ev.getAction()) { 
  10.            case TouchEvent.PRIMARY_POINT_DOWN: 
  11.                downY = y; 
  12.                downScreenY = screenY; 
  13.                break; 
  14.  
  15.            case TouchEvent.POINT_MOVE: 
  16.                float deltaY = y - downY; 
  17.                float deltaScreenY = screenY - downScreenY; 
  18.                System.out.println(TAG  + "y: " + y + " screenY: " + screenY + ", deltaY: " + deltaY + " deltaScreenY" + deltaScreenY); 
  19.                moveChildren((int) deltaY); 
  20.                break; 
  21.        } 
  22.  
  23.        return true
  24.    } 
  25.  
  26. private void moveChildren(int deltaY) { 
  27.        child.setComponentPosition(0, top + deltaY, child.getWidth(), top + deltaY + child.getHeight()); 
  28.    } 

日志如下:

  1. y: 1206.0348, screenY: 1905.0348, deltaY: -13.782349, deltaScreenY: -13.782349  
  2. y: 1095.856, screenY: 1781.856, deltaY: -123.96118, deltaScreenY: -136.96118  
  3. y: 1204.7794, screenY: 1780.7794, deltaY: -15.03772, deltaScreenY: -138.03772  
  4. y: 1041.5786, screenY: 1725.5786, deltaY: -178.23853, deltaScreenY: -193.23853  
  5. y: 1094.1056, screenY: 1615.1056, deltaY: -125.71155, deltaScreenY: -303.71155  
  6. y: 972.12244, screenY: 1546.1224, deltaY: -247.6947, deltaScreenY: -372.6947  
  7. y: 1066.4863, screenY: 1518.4863, deltaY: -153.33081, deltaScreenY: -400.3308  
  8. y: 917.2855, screenY: 1463.2855, deltaY: -302.53162, deltaScreenY: -455.53162  
  9. y: 1024.8671, screenY: 1421.8671, deltaY: -194.95007, deltaScreenY: -496.95007  
  10. y: 875.4486, screenY: 1380.4486, deltaY: -344.36853, deltaScreenY: -538.3685  
  11. y: 941.0178, screenY: 1296.0178, deltaY: -278.79932, deltaScreenY: -622.7993  
  12. y: 821.4109, screenY: 1242.4109, deltaY: -398.40625, deltaScreenY: -676.40625  
  13. y: 883.01855, screenY: 1184.0186, deltaY: -336.79858, deltaScreenY: -734.7986  
  14. y: 817.2832, screenY: 1180.2832, deltaY: -402.53394, deltaScreenY: -738.53394  
  15. 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中。

  1. public class TouchEventProxy extends TouchEvent { 
  2.  
  3.     private TouchEvent event; 
  4.  
  5.     public void setEvent(TouchEvent event) { 
  6.         this.event = event; 
  7.     } 
  8.  
  9.     @Override 
  10.     public int getAction() { 
  11.         return event.getAction(); 
  12.     } 
  13.  
  14.     @Override 
  15.     public int getIndex() { 
  16.         return event.getIndex(); 
  17.     } 
  18.  
  19.     @Override 
  20.     public long getStartTime() { 
  21.         return event.getStartTime(); 
  22.     } 
  23.  
  24.     @Override 
  25.     public int getPhase() { 
  26.         return event.getPhase(); 
  27.     } 
  28.  
  29.     @Override 
  30.     public MmiPoint getPointerPosition(int i) { 
  31.         // 转发至getPointerScreenPosition 
  32.         return event.getPointerScreenPosition(i); 
  33.     } 
  34.  
  35.     @Override 
  36.     public void setScreenOffset(float v, float v1) { 
  37.         event.setScreenOffset(v, v1); 
  38.     } 
  39.  
  40.     @Override 
  41.     public MmiPoint getPointerScreenPosition(int i) { 
  42.         return event.getPointerScreenPosition(i); 
  43.     } 
  44.  
  45.     @Override 
  46.     public int getPointerCount() { 
  47.         return event.getPointerCount(); 
  48.     } 
  49.  
  50.     @Override 
  51.     public int getPointerId(int i) { 
  52.         return event.getPointerId(i); 
  53.     } 
  54.  
  55.     @Override 
  56.     public float getForce(int i) { 
  57.         return event.getForce(i); 
  58.     } 
  59.  
  60.     @Override 
  61.     public float getRadius(int i) { 
  62.         return event.getRadius(i); 
  63.     } 
  64.  
  65.     @Override 
  66.     public int getSourceDevice() { 
  67.         return event.getSourceDevice(); 
  68.     } 
  69.  
  70.     @Override 
  71.     public String getDeviceId() { 
  72.         return event.getDeviceId(); 
  73.     } 
  74.  
  75.     @Override 
  76.     public int getInputDeviceId() { 
  77.         return event.getInputDeviceId(); 
  78.     } 
  79.  
  80.     @Override 
  81.     public long getOccurredTime() { 
  82.         return event.getOccurredTime(); 
  83.     } 

 使用起来也很简单:

  1. TouchEventProxy proxy = new TouchEventProxy(); 
  2.  
  3.     @Override 
  4.     public boolean onTouchEvent(Component component, TouchEvent ev) { 
  5.         proxy.setEvent(ev); 
  6.         detector.addEvent(proxy); 
  7.         ...... 
  8.         return true
  9.     } 

位移法

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

对比

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

  1.   VelocityDetector detector1 = VelocityDetector.obtainInstance(); 
  2.    VelocityDetector detector2 = VelocityDetector.obtainInstance(); 
  3. TouchEventProxy proxy = new TouchEventProxy(); 
  4.  
  5. @Override 
  6.    public boolean onTouchEvent(Component component, TouchEvent ev) { 
  7.        proxy.setEvent(ev); 
  8.  
  9.        detector1.addEvent(ev); 
  10.        detector2.addEvent(proxy); 
  11.         
  12.        float y = getY(ev); 
  13.        switch (ev.getAction()) { 
  14.            case TouchEvent.PRIMARY_POINT_DOWN: 
  15.                downY = y; 
  16.                break; 
  17.  
  18.            case TouchEvent.POINT_MOVE: 
  19.                float deltaY = y - downY; 
  20.                moveChildren((int) deltaY); 
  21.                break; 
  22.  
  23.            case TouchEvent.PRIMARY_POINT_UP: 
  24.                detector1.calculateCurrentVelocity(1000); 
  25.                detector2.calculateCurrentVelocity(1000); 
  26.                System.out.println(TAG + "detector1: " + detector1.getVerticalVelocity() + ", detector2: " + detector2.getVerticalVelocity()); 
  27.  
  28.                detector1.clear(); 
  29.                detector2.clear(); 
  30.                break; 
  31.        } 
  32.  
  33.        return true
  34.    } 

快速上滑:

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

慢一点上滑:

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

先慢速最后快速上滑:

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

快速下滑:

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

慢速下滑:

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

先慢速最后快速下滑:

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

总结

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

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-08-16 14:45:38

鸿蒙HarmonyOS应用

2021-09-06 14:58:23

鸿蒙HarmonyOS应用

2021-09-02 10:00:42

鸿蒙HarmonyOS应用

2015-02-11 17:49:35

Android源码自定义控件

2009-06-08 20:13:36

Eclipse自定义控

2021-08-11 14:29:20

鸿蒙HarmonyOS应用

2009-07-31 10:23:09

ASP.NET源码DateTimePic

2009-08-06 09:18:01

ASP.NET自定义控ASP.NET控件开发

2013-04-19 10:14:24

2017-02-17 09:37:12

Android自定义控件方法总结

2009-08-06 17:52:45

ASP.NET控件开发自定义控件

2022-06-30 14:02:07

鸿蒙开发消息弹窗组件

2021-10-26 10:07:02

鸿蒙HarmonyOS应用

2022-07-15 16:45:35

slider滑块组件鸿蒙

2011-08-18 09:44:33

iPhone SDK仪表控件UIDialView

2009-09-03 13:34:03

.NET自定义控件

2021-12-24 15:46:23

鸿蒙HarmonyOS应用

2021-11-01 10:21:36

鸿蒙HarmonyOS应用

2014-09-24 11:42:46

AndroidButton

2022-06-20 15:43:45

switch开关鸿蒙
点赞
收藏

51CTO技术栈公众号