Android

- MotionEvent.ACTION_DOWN：在第一个点被按下时触发；

- MotionEvent.ACTION_UP ：当屏幕上唯一的点被放开时触发；

- MotionEvent.ACTION_POINTER_DOWN：当屏幕上已经有一个点被按住，此时再按下其他点时触发。

- MotionEvent.ACTION_POINTER_UP：当屏幕上有多个点被按住，松开其中一个点时触发（即非最后一个点被放开时）。

- MotionEvent.ACTION_MOVE：当有点在屏幕上移动时触发。值得注意的是，
由于它的灵敏度很高，而我们的手指又不可能完全静止（即使我们感觉不到移
动，但其实我们的手指也在不停地抖 动），所以实际的情况是，基本上只要有点
在屏幕上，此事件就会一直不停地被触发。

1. 获取状态栏和标题栏高度

private View rootView;
private int mActionBarHeight;
private int mNotifiyHeight;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drag_the_picture);

    rootView = getLayoutInflater().inflate(R.layout.activity_drag_the_picture, null);
    rootView.post(new Runnable() {
        @Override
        public void run() {
            if (getSupportActionBar() != null){
                mActionBarHeight = getSupportActionBar().getHeight();//获取标题栏的高度

                //获取状态栏的高度
                Rect frame = new Rect();
                getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                mNotifiyHeight = frame.top;

                System.out.println("notify"+ mNotifiyHeight);

                System.out.println(mActionBarHeight);
            }else {
                mActionBarHeight = 0;
            }
        }
    });

1. 实现图片的跟随手指的拖拽效果

20160723_234252.gif

public class DragThePictureActivity extends AppCompatActivity {

    private ImageView image;

    private View rootView;
    private int mActionBarHeight;//标题栏的高度
    private int mNotifiyHeight;//状态栏的高度
    private int outHeight;//标题栏的高度+状态栏的高度

    private float difX;//在图片范围内的点击点的位置的x的坐标和图片左上角的x坐标的距离
    private float difY;//在图片范围内的点击点的位置的Y的坐标和图片左上角的Y坐标的距离

    private boolean isGO = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drag_the_picture);

        rootView = getLayoutInflater().inflate(R.layout.activity_drag_the_picture, null);
        rootView.post(new Runnable() {
            @Override
            public void run() {
                if (getSupportActionBar() != null) {
                    //获取标题栏的高度
                    mActionBarHeight = getSupportActionBar().getHeight();
                } else {
                    mActionBarHeight = 0;
                }

                //获取状态栏的高度
                Rect frame = new Rect();
                getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                mNotifiyHeight = frame.top;

                outHeight = mNotifiyHeight + mActionBarHeight;
            }
        });

        image = (ImageView) findViewById(R.id.image);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int actionMasked = MotionEventCompat.getActionMasked(event);
        int pointerIndex = MotionEventCompat.getActionIndex(event);
        switch (actionMasked) {
            case MotionEvent.ACTION_DOWN:
                RelativeLayout.LayoutParams downParams = (RelativeLayout.LayoutParams) image.getLayoutParams();

                //判断点击点的位置是否位于图片的实际范围内
                if (getTouchX(event, pointerIndex) > downParams.leftMargin
                        && getTouchX(event, pointerIndex) < downParams.leftMargin + image.getWidth()
                        && getTouchY(event, pointerIndex) > downParams.topMargin + outHeight
                        && getTouchY(event, pointerIndex) < downParams.topMargin + image.getHeight() + outHeight) {
                    System.out.println("In");
                    isGO = true;

                    //点击点的X Y 坐标和图片左上角坐标的xy距离
                    difX = getTouchX(event, pointerIndex) - downParams.leftMargin;
                    difY = getTouchY(event, pointerIndex) - downParams.topMargin-outHeight;
                }

                break;

            case MotionEvent.ACTION_MOVE:
                if (isGO) {
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) image.getLayoutParams();
                    params.leftMargin = (int) (getTouchX(event, pointerIndex) - difX);
                    params.topMargin = (int) (getTouchY(event, pointerIndex) - outHeight-difY);

                    image.setLayoutParams(params);
                }
                break;
            case MotionEvent.ACTION_UP:
                isGO = false;
                break;
        }
        return super.onTouchEvent(event);
    }

    private float getTouchX(MotionEvent event, int pointerIndex) {
        return MotionEventCompat.getX(event, pointerIndex);
    }

    private float getTouchY(MotionEvent event, int pointerIndex) {
        return MotionEventCompat.getY(event, pointerIndex);
    }
}

1. 实现图片的缩放效果

20160723_224648.gif

public class MainActivity extends AppCompatActivity {

    private ImageView mIv;
    private float mTouchAXBefore;
    private float mTouchAYBefore;
    private float mTouchBXBefore;
    private float mTouchBYBefore;
    private int mTopMarginBefore;
    private int mLeftMarginBefore;
    private int mHeightBefore;
    private int mWidthBefore;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mIv = (ImageView) findViewById(R.id.image);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int actionMasked = MotionEventCompat.getActionMasked(event);

        if (MotionEventCompat.getPointerCount(event) == 2) {

            switch (actionMasked) {

                case MotionEvent.ACTION_POINTER_DOWN:

                    //缩放前
                    //获取A点的坐标
                    mTouchAXBefore = getTouchX(event, 0);
                    mTouchAYBefore = getTouchY(event, 0);

                    //获取B点的坐标
                    mTouchBXBefore = getTouchX(event, 1);
                    mTouchBYBefore = getTouchY(event, 1);

                    //获取图片的LayoutPareme
                    RelativeLayout.LayoutParams paramsBefore = (RelativeLayout.LayoutParams) mIv.getLayoutParams();
                    mTopMarginBefore = paramsBefore.topMargin;
                    mLeftMarginBefore = paramsBefore.leftMargin;

                    //获取图片的宽高
                    mHeightBefore = mIv.getHeight();
                    mWidthBefore = mIv.getWidth();

                    break;

                case MotionEvent.ACTION_MOVE:

                    //缩放后
                    //获取A点的坐标
                    float touchAXAfter = getTouchX(event, 0);
                    float touchAYAfter = getTouchY(event, 0);

                    //获取B点的坐标
                    float touchBXAfter = getTouchX(event, 1);
                    float touchBYAfter = getTouchY(event, 1);

                    //应用勾股定理
                    double squareBefore = Math.pow((mTouchAXBefore - mTouchBXBefore), 2)
                            + Math.pow((mTouchAYBefore - mTouchBYBefore), 2);
                    double squareAfter = Math.pow((touchAXAfter - touchBXAfter), 2)
                            + Math.pow((touchAYAfter - touchBYAfter), 2);

                    //缩放比例
                    double zoomRatio = squareBefore / squareAfter;

                    //设置图片的LayoutPareme
                    RelativeLayout.LayoutParams paramsAfter = (RelativeLayout.LayoutParams) mIv.getLayoutParams();

                    //设置图片的上边距和作边距
                    paramsAfter.topMargin = (int) (mTopMarginBefore / zoomRatio);
                    paramsAfter.leftMargin = (int) (mLeftMarginBefore / zoomRatio);

                    //设置图片的宽高
                    int heightAfter = (int) (mHeightBefore / zoomRatio);
                    int widthAfter = (int) (mWidthBefore / zoomRatio);
                    if (heightAfter > 0 && widthAfter > 0) {
                        paramsAfter.height = heightAfter;
                        paramsAfter.width = widthAfter;
                        mIv.setLayoutParams(paramsAfter);
                    }
                    break;
            }
        }
        return super.onTouchEvent(event);
    }

    private float getTouchX(MotionEvent event, int pointerIndex) {
        return MotionEventCompat.getX(event, pointerIndex);
    }

    private float getTouchY(MotionEvent event, int pointerIndex) {
        return MotionEventCompat.getY(event, pointerIndex);
    }

}

//布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    tools:context="com.nlte.imagezoom.MainActivity">

    <ImageView
        android:id="@+id/image"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@drawable/image"/>
</FrameLayout>