手势 触摸缩放GestureDetector MotionEvent 案例

Posted 白乾涛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手势 触摸缩放GestureDetector MotionEvent 案例相关的知识,希望对你有一定的参考价值。

GestureDetector和ScaleGestureDetector示例

/**
 * 演示【单点触摸手势识别器】
 * 演示【缩放手势识别器】最简单的使用
 * @author 白乾涛
 */
public class FirstActivity extends Activity implements OnTouchListener {
    private ImageView iv;
    private GestureDetector mGestureDetector;//单击和双击事件手势识别器
    private ScaleGestureDetector mScaleGestureDetector;//缩放事件手势识别器
    private Matrix matrix = new Matrix();
    private DecimalFormat df = new DecimalFormat("0.00");//格式化float
    private float lastScale = 1;//记录上次的缩放比例,下次缩放时是在此基础上进行的
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        iv = new ImageView(this);
        iv.setImageResource(R.drawable.ic_launcher);
        iv.setScaleType(ScaleType.MATRIX);//用矩阵来绘制
        setContentView(iv);
        mGestureDetector = new GestureDetector(thisnew MyGestureListener());
        mScaleGestureDetector = new ScaleGestureDetector(thisnew SimpleOnScaleGestureListener() {
            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                float scale = detector.getScaleFactor()//缩放因子,两指靠拢时小于1
                float x = detector.getFocusX(), y = detector.getFocusY();//中心点坐标
                Log.i("bqt""缩放手势  onScale," + df.format(scale) + "-" + df.format(x) + "-" + df.format(y));
                matrix.setScale(lastScale * scale, lastScale * scale);
                iv.setImageMatrix(matrix);
                return super.onScale(detector);
            }
            @Override
            public boolean onScaleBegin(ScaleGestureDetector detector) {
                Log.i("bqt""缩放手势  onScaleBegin," + df.format(detector.getScaleFactor()));//始终是1
                return super.onScaleBegin(detector);
            }
            @Override
            public void onScaleEnd(ScaleGestureDetector detector) {
                super.onScaleEnd(detector);
                lastScale *= detector.getScaleFactor();
                Log.i("bqt""缩放手势  onScaleEnd," + df.format(detector.getScaleFactor()));
            }
        });
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        mGestureDetector.onTouchEvent(event);
        mScaleGestureDetector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return false;//设置OnTouchListener时,返回值要为false,或者在onTouch()中将MotionEvent事件传给GestureDetector,才能使手势识别器生效
    }
    class MyGestureListener extends SimpleOnGestureListener {
        @Override
        //双击的【第二下】Touch down时触发(只执行一次)
        public boolean onDoubleTap(MotionEvent e) {
            Log.i("bqt""onDoubleTap");
            return super.onDoubleTap(e);
        }
        @Override
        //双击的【第二下】Touch down和up都会触发(执行次数不确定)。 
        public boolean onDoubleTapEvent(MotionEvent e) {
            Log.i("bqt""onDoubleTapEvent");
            return super.onDoubleTapEvent(e);
        }
        @Override
        //Touch down时触发
        public boolean onDown(MotionEvent e) {
            Log.i("bqt""onDown");
            return super.onDown(e);
        }
        @Override
        //onScroll一点距离后,【抛掷时】触发(若是轻轻的、慢慢的停止活动,而非抛掷,则很可能不触发)
        //参数为手指接触屏幕、离开屏幕一瞬间的动作事件,及手指水平、垂直方向移动的速度,像素/秒
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            Log.i("bqt""onFling");
            if ((e2.getRawX() - e1.getRawX()) > 100) {
                Log.i("bqt""onFling-从左到右滑");
                return true;//消耗事件
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }
        @Override
        //Touch了不移动一直Touch down时触发 
        public void onLongPress(MotionEvent e) {
            Log.i("bqt""onLongPress");
            super.onLongPress(e);
        }
        @Override
        //Touch了滑动时触发,e1代表触摸时的事件,是不变的,e2代表滑动过程中的事件,是时刻变化的
        //distance是当前event2与上次回调时的event2之间的距离,代表上次回调之后到这次回调之前移动的距离
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            Log.i("bqt""onScroll-" + (int) e1.getX() + "-" + (int) e2.getX() + "-" + (int) distanceX + "-" + (int) distanceY);
            return super.onScroll(e1, e2, distanceX, distanceY);
        }
        @Override
        //Touch了还没有滑动时触发 
        public void onShowPress(MotionEvent e) {
            Log.i("bqt""onShowPress");
            super.onShowPress(e);
        }
        @Override
        //在touch down后又没有滑动(onScroll),又没有长按(onLongPress),然后Touchup时触发。
        public boolean onSingleTapConfirmed(MotionEvent e) {
            Log.i("bqt""onSingleTapConfirmed");
            return super.onSingleTapConfirmed(e);
        }
        @Override
        //在touch down后又没有滑动(onScroll),又没有长按(onLongPress),然后Touchup时触发。
        public boolean onSingleTapUp(MotionEvent e) {
            Log.i("bqt""onSingleTapUp");
            return super.onSingleTapUp(e);
        }
    }
}

MotionEvent示例:缩放图片

public class SecondActivity extends Activity implements OnTouchListener {
    private ImageView iv;
    private float scale = 1;
    private float lastScale = 1;//记录手指全部离开时的缩放比例,下次缩放时是在此基础上进行的
    private float oldDist;//记录第二个触摸点和第一个触摸点之间的距离 
    private Matrix mMatrix = new Matrix();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        iv = new ImageView(this);
        iv.setImageResource(R.drawable.ic_launcher);
        iv.setBackgroundColor(0x8822ffff);//从背景可以看出,此ImageView 是占用整个屏幕大小的
        iv.setScaleType(ScaleType.MATRIX);
        iv.setOnTouchListener(this);
        setContentView(iv);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
        case MotionEvent.ACTION_DOWN:
            Log.i("bqt""ACTION_DOWN,第一个触摸点,所以肯定为【1】" + event.getPointerCount());
            break;
        case MotionEvent.ACTION_UP://当屏幕上唯一的点被放开时触发
            lastScale = scale;//记录手指全部离开时的缩放比例,下次缩放时是在此基础上进行的
            Log.i("bqt""ACTION_UP,最后一个触摸点,之前触摸点数肯定为【1】" + event.getPointerCount());
            break;
        case MotionEvent.ACTION_POINTER_UP://当屏幕上有多个点被按住,松开其中一个点时触发
            Log.i("bqt""ACTION_POINTER_UP,少一个触摸点,少之前的触摸点数为" + event.getPointerCount());
            break;
        case MotionEvent.ACTION_POINTER_DOWN://当屏幕上已经有一个点被按住,此时再按下其他点时触发
            if (event.getPointerCount() == 2) oldDist = spacing(event);//记录第二个触摸点和第一个触摸点之间的距离 
            Log.i("bqt""ACTION_POINTER_DOWN,又一个触摸点,目前触摸点数为" + event.getPointerCount());
            break;
        case MotionEvent.ACTION_MOVE://当有点在屏幕上移动时触发
            if (event.getPointerCount() == 2) {
                float newDist = spacing(event);//移动过程中,第二个点和第一个点的距离 
                if (Math.abs(newDist - oldDist) > 10) {//减小灵敏度
                    scale = lastScale * newDist / oldDist;
                    Log.i("bqt""ACTION_MOVE,缩放比例为" + scale);
                    mMatrix.setScale(scalescale);
                    iv.setImageMatrix(mMatrix);
                }
            }
            break;
        }
        return true;
    }
    /**
     * 返回两个点之间的距离
     */
    private float spacing(MotionEvent event) {
        if (event.getPointerCount() >= 2) {
            float x = event.getX(0) - event.getX(1);
            float y = event.getY(0) - event.getY(1);
            return (float) Math.sqrt(x * x + y * y);
        } else return 0;
    }
}

MotionEvent示例:功能增强

public class ThirdActivity extends Activity implements OnTouchListener {
    private ImageView imageView;
    private Matrix startMatrix = new Matrix();//ImageView初始矩阵
    private Matrix matrix = new Matrix();//要给ImageView设置的矩阵
    private float startDis;//两个手指的按下时的初始距离
    private PointF midPoint;//两个手指的按下时中间点
    private PointF startPoint = new PointF();//第一个手指按下时的坐标位置
    private boolean isPointerUp;//当有手指放开时,如果不停止缩放,会导致图片位置错乱。后续可以优化
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.ic_launcher);
        imageView.setOnTouchListener(this);
        imageView.setScaleType(ScaleType.MATRIX);
        setContentView(imageView);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
        case MotionEvent.ACTION_DOWN:
            Log.i("bqt""初始矩阵" + imageView.getImageMatrix());//值是会变的 {[1.0, 0.0, 0.0][0.0, 1.0, 0.0][0.0, 0.0, 1.0]}
            startMatrix.set(imageView.getImageMatrix());//获取初始状态
            startPoint.set(event.getX(), event.getY());//获取开始时候的坐标位置
            isPointerUp = true;
            break;
        case MotionEvent.ACTION_MOVE:
            if (isPointerUp) {
                if (event.getPointerCount() == 1) { //移动图片
                    float dx = event.getX() - startPoint.x// 得到X轴的移动距离
                    float dy = event.getY() - startPoint.y// 得到Y轴的移动距离
                    Log.i("bqt""移动距离" + (int) dx + "---" + (int) dy);
                    matrix.set(startMatrix);//先置为初始状态
                    matrix.postTranslate(dx, dy);
                } else if (event.getPointerCount() == 2) { // 放大缩小图片
                    float endDis = distance(event);// 距离
                    float scale = endDis / startDis;//ImageView缩放的比例
                    Log.i("bqt""缩放倍数" + scale);
                    matrix.set(startMatrix);
                    matrix.postScale(scale, scale, midPoint.xmidPoint.y);
                }
                imageView.setImageMatrix(matrix);
            }
            break;
        case MotionEvent.ACTION_POINTER_DOWN:
            startDis = distance(event);
            midPoint = mid(event);
            startMatrix.set(imageView.getImageMatrix());//重置为目前的初始状态
            break;
        case MotionEvent.ACTION_UP:
            break;
        case MotionEvent.ACTION_POINTER_UP:
            isPointerUp = false;
            break;
        }
        return true;
    }
    /** 计算两个手指间的距离 */
    private float distance(MotionEvent event) {
        float dx = event.getX(1) - event.getX(0);
        float dy = event.getY(1) - event.getY(0);
        /** 使用勾股定理返回两点之间的距离 */
        return (float) Math.sqrt(dx * dx + dy * dy);
    }
    /** 计算两个手指间的中间点 */
    private 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);
    }
}

附件列表

     

    以上是关于手势 触摸缩放GestureDetector MotionEvent 案例的主要内容,如果未能解决你的问题,请参考以下文章

    手势识别 GestureDetector ScaleGestureDetector

    用户手势检测-GestureDetector使用详解

    Flutter(五)手势GestureDetector

    Android应用开发基础篇(13)-----GestureDetector(手势识别)

    flutter系列之:移动端的手势基础GestureDetector

    Andorid------手势识别GestureDetector和SimpleOnGestureListener的使用教程(转)——