Android学习笔记_38_图片的拖动、缩放功能和多点触摸

时间:2023-11-10 17:33:44

一、基础知识:

  引用

  理论上 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
 这些常量正是我们用来处理多点触摸的工具。

package com.example.dragscale;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.Toast; public class MultiTouchActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
} @Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_POINTER_1_DOWN:
showMessage("第一个手指按下");
break;
case MotionEvent.ACTION_POINTER_1_UP:
showMessage("第一个手指抬起");
break;
case MotionEvent.ACTION_POINTER_2_DOWN:
showMessage("第二个手指按下");
break;
case MotionEvent.ACTION_POINTER_2_UP:
showMessage("第二个手指抬起");
break;
case MotionEvent.ACTION_POINTER_3_DOWN:
showMessage("第三个手指按下");
break;
case MotionEvent.ACTION_POINTER_3_UP:
showMessage("第三个手指抬起");
break;
}
return true;
} private void showMessage(String s) {
Toast toast = Toast.makeText(getApplicationContext(), s,
Toast.LENGTH_SHORT);
toast.show();
}
}

上面的代码和我们处理单点触摸的方式一模一样。借助这个小小的例子,我们看看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、布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="matrix"
android:src="@drawable/pic" /> </RelativeLayout>

  2、后台代码实现:

package com.example.dragscale;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.util.FloatMath;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView; public class MainActivity extends Activity {
private ImageView imageView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_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);
} @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
} }