Java技术qq交流群：JavaDream：251572072
2013/5/14
58_拖拉功能与多点触摸
-------------------------------------
android零碎要点：
理论上 Android可以处理 多达256 个手指的触摸，大概只有章鱼哥能享受这种技术带来的便利。就编程人员来说，编写多点触摸和单点触摸的方式几乎一模一样。其奥秘在于MotionEvent不仅可以封装单点触摸的消息，也可以封装多点触摸的消息。
在处理单点触摸中，我们用到MotionEvent.ACTION_DOWN、ACTION_UP、ACTION_MOVE，然后用一个Switch来分别进行处理。翻开Android文档，我们就可以清楚的知道他们都是一些常量。
ACTION_DOWN 0x00000000 ACTION_UP 0x00000001 ACTION_MOVE 0x00000002
细心看看文档发现还有一些别的常量：
ACTION_POINTER_1_DOWN 0x00000005 ACTION_POINTER_1_UP 0x00000006
ACTION_POINTER_2_DOWN 0x00000105 ACTION_POINTER_2_UP 0x00000106
ACTION_POINTER_3_DOWN 0x00000205 ACTION_POINTER_3_UP 0x00000206
这些常量正是我们用来处理多点触摸的工具。
1.public class MultiTouchActivity extends Activity {
2./** Called when the activity is first created. */
3.@Override
4.public void onCreate(Bundle savedInstanceState) {
5.super.onCreate(savedInstanceState);
6.setContentView(R.layout.main);
7.}
8.@Override
9.public boolean onTouchEvent(MotionEvent event){
10.int action = event.getAction();
11.switch(action){
12.case MotionEvent.ACTION_POINTER_1_DOWN:
13.showMessage("第一个手指按下");
14.break;
15.case MotionEvent.ACTION_POINTER_1_UP:
16.showMessage("第一个手指抬起");
17.break;
18.case MotionEvent.ACTION_POINTER_2_DOWN:
19.showMessage("第二个手指按下");
20.break;
21.case MotionEvent.ACTION_POINTER_2_UP:
22.showMessage("第二个手指抬起");
23.break;
24.case MotionEvent.ACTION_POINTER_3_DOWN:
25.showMessage("第三个手指按下");
26.break;
27.case MotionEvent.ACTION_POINTER_3_UP:
28.showMessage("第三个手指抬起");
29.break;
30.}
31.return true;
32.}
33.private void showMessage(String s){
34.Toast toast = Toast.makeText(getApplicationContext(), s, Toast.LENGTH_SHORT);
35.toast.show();
36.}
37.}
复制代码
上面的代码和我们处理单点触摸的方式一模一样。借助这个小小的例子，我们看看Android产生多点消息的机制。
情况一：手指1 按下 没有出现提示； 手指1 抬起 也没有出现提示；
这是很显然的，因为这时产生的消息是ACTION_DOWN 和 ACTION_UP。
情况二：手指1按下 没有提示；
手指2按下 出现手指2按下的提示；手指2抬起 出现手指2抬起的提示。
情况三：手指1 按下 没有提示；
手指2 按下 出现提示；
这时 手指1 提起 出现手指1提起的提示；手指1按下 出现手指1按下的提示；
情况四：大家可以放三个手指去尝试下，看看Android 是怎样产生这些消息的。
根据我们实验的结果，可以得到一句话：当屏幕上有一个手指时 可以完美的产生2点触摸的消息。 当屏幕上有2个手指时可以完美的产生3点触摸消息，以此类推……。所谓的完美就是指你能正确的得到到底是那个手指进行了操作。
这只是一个小小的深入，我们查看文档时，并没有发现ACTION_POINTER_2_MOVE这样的常量。当第二个手指移动时，我们怎么处理这种事件呢？其实，这样的事件常量都是有规律的单点触摸时DOWN 的最后两位是00，UP是01，MOVE是02.多点触摸时，DOWN是05，UP是06， 你可以猜猜MOVE会不会是07呢？再者，POINTER_1 的34位是00，POINTER_2的34位是01，POINTER_3是02。我们几乎可以肯定的说所谓的ACTION_POINTER_2_MOVE就是0x00000107了。
1.public class Pointer2DrawActivity extends Activity {
2./** Called when the activity is first created. */
3.ImageView imgView;
4.Bitmap bitmap;
5.Canvas canvas;
6.Paint paint;
7.private static final int ACTION_POINTER_2_MOVE = 0x00000107;
8.@Override
9.public void onCreate(Bundle savedInstanceState) {
10.super.onCreate(savedInstanceState);
11.setContentView(R.layout.main);
12.imgView = (ImageView)findViewById(R.id.imgView);
13.Display currentDisplay = getWindowManager().getDefaultDisplay();
14.float dw = currentDisplay.getWidth();
15.float dh = currentDisplay.getHeight();
16.bitmap = Bitmap.createBitmap((int)dw, (int)dh, Config.ARGB_8888);
17.canvas = new Canvas(bitmap);
18.paint = new Paint();
19.paint.setColor(Color.GREEN);
20.imgView.setImageBitmap(bitmap);
21.}
22.@Override
23.public boolean onTouchEvent(MotionEvent event){
24.int action = event.getAction();
25.float x = 0;
26.float y = 0;
27.if(action == ACTION_POINTER_2_MOVE){
28.x = event.getX();
29.y = event.getY();
30.canvas.drawPoint(x, y, paint);
31.imgView.invalidate();
32.}
33.return true;
34.}
35.}
复制代码
这个神奇的Pointer2Draw想要你的第二个手指绘制一些点。一个手指是什么也绘制不了的……
前面写了一个Pointer2Draw的小程序。这个程序的神奇之处在于，你永远也别想绘制出任何东西。原因是根本没有所谓 的0x00000107。下面看看如何正确的处理多点触摸，光靠event.getAction()吃饭的时代已经终结了
1.int pointerCount = event.getPointerCount();
2.
3.int pointerCount = event.getPointerCount();
复制代码
这个函数具体返回值受到物理设备的限制，我费了很大力气将十个手指放到了我的手机上，得到的结果仍然是8。
(2)得到手指的ID：Android提供了两个掩码方便我们操作ACTION_POINTER_ID_MASK 0x0000ff00,和ACTION_POINTER_ID_SHIFT 0x00000008。
1.if(pointerCount>1){
2.pointerId = (action & MotionEvent.ACTION_POINTER_ID_MASK)>>>
3.MotionEvent.ACTION_POINTER_ID_SHIFT;
4.}
5.
6.if(pointerCount>1){
7.pointerId = (action & MotionEvent.ACTION_POINTER_ID_MASK)>>>
8.MotionEvent.ACTION_POINTER_ID_SHIFT;
9.}
复制代码
(3)利用ID获得坐标信息：
1.float x = event.getX(pointerId);//获得第二个手指的坐标
2.float y = event.getY(pointerId);
3.
4.float x = event.getX(pointerId);//获得第二个手指的坐标
5.float y = event.getY(pointerId);
复制代码
下面终于可以让Pointer2Draw运行起来了。
1.public class Pointer2DrawActivity extends Activity implements OnTouchListener{
2./** Called when the activity is first created. */
3.ImageView imgView;
4.Bitmap bitmap;
5.Canvas canvas;
6.Paint paint;
7.@Override
8.public void onCreate(Bundle savedInstanceState) {
9.super.onCreate(savedInstanceState);
10.setContentView(R.layout.main);
11.imgView = (ImageView)findViewById(R.id.imgView);
12.Display currentDisplay = getWindowManager().getDefaultDisplay();
13.float dw = currentDisplay.getWidth();
14.float dh = currentDisplay.getHeight();
15.bitmap = Bitmap.createBitmap((int)dw, (int)dh, Config.ARGB_8888);
16.canvas = new Canvas(bitmap);
17.paint = new Paint();
18.paint.setColor(Color.GREEN);
19.paint.setStrokeWidth((float) 10.00);//设置笔刷大小，自己的屏幕太犀利了
20.imgView.setImageBitmap(bitmap);
21.imgView.setOnTouchListener(this);
22.}
23.@Override
24.public boolean onTouch(View v, MotionEvent event) {
25.int pointerCount = event.getPointerCount();
26.int pointerId = 0;
27.int action = （event.getAction()&MotionEvent.ACTION_MASK） % 5;//统一单点和多点
28.switch(action){
29.case MotionEvent.ACTION_DOWN:
30.if(pointerCount>1){
31.pointerId = (event.getAction()&MotionEvent.ACTION_POINTER_ID_MASK)>>>
32.MotionEvent.ACTION_POINTER_ID_SHIFT;
33.}
34.break;
35.case MotionEvent.ACTION_MOVE:
36.if(pointerCount == 2){
37.float x = event.getX(1);
38.float y = event.getY(1);
39.canvas.drawPoint((int)x, (int)y, paint);
40.imgView.invalidate();
41.}
42.break;
43.case MotionEvent.ACTION_UP:
44.break;
45.}
46.
47.return true;
48.
49.}
50.}
复制代码
好了，Pointer2Draw终于按照想要的方式运行了。
在进入手势操作前，先来看看一些处理触摸时遗漏了的要点--VelocityTracker。顾名思义，VelocityTracker就是速度跟踪的意思。我们可以获得触摸点的坐标，根据按下的时间可以简单的计算出速度的大小。但是这样会令我们的代码混乱。Android直接提供了一种方式来方便我们获得触摸的速度。
public class VelocityTrackerActivityActivity extends Activity {
/** Called when the activity is first created. */
TextView textView;
private VelocityTracker vTracker = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
textView = (TextView)findViewById(R.id.textView);
}
@Override
public boolean onTouchEvent(MotionEvent event){
int action = event.getAction();
switch(action){
case MotionEvent.ACTION_DOWN:
if(vTracker == null){
vTracker = VelocityTracker.obtain();
}else{
vTracker.clear();
}
vTracker.addMovement(event);
break;
case MotionEvent.ACTION_MOVE:
vTracker.addMovement(event);
vTracker.computeCurrentVelocity(1000);
textView.setText("the x velocity is "+vTracker.getXVelocity());
textView.append("the y velocity is "+vTracker.getYVelocity());
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
vTracker.recycle();
break;
}
event.recycle();
return true;
}
}
复制代码
VelocityTracker不仅可以处理单点的速度，也可以获得多点的速度。这和处理多点触摸的方式是一样的，传入一个ID就可以了。
VelocityTracker获得的速度是有正负之分，computerCurrentVelocity（）可以设置单位。1000 表示每秒多少像素（pix/second),
1代表每微秒多少像素（pix/millisecond)。
-------------------------------------------------------------------------------------
1.新建android项目：DraScale对图片进行拖拉和缩放：
2./DraScale/src/com/credream/drascale/DraScaleActivity.java
package com.credream.drascale;
import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
public class DraScaleActivity extends Activity {
private ImageView imageView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//找到这个imageView
imageView = (ImageView) this.findViewById(R.id.imageView);
//给这张图片设置触摸监听事件。
imageView.setOnTouchListener(new TouchListener());
}
private final class TouchListener implements OnTouchListener{
//PointF android中的一个类，用来声明一个点
private PointF startPoint = new PointF();
//注意，这里是一个矩阵对象。
private Matrix matrix = new Matrix();
//这个矩阵对象，用来存放用户当前手指的位置。
private Matrix currentMatrix = new Matrix();
private int mode = 0;//表示是拖拉还是缩放图片的模式
private static final int DRAG = 1;//这个时候表示拖拉图片
private static final int ZOOM = 2;//这个时候表示缩放图片
private float startDis;//开始距离
private PointF midPoint;//中间点
//监听到触摸事件后，会调用onTouch这个方法。
//View v, MotionEvent event这里view就是用户所触摸的控件，这里是imageView
//event是用户触摸事件。
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MASK) {
//00000000 01010001 01010111 & 00000000 00000000 11111111=
//这里经过了与的运算后就得到了有用的低八位了。也就是01010111
// 八个1是十进制的255，所以这里与上255就可以了，但是这里提供了一个MotionEvent.ACTION_MASK
//这个的值就是255
//public final int getAction () 这里是int32位的
//int整形，来表示触摸动作，但是这里只用了低八位实现的，所以这里就屏蔽了
//用不到的高八位。
//------------------单点触摸实现图片的移动---------------------
case MotionEvent.ACTION_DOWN://手指压下屏幕
//当只有一根手指按下屏幕的时候，这时候他的模式为拖拉。
mode = DRAG;
//1.把照片当前的移动位置记录下来
currentMatrix.set(imageView.getImageMatrix());//记录ImageView当前的移动位置
//1.当用户的手指按到屏幕上的时候，就会得到用户按的坐标。
startPoint.set(event.getX(), event.getY());
break;
//-------------------多点触摸实现缩放照片-----------------------------
/*这里用两根手指之间的距离变化，来实现照片的缩放，
* 只要用两根手指之间变化后的距离，除以变化前的距离就可以知道缩放的比例了。
* */
case MotionEvent.ACTION_MOVE://手指在屏幕移动，该 事件会不断地触发
//手指在屏幕上移动的时候，那么就要不停的调用这个方法，来移动这张图片
if(mode == DRAG){//如果模式为拖拉模式
float dx = event.getX() - startPoint.x;//得到在x轴的移动距离，此时的减去刚开始的。
float dy = event.getY() - startPoint.y;//得到在y轴的移动距离
matrix.set(currentMatrix);//在没有进行移动之前的位置基础上进行移动
// 在x轴和y轴上分别移动dx，和dy的距离
matrix.postTranslate(dx, dy);
}else if(mode == ZOOM){//如果模式为缩放模式
float endDis = distance(event);//结束距离
if(endDis > 10f){
//这个是为了防止有些用户的手指可能会太粗糙，当按下去后会被android识别成多个手指
//所以这里判断，当开始距离大于10个像素的时候才处理。
float scale = endDis / startDis;//结束距离除以开始距离得到缩放倍数
matrix.set(currentMatrix);//在之前放大的基础上放大
//用这个矩阵来进行在x轴和y轴上的移动。
//这里scale：在x轴的放大倍数, scale：在y轴上的放大倍数,
//midPoint.x, midPoint.y指定以哪个参考点缩放。这里利用中心点为参考点
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
}
break;
/*MotionEvent.ACTION_POINTER_DOWN
* 当屏幕上已经有手指，再有一个手指按下屏幕就会触发这个事件。
* */
/*MotionEvent.ACTION_POINTER_1_DOWN
* 这里是已经有一个手指了。
MotionEvent.ACTION_POINTER_2_DOWN
屏幕已经有一个手指了，这时候有第二个手指。
MotionEvent.ACTION_POINTER_3_DOWN
屏幕已经有二个手指了，这时候有第三个手指。
*/
case MotionEvent.ACTION_UP://手指离开屏
case MotionEvent.ACTION_POINTER_UP://有手指离开屏幕,但屏幕还有触点（手指）
mode = 0;//将模式归零，也就是什么模式也不是。
break;
case MotionEvent.ACTION_POINTER_DOWN://当屏幕上还有触点（手指），再有一个手指压下屏幕
mode = ZOOM;//这时候代表缩放的模式，这时候至少有两根手指，因为只有至少两根手指的时候才会触发这个
startDis = distance(event);//计算两点之间的开始的距离
if(startDis > 10f){//这个是为了防止有些用户的手指可能会太粗糙，当按下去后会被android识别成多个手指
//所以这里判断，当开始距离大于10个像素的时候才处理。
midPoint = mid(event);//当激活了这个事件后，也就是有另一个手指触摸屏幕的时候计算中心点。
currentMatrix.set(imageView.getImageMatrix());//记录ImageView当前的缩放倍数
}
break;
}
//设置移动后的图片的位置。
imageView.setImageMatrix(matrix);
//注意这里要返回true才可以有效果，因为这样才会把生成的移动消费掉
return true;
}
}
/**
* 计算两点之间的距离
* @param event
* @return
*/
public static float distance(MotionEvent event) {
float dx = event.getX(1) - event.getX(0);//这里是利用勾股定理计算的两点之间的距离
//这是得到两点的距离，a距离，b距离
// c^2=a^2+b^2
float dy = event.getY(1) - event.getY(0);
return FloatMath.sqrt(dx*dx + dy*dy);//这个api可以开平方。
}
/**
* 计算两点之间的中间点
* @param event
* @return
*/
public static PointF mid(MotionEvent event){
float midX = (event.getX(1) + event.getX(0)) / 2;
float midY = (event.getY(1) + event.getY(0)) / 2;
return new PointF(midX, midY);
}
}
----------------------------------------------------------------------------------------------------------------
3./DraScale/res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, DraScaleActivity!</string>
<string name="app_name">DraScale拖拉和多点触摸</string>
</resources>
-------------------------------------------------------
4./DraScale/res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- android:scaleType="matrix"
这里指定使用矩阵完成图片的拖拉和缩放。
-->
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/lidewei"
android:scaleType="matrix"
android:id="@+id/imageView"
/>
</LinearLayout>
---------------------------------------------------------------------