【触摸事件】单击移动图片+双指放大缩小图片

为了更好的理解OnTouchEvent事件的处理,今天分享一下事件是怎么被处理的

需要操作的对象是张图片,所以可以自定义一个实现类去定义放大缩小的方法,在Main中直接调用

1.自定义的ImageView控件

public class CustomImage extends ImageView {
    //记录上一次的位置
    private float last_X = 0;
    private float last_Y = 0;
    public CustomImage(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //手指移动，更新图片的位置
    public void move(MotionEvent event) {

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                Log.d("flag", "----------------->move: down");
                last_X = event.getX();
                last_Y = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                Log.d("flag", "----------------->move:  move");
                //当前的坐标
                float current_X = event.getX();//x轴坐标
                float current_Y = event.getY();//Y轴坐标
                float abs_x = Math.abs(current_X - last_X);
                float abs_y = Math.abs(current_Y - last_Y);
                if(abs_x>10&&abs_x<40||abs_y>10&&abs_y<40){
                    moveImage(current_X-last_X,current_Y-last_Y);
                }
                last_X = event.getX();
                last_Y = event.getY();
                break;
        }
    }

    private void moveImage(float x, float y) {

        int offsetX = (int) x;
        int offsetY = (int) y;

        //设置移动的坐标点
        this.setFrame(getLeft()+offsetX,
                getTop()+offsetY,
                getRight()+offsetX,
                getBottom()+offsetY);

    }

    private float scaleSize = 0.1f;//缩放比例

    private double last_gap  = 0;//两点之间的距离

    public void scale(MotionEvent event) {

        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:

                float x0 = event.getX(0);
                float x1 = event.getX(1);
                float y0 = event.getY(0);
                float y1 = event.getY(1);
                //勾股定理
                double current_gap = Math.sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1));

                if(current_gap-last_gap>10){//两点之间的距离变大
                    scaleImage(1);
                }else if(current_gap - last_gap<-10){//两点之间距离变小
                    scaleImage(0);
                }

                last_gap = current_gap;
                break;
        }

    }

    public void scaleImage(int flag) {

        int scaleSize_X = (int) (scaleSize * getWidth());

        int scaleSize_Y = (int) (scaleSize*getHeight());
        switch (flag){
            case 0://缩小
                if(getWidth()>50+scaleSize_X*2)//其小有形
                this.setFrame(
                        getLeft()+ scaleSize_X,
                        getTop()+scaleSize_Y,
                        getRight()-scaleSize_X,
                        getBottom()-scaleSize_Y);

                break;
            case 1://放大
                //其大有边
                if(getWidth()

2.在Main中使用自定义的布局,并重写OnTouchEvent方法

findViewById就省略了...

@Override
    public boolean onTouchEvent(MotionEvent event) {

        //通过event获取屏幕上手指个数
        int pointerCount = event.getPointerCount();

        switch (pointerCount){
            case 1://移动图片
                mImage.move(event);
                break;
            case 2://缩放
                mImage.scale(event);
                break;
        }

        return mGestureDetector.onTouchEvent(event);
    }

return的返回值默认返回event,这里添加了手势探测器(GestureDetector)可以双击放大图片

如果不需要请略过>>>>>>>

//手势识别：按下，抬起，长按，双击……
    private GestureDetector mGestureDetector;
mGestureDetector = new GestureDetector(this,this);

        mGestureDetector.setOnDoubleTapListener(this);

需要重写的这几个方法 介绍一下:

    @Override
    public boolean onDown(MotionEvent e) {
        Log.d("flag", "----------------->onDown: 手指按下");
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {
        Log.d("flag", "----------------->onShowPress: 手指按下，长安之前" );
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        Log.d("flag", "----------------->onSingleTapUp: 单击抬起事件");
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        Log.d("flag", "----------------->onScroll: 手指在屏幕上滑动");
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {
        Log.d("flag", "----------------->onLongPress: 长按");
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        Log.d("flag", "----------------->onFling: 手指离开屏幕惯性滑动");

        float e1X = e1.getX();
        float e2X = e2.getX();

//        if(e1X-e2X>10){//向左移动
//            //缩小图片
//            mImage.scaleImage(0);
//        }else if(e1X-e2X<-10){//向右移动
//            //放大图片
//            mImage.scaleImage(1);
//        }


        return false;
    }

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {

        Log.d("flag", "----------------->onSingleTapConfirmed: 单击确定事件，两次单击时间间隔长了点");

        return false;
    }

    @Override
    public boolean onDoubleTap(MotionEvent e) {
        Log.d("flag", "----------------->onDoubleTap: 双击事件");

        mImage.scaleImage(1);//图片放大

        return false;
    }

    @Override
    public boolean onDoubleTapEvent(MotionEvent e) {

        Log.d("flag", "----------------->onDoubleTapEvent: 双击发生的之间的事件" );

        return false;
    }

这样就可以对图片进行操作了

如果还是没看懂,我把两个重要的类上传了一下:

http://download.youkuaiyun.com/detail/weixin_37263797/9835094