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;

    }



}