Android事件及手势

android事件基础及手势，主要关注各种手势的使用及其计算原理 。

Android事件基础

这里我们主要关注概念

事件监听器及事件处理程序

可直接查看 官方文档，此处仅做简要描述；

事件监听器

View类的包含一个回调方法的接口，通过setXXXListener来定义事件处理程序；

事件监听器是 View 类中包含一个回调方法的接口。当用户与界面项目之间的互动触发已注册监听器的 View 对象时，Android 框架将调用这些方法。

事件监听器接口中包含以下回调方法：onClick()，onLongClick()，onFocusChange()，onKey()，onTouch()，onCreateContextMenu()

我们重点关注onTouch：

onTouch()： 在 View.OnTouchListener 中。当用户执行可视为触摸事件的操作时，包括按下、释放或屏幕上的任何移动手势（在项目边界内），系统会调用此方法。

此方法返回一个布尔值，指示监听器是否处理完此事件。重要的是，此事件可以拥有多个分先后顺序的操作。因此，如果在收到 down 操作事件时返回 false，则表示您并未处理完此事件，而且对其后续操作也不感兴趣。因此，您无需执行事件内的任何其他操作，如手势或最终的 up 操作事件。

事件处理程序

直接引用官方文档描述：

如果您从 View 构建自定义组件，则可定义几种回调方法，用作默认事件处理程序。在有关自定义 View 组件的文档中，您将了解一些用于事件处理的常见回调，包括：

• onKeyDown(int, KeyEvent)：在发生新的按键事件时调用。
• onKeyUp(int, KeyEvent)：在发生 key up 事件时调用。
• onTrackballEvent(MotionEvent)：在发生轨迹球动作事件时调用。
• onTouchEvent(MotionEvent)：在发生触屏动作事件时调用。
• onFocusChanged(boolean, int, Rect)：在 View 对象获得或失去焦点时调用。

还有一些其他方法值得您注意，尽管它们并非 View 类的一部分，但可能会直接影响所能采取的事件处理方式。因此，在管理布局内更复杂的事件时，不妨考虑使用以下其他方法：

• Activity.dispatchTouchEvent(MotionEvent)：此方法允许 Activity 在所有触摸事件分派给窗口之前截获它们。
• ViewGroup.onInterceptTouchEvent(MotionEvent)：此方法允许 ViewGroup 监视分派给子级 View 的事件。
• ViewParent.requestDisallowInterceptTouchEvent(boolean)：对父级 View 调用此方法，可指示不应使用 onInterceptTouchEvent(MotionEvent) 截获触摸事件。

这里我们重点关注 onTouchEvent(MotionEvent) 即在发生触屏动作事件时调用的回调方法；

触摸手势

手势可以让用户通过触摸来与屏幕元素进行交互；

用户交户角度的手势划分：

来源及手势的动画效果可以看这里： material.io

Android中用于检测或处理手势的类/方法：

• GestureDetector：支持检测按下、滑动、长按等手势；事件回调方法包括 onDown()、onLongPress()、onFling()、[onScroll()](https://developer.android.google.cn/reference/android/view/GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)) 等。可以将 GestureDetector 与 onTouchEvent() 方法结合使用；
• ScaleGestureDetector：用于检测缩放手势；
• onTouchEvent()： 直接处理onTouchEvent()方法，然后自行根据事件序列来判断手势；
• VelocityTracker：用于跟踪触摸事件的速度，如滑动事件中一般需要结合速度来使用；
• Scroller & OverScroller： 用于收集触摸事件来生成滚动动画所需的数据，OverScroller可以指示滑动后是否到达了内容边缘；

两种不同的滚动: 拖动和滑动

• 拖动是指用户在触摸屏上拖动手指时发生的一种滚动。简单的拖动通常是通过替换 GestureDetector.OnGestureListener 中的 onScroll() 实现的。有关拖动的详细讨论，可参阅拖动和缩放。
• 滑动是用户快速拖动并抬起手指时发生的一种滚动。在用户抬起手指后，您通常需要继续滚动（移动视口），但要减速，直到视口停止移动为止。滑动可以通过替换 GestureDetector.OnGestureListener 中的 onFling() 以及使用滚动条对象来实现。
• 系统会在用户拖动手指以平移内容时调用 onScroll()，系统仅在手指还在屏幕上时才会调用 onScroll()；当手指从屏幕上抬起时，手势便会结束，或开始执行滑动手势（如果手指在抬起之前正在以一定的速度移动）。

接下来我们详细了解触摸手势中各个item的用法；

触摸事件类逐个了解

我们先对涉及的元素类进行单独学习，由于普通的事件监听器比较简单，所以主要关注触摸手势部分，这块先从GestureDetector开始；

GestureDetector 详解

能够识别的手势，是 GestureDetector.OnGestureListener及 ，GestureDetector.SimpleOnGestureListener ,其中 包括如下几种：

问题：

以下通过阅读API文档并编写简单的示例代码，通过操作触发对应的手势来观察以确定以下问题的答案。

1. GestureDetector 各个事件发生的关系，有无交叉？
   • 按下-释放可能的事件序列：
     • onDown - onSingleTapUp： 按下，迅速抬起（干净利落的）
     • onDown - onShowPress - onSingleTapUp：按下，缓慢抬起
     • onDown - onShowPress - onLongPress：按下，稍有延迟的抬起
   • onScroll触发的可能事件序列：
     • longPress 被触发之后，无法再触发onScroll
     • onDown - onScroll
     • onDown - onShowPress - onScroll
   • onFling的触发序列
     • 触发onScroll - 多个 onScroll - onFling
2. GestureDetector.SimpleOnGestureDetector
   • 单次点击事件序列：
     • onDown - onSingleTapUp - onSingleTapConfirmed
     • onDown - onShowPress - onSingleTapUp - onSingleTapConfirmed （按下后稍有停顿）
   • 双击可能的事件序列：
     • onDown - onShowPress - onSingleTapUp - onDoubleTap_down - onDoubleTapEvent_down - onDown - onShowPress - onDoubleTapEvent_up
3. 滑动onFling和拖动onScroll的区别时机？
   • onScroll一定先发生，如果抬起时有一定速度，就会触发onFling
4. onSingleTapUp(upEvent) 及 onSingleTapConfirmed(event)的区别？
   • onSingleTapConfirmed 只会在确认当前tap之后不会有另外一次tap构成double-tap手势的情况下才会被触发，也就是说onSingleTapUp实际上有可能时doubleTap的一次事件，如果确定只能又明确的单次点击事件触发，就需要区分
5. onDoubleTab 和 onDoubleTapEvent 之前的区别？
   • onDoubleTab 只包含down事件，而onDoubleTapEvent则还包含其他事件（move，up）

Scroller 详解

scroller 本身并不与View关联，仅用于做辅助的动画计算，使用起来有以下步骤：

1. 初始化
2. 通过startScroll或fling方法设定计算模型及计算所需要的参数
3. 定期调用 computeScrollOffset 进行运算，然后取出运算后的值
4. 使用运算后的值动态的改变View的属性实现滚动效果

计算模型：

计算结果值

ScaleGestureDetector 详解

使用提供的 MotionEvent 事件序列来检测缩放手势，当检测到对应的缩放事件时，会通过 OnScaleGestureListener 来通知用户；

使用流程：

• 为 View 创建 ScaleGestureDetector 实例；
• 在 View.onTouchEvent(MotionEvent) 方法中调用 ScaleGestureDetector 实例的 onTouchEvent 方法；

基本用法

• 构造函数

• 方法及属性

• 如何使用？

  1. 构造侦听器对象；
  2. 在 onTouchEvent 回调中调用侦听器对象的 onTouchEvent方法并传入MotionEvent；

  var mScaleGestureDetector = ScaleGestureDetector(this,this)
  
  override fun onTouchEvent(event: MotionEvent?): Boolean {
          return mScaleGestureDetector.onTouchEvent(event) || super.onTouchEvent(event)
  }
  

深入探究

1. 如何触发手势？
   • 两个手指张开闭合就可以
2. 如何消费手势？
3. 如何利用手势的参数实现缩放的动画/动作？

如何消费手势？

以下是测试过程中的detector的属性变化数据，可以发现如下规律：

1. onScaleBegin 时 inProgress为false

2. currentSpan^{^2} = currentSpanX^{^2} * currentSpanY^{^2} ，即currentSpan为两个手指总共移动的距离，如下图所示：

• 手指1移动的轨迹为蓝色矩形中的对角线，手指2移动的轨迹为红色矩形的对角线

• currentSpan 就是两个手指移动的对角线相加，currentSpanX和currentSpanY分别为蓝色矩形和红色矩形按如下方式拼接成一个大的矩形之后的两条边；

3. 每次事件的previouSpan的值都等于上次事件的currentSpan的值；
4. FocusX和FocusY即为事件回调触发时两个手指连线的中点坐标，随着手指的不断移动，焦点也是不断的变化的；
5. 大部分timeDelta都在16-17ms左右，所以不应在回调方法中执行耗时事件，对应逻辑应放置到Runnable中去执行；
6. scaleBegin和第一次onScale回调的各项值都一致，除了scaleBegin的isInProgress为FALSE；
7. 缩放比例（scaleFactor）为1.0时，没有缩放；

如何利用手势的参数实现缩放的动画/动作？

假设我现在需要在检测到缩放手势时同步的对ImageView执行缩放动作，此时应该怎么做？

• 如何对ImageView的图片进行缩放？
  • 根据缩放比例不断的重新设置View的scaleX及scaleY的值；
• 每次事件触发都进行缩放操作？还是积累一定程度之后进行？
  • 由于每次变化的时间非常短，所以我们应该在每次onScale方法触发时执行变换；

如何让View根据手势效果进行变换？

通过之前对手势侦听器，缩放手势侦听器及滚动条类的学习及分析，我们知道了各个类的基本用途：

• GeostureDetector： 辅助侦听判断down，tag，doubletap，scroll，fling等手势并在检测到手势后回调对应的方法，给出事件相关的参数数据；
• ScaleGeostureDetector： 辅助侦听判断缩放手势，并在缩放手势发生时通过回调对应方法来通知我们对应事件的发生，并给出事件相关的参数数据；
• Scroller： 用于辅助计算生成滚动过程中的一系列值的序列；

可以方向，上述类只是告诉你事件发生了，还有告诉你事件的相关参数，如滚动事件的滚动距离，fling事件的滑动速度，等等，但是都没有涉及到如何变换将这些事件反映到界面的变化上，那么我们如何将上述的事件变化反映到界面上呢？

View基础属性

部分变化效果都是针对View/ViewGroup来说的，要想改变View，就得改变其属性，如：

• 滑动时改变TransitionX，TransitionY
• 缩放时改变View的scaleX/scaleY

我们需要研究View中有哪些属性，属性如何影响View的展示效果，以下通过API文档的setXXX属性列出View的部分属性：

与视图变化相关的最基本的就是加粗部分的属性，总结起来就是位置，大小，透明度，旋转，缩放，平移。其他具体的子View则可能引入自己的属性；

那么旋转/平移/缩放究竟改变的是啥？

• 滚动及平移（scroll/fling）：改变x和y（亦可以通过translationX/Y，最终都是改变了x和y）
• 缩放： 改变scaleX/scaleY/pivotX/pivotY

Matrix解析

用途： matrix存储一个3x3的矩阵，用于对坐标进行变换；

$\begin{bmatrix} MSCALE\_X & MSKEW\_X & MTRANS\_X \\ MSKEW\_Y & MSCALE\_Y & MTRANS\_Y \\ MPERSP\_0 & MPERSP\_1 & MPERSP\_2 \\ \end{bmatrix}$

矩阵各个元素的用途：

Matrix提供一系列的辅助变换函数，每种类型有 pre,post,set三种操作方式，矩阵的乘法运算顺序不一致结果不同，pre表示前（preconcats），post表示后（postconcats），set为直接设置；

postScale方法来对坐标后接触缩放变换，有两种变体：

post和set及pre的区别

scale

Matrix如何与ImageView结合

那么我们如何才能将Matrix同ImageView或者Canvas或者Bitmap结合起来呢？

查找Canvas的相关方法，可以看到setMatrix方法，

public void setMatrix (Matrix matrix)

Completely replace the current matrix with the specified matrix. If the matrix parameter is null, then the current matrix is reset to identity. Note: it is recommended to use concat(android.graphics.Matrix), scale(float, float), translate(float, float) and rotate(float) instead of this method.

同时下面温馨提示，让我们使用其他方法，其中涉及到矩阵的就有contact，所以我们研究下contact方法：

contact方法接受一个Matrix对象，可以将参数中的矩阵预连接到canvas本身的矩阵上（Preconcat the current matrix with the specified matrix.）；假设当前矩阵为C，要连接的矩阵为S，这里的预连接（preconcat）指的是：C = S x C

单一效果实现

拖动效果实现

1. 初始化GestureDetector

   private lateinit var mDetector: GestureDetector
   
   override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           mDetector = GestureDetector(this, simpleDetectorListener)
   }
   

2. 使用 GestureDetector 侦听 onScroll 手势

   override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
   	return mDetector.onTouchEvent(ev)
   }
   

3. GestureDetector 的 onScroll 回调方法中处理滚动事件

   override fun onScroll(e1: MotionEvent?, e2: MotionEvent?, distanceX: Float, distanceY: Float): Boolean {
       // 改变ImageView 的x和y
       imageView.x -= distanceX
       imageView.y -= distanceY
       return true
   }
   

Fling-投掷效果实现

1. 初始化GestureDetector及 Scroller

   private lateinit var mDetector: GestureDetector
   private lateinit var mScroller: Scroller
   override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           mDetector = GestureDetector(this, simpleDetectorListener)
       	mScroller = Scroller(this)
   }
   

2. 在onTouchEvent或dispatchTouchEvent中使用GestureDetector 侦听 onFling 手势

   override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
           return mDetector.onTouchEvent(ev)
   }
   

3. onFling回调中使用Scroller 完成滚动辅助计算并从Scroller中获取参数来更新视图的x,y相关属性

   override fun onFling(e1: MotionEvent?, e2: MotionEvent?, velocityX: Float, velocityY: Float): Boolean {
           return handleFling(e1, e2, velocityX, velocityY)
   }
   
   private fun handleFling(down: MotionEvent?, move: MotionEvent?, velocityX: Float, velocityY: Float): Boolean {
           // 停止
           mScroller.forceFinished(true)
           val minX: Int = (imageView.pivotX * (1 - imageView.scaleX)).roundToInt()
           val minY: Int = (imageView.pivotY * (1 - imageView.scaleY)).roundToInt()
           val maxX: Int = ((imageView.width - imageView.pivotX) * (imageView.scaleX - 1)).roundToInt()
           val maxY: Int = ((imageView.height - imageView.pivotY) * (imageView.scaleY - 1)).roundToInt()
           mScroller.fling(imageView.x.toInt(), imageView.y.toInt(), velocityX.toInt(), velocityY.toInt(),
                   minX, maxX, minY, maxY)
           // Invalidate to request a redraw
           isFling = true
           postFling()
           return true
   }
   
   private fun postFling() {
       imageView.postDelayed(flingRunnable, 16L)
   }
   
   private val flingRunnable = Runnable {
           if (!mScroller.isFinished ) {
               // 计算滚动后的参数
               mScroller.computeScrollOffset()
               // 从滚动器中获取计算出的值并更新图片的x,y属性
               imageView.x = mScroller.currX.toFloat()
               imageView.y = mScroller.currY.toFloat()
               // 定期刷新
               postFling()
           }
   }
   

View缩放后fling边界计算

说明：

1. 缩放前宽：width

2. 缩放前高：height

3. 缩放比例：scale

4. 缩放焦点坐标：focusX，focusY

5. minX = - focusX * （scale-1）

6. minY = - focusY * （scale-1）

7. maxX = （width-focusX）*（scale-1）

8. maxY = （height-focusY）*（scale-1）

ScaleGestureDetector 实现双指缩放效果

1. 初始化 ScaleGestureDetector ；

       private lateinit var mScaleDetector: ScaleGestureDetector
       private val scaleDetectorListener: ScaleGestureDetector.OnScaleGestureListener = object : ScaleGestureDetector.OnScaleGestureListener {
   
           override fun onScaleBegin(detector: ScaleGestureDetector?): Boolean {
               isScaling = true
               scaleStartX = detector!!.focusX
               scaleStartY = detector.focusY
               return true
           }
   
           override fun onScale(detector: ScaleGestureDetector?): Boolean {
               Timber.tag("GestureDetector").d("handleScale onScale")
               detector?.run {
                   handleScale(detector)
               }
               return true
           }
   
   
           override fun onScaleEnd(detector: ScaleGestureDetector?) {
               Timber.tag("GestureDetector").d("handleScale onScaleEnd")
               isScaling = false
           }
       }
   

2. 事件分发时调用 ScaleGestureDetector 的 onTouchEvent 方法传递事件序列；

3. 在scale事件回调方法中处理scale事件-根据事件参数更新View的缩放（scaleX，scaleY）属性完成视图更新；

参考文章

matrix参考

• Android matrix.postScale的用法
• Android Matrix
• Matrix学习1、基础的知识
• MathJax基本的使用方式
• Typora Math Block
• What does it mean to “preconcat” a matrix in Android?
• Android Matrix的pre、post理解

android手势

• 手势类型- Material.io