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

一、基础知识：

　　理论上 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;
    }

}