Open ImageView with Zoom and Scroll

2019-01-17 22:49发布

问题:

I would like to open an Image, in ImageView, from a button press. I need the image to be zoomable and scrollable. How would I best go about accomplishing this? Thank you!

The Image can be either PNG or JPG

Thank you so much!

Here is my new code, you wouldn't mind skimming through and giving me a solution to all my problems with TAG, ZOOM , etc... I also know I need to add my image res to it

    package com.DS;

import java.io.File;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class CheatMathActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    final Button button1 = (Button) findViewById(R.id.button1);
    button1.setOnTouchListener(new View.OnTouchListener(){
        public void onTouch(View v) {
   //Opens Algebra Image 
             public boolean onTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stub
                     ImageView view = (ImageView) v;
                     view.setScaleType(ImageView.ScaleType.MATRIX);
                     float scale;

                     dumpEvent(event);
                     // Handle touch events here...

                     Matrix matrix;
                    Matrix savedMatrix;
                    PointF start;
                    Object mode;
                    float oldDist;
                    PointF mid;
                    switch (event.getAction() & event.ACTION_MASK) 
                     {
                         case MotionEvent.ACTION_DOWN:   // first finger down only
                                                             savedMatrix.set(matrix);
                                                             start.set(event.getX(), event.getY());
                                                             Log.d(TAG, "mode=DRAG"); // write to LogCat
                                                             mode = DRAG;
                                                             break;

                         case MotionEvent.ACTION_UP: // first finger lifted

                         case MotionEvent.ACTION_POINTER_UP: // second finger lifted

                                                             mode = NONE;
                                                             Log.d(TAG, "mode=NONE");
                                                             break;

                         case MotionEvent.ACTION_POINTER_DOWN: // first and second finger down

                                                             oldDist = spacing(event);
                                                             Log.d(TAG, "oldDist=" + oldDist);
                                                             if (oldDist > 5f) {
                                                                 savedMatrix.set(matrix);
                                                                 midPoint(mid, event);
                                                                 mode = ZOOM;
                                                                 Log.d(TAG, "mode=ZOOM");
                                                             }
                                                             break;

                         case MotionEvent.ACTION_MOVE:

                                                             if (mode == DRAG) 
                                                             { 
                                                                 matrix.set(savedMatrix);
                                                                 matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix  of points
                                                             } 
                                                             else if (mode == ZOOM) 
                                                             { 
                                                                 // pinch zooming
                                                                 float newDist = spacing(event);
                                                                 Log.d(TAG, "newDist=" + newDist);
                                                                 if (newDist > 5f) 
                                                                 {
                                                                     matrix.set(savedMatrix);
                                                                     scale = newDist / oldDist; // setting the scaling of the
                                                                                                 // matrix...if scale > 1 means
                                                                                                 // zoom in...if scale < 1 means
                                                                                                 // zoom out
                                                                     matrix.postScale(scale, scale, mid.x, mid.y);
                                                                 }
                                                             }
                                                             break;
                     }

                     view.setImageMatrix(matrix); // display the transformation on screen

                     return true; // indicate event was handled
                }
                private float spacing(MotionEvent event) 
                {
                    float x = event.getX(0) - event.getX(1);
                    float y = event.getY(0) - event.getY(1);
                    return FloatMath.sqrt(x * x + y * y);
                }

                /*
                 * --------------------------------------------------------------------------
                 * Method: midPoint Parameters: PointF object, MotionEvent Returns: void
                 * Description: calculates the midpoint between the two fingers
                 * ------------------------------------------------------------
                 */

                private void midPoint(PointF point, MotionEvent event) 
                {
                    float x = event.getX(0) + event.getX(1);
                    float y = event.getY(0) + event.getY(1);
                    point.set(x / 2, y / 2);
                }

                /** Show an event in the LogCat view, for debugging */
                private void dumpEvent(MotionEvent event); 
                {
                    String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE","POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
                    StringBuilder sb = new StringBuilder();
                    int action = event.getAction();
                    int actionCode = action & MotionEvent.ACTION_MASK;
                    sb.append("event ACTION_").append(names[actionCode]);

                    if (actionCode == MotionEvent.ACTION_POINTER_DOWN || actionCode == MotionEvent.ACTION_POINTER_UP) 
                    {
                        sb.append("(pid ").append(action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
                        sb.append(")");
                    }

                    sb.append("[");
                    for (int i = 0; i < event.getPointerCount(); i++) 
                    {
                        sb.append("#").append(i);
                        sb.append("(pid ").append(event.getPointerId(i));
                        sb.append(")=").append((int) event.getX(i));
                        sb.append(",").append((int) event.getY(i));
                        if (i + 1 < event.getPointerCount())
                            sb.append(";");
                    }

                    sb.append("]");
                    Log.d("Touch Events ---------", sb.toString()); 

            }   





    }

        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            // TODO Auto-generated method stub
            return false;
        }

});
    final Button button2 = (Button) findViewById(R.id.button2);
    button2.setOnClickListener(new View.OnClickListener(){
        public void onClick(View v){
    //Opens Next Subset Image   
        }
    });

}
public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
     ImageView view = (ImageView) v;
     view.setScaleType(ImageView.ScaleType.MATRIX);
     float scale;

     dumpEvent(event);
     // Handle touch events here...

     Matrix matrix;
    Matrix savedMatrix;
    PointF start;
    Object mode;
    float oldDist;
    PointF mid;
    switch (event.getAction() & event.ACTION_MASK) 
     {
         case MotionEvent.ACTION_DOWN:   // first finger down only
                                             savedMatrix.set(matrix);
                                             start.set(event.getX(), event.getY());
                                             Log.d(TAG, "mode=DRAG"); // write to LogCat
                                             mode = DRAG;
                                             break;

         case MotionEvent.ACTION_UP: // first finger lifted

         case MotionEvent.ACTION_POINTER_UP: // second finger lifted

                                             mode = NONE;
                                             Log.d(TAG, "mode=NONE");
                                             break;

         case MotionEvent.ACTION_POINTER_DOWN: // first and second finger down

                                             oldDist = spacing(event);
                                             Log.d(TAG, "oldDist=" + oldDist);
                                             if (oldDist > 5f) {
                                                 savedMatrix.set(matrix);
                                                 midPoint(mid, event);
                                                 mode = ZOOM;
                                                 Log.d(TAG, "mode=ZOOM");
                                             }
                                             break;

         case MotionEvent.ACTION_MOVE:

                                             if (mode == DRAG) 
                                             { 
                                                 matrix.set(savedMatrix);
                                                 matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix  of points
                                             } 
                                             else if (mode == ZOOM) 
                                             { 
                                                 // pinch zooming
                                                 float newDist = spacing(event);
                                                 Log.d(TAG, "newDist=" + newDist);
                                                 if (newDist > 5f) 
                                                 {
                                                     matrix.set(savedMatrix);
                                                     scale = newDist / oldDist; // setting the scaling of the
                                                                                 // matrix...if scale > 1 means
                                                                                 // zoom in...if scale < 1 means
                                                                                 // zoom out
                                                     matrix.postScale(scale, scale, mid.x, mid.y);
                                                 }
                                             }
                                             break;
     }

     view.setImageMatrix(matrix); // display the transformation on screen

     return true; // indicate event was handled
}
private float spacing(MotionEvent event) 
{
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);
}

/*
 * --------------------------------------------------------------------------
 * Method: midPoint Parameters: PointF object, MotionEvent Returns: void
 * Description: calculates the midpoint between the two fingers
 * ------------------------------------------------------------
 */

private void midPoint(PointF point, MotionEvent event) 
{
    float x = event.getX(0) + event.getX(1);
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
}

/** Show an event in the LogCat view, for debugging */
private void dumpEvent(MotionEvent event) 
{
    String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE","POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
    StringBuilder sb = new StringBuilder();
    int action = event.getAction();
    int actionCode = action & MotionEvent.ACTION_MASK;
    sb.append("event ACTION_").append(names[actionCode]);

    if (actionCode == MotionEvent.ACTION_POINTER_DOWN || actionCode == MotionEvent.ACTION_POINTER_UP) 
    {
        sb.append("(pid ").append(action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
        sb.append(")");
    }

    sb.append("[");
    for (int i = 0; i < event.getPointerCount(); i++) 
    {
        sb.append("#").append(i);
        sb.append("(pid ").append(event.getPointerId(i));
        sb.append(")=").append((int) event.getX(i));
        sb.append(",").append((int) event.getY(i));
        if (i + 1 < event.getPointerCount())
            sb.append(";");
    }

    sb.append("]");
    Log.d("Touch Events ---------", sb.toString()); 

}
}

回答1:

Just add these below methods in your activity. Also, you need call this method as below and your activity must implement OnTouchListener.

imaveViewInstance.setOnTouchListener(this);

 @Override
public boolean onTouch(View v, MotionEvent event) {
    // TODO Auto-generated method stub
     ImageView view = (ImageView) v;
     view.setScaleType(ImageView.ScaleType.MATRIX);
     float scale;

     dumpEvent(event);
     // Handle touch events here...

     switch (event.getAction() & event.ACTION_MASK) 
     {
         case MotionEvent.ACTION_DOWN:   // first finger down only
                                             savedMatrix.set(matrix);
                                             start.set(event.getX(), event.getY());
                                             Log.d(TAG, "mode=DRAG"); // write to LogCat
                                             mode = DRAG;
                                             break;

         case MotionEvent.ACTION_UP: // first finger lifted

         case MotionEvent.ACTION_POINTER_UP: // second finger lifted

                                             mode = NONE;
                                             Log.d(TAG, "mode=NONE");
                                             break;

         case MotionEvent.ACTION_POINTER_DOWN: // first and second finger down

                                             oldDist = spacing(event);
                                             Log.d(TAG, "oldDist=" + oldDist);
                                             if (oldDist > 5f) {
                                                 savedMatrix.set(matrix);
                                                 midPoint(mid, event);
                                                 mode = ZOOM;
                                                 Log.d(TAG, "mode=ZOOM");
                                             }
                                             break;

         case MotionEvent.ACTION_MOVE:

                                             if (mode == DRAG) 
                                             { 
                                                 matrix.set(savedMatrix);
                                                 matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix  of points
                                             } 
                                             else if (mode == ZOOM) 
                                             { 
                                                 // pinch zooming
                                                 float newDist = spacing(event);
                                                 Log.d(TAG, "newDist=" + newDist);
                                                 if (newDist > 5f) 
                                                 {
                                                     matrix.set(savedMatrix);
                                                     scale = newDist / oldDist; // setting the scaling of the
                                                                                 // matrix...if scale > 1 means
                                                                                 // zoom in...if scale < 1 means
                                                                                 // zoom out
                                                     matrix.postScale(scale, scale, mid.x, mid.y);
                                                 }
                                             }
                                             break;
     }

     view.setImageMatrix(matrix); // display the transformation on screen

     return true; // indicate event was handled
}
private float spacing(MotionEvent event) 
{
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);
}

/*
 * --------------------------------------------------------------------------
 * Method: midPoint Parameters: PointF object, MotionEvent Returns: void
 * Description: calculates the midpoint between the two fingers
 * ------------------------------------------------------------
 */

private void midPoint(PointF point, MotionEvent event) 
{
    float x = event.getX(0) + event.getX(1);
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
}

/** Show an event in the LogCat view, for debugging */
private void dumpEvent(MotionEvent event) 
{
    String names[] = { "DOWN", "UP", "MOVE", "CANCEL", "OUTSIDE","POINTER_DOWN", "POINTER_UP", "7?", "8?", "9?" };
    StringBuilder sb = new StringBuilder();
    int action = event.getAction();
    int actionCode = action & MotionEvent.ACTION_MASK;
    sb.append("event ACTION_").append(names[actionCode]);

    if (actionCode == MotionEvent.ACTION_POINTER_DOWN || actionCode == MotionEvent.ACTION_POINTER_UP) 
    {
        sb.append("(pid ").append(action >> MotionEvent.ACTION_POINTER_ID_SHIFT);
        sb.append(")");
    }

    sb.append("[");
    for (int i = 0; i < event.getPointerCount(); i++) 
    {
        sb.append("#").append(i);
        sb.append("(pid ").append(event.getPointerId(i));
        sb.append(")=").append((int) event.getX(i));
        sb.append(",").append((int) event.getY(i));
        if (i + 1 < event.getPointerCount())
            sb.append(";");
    }

    sb.append("]");
    Log.d("Touch Events ---------", sb.toString());
}


回答2:

Or use TouchImageView in place of ImageView. It's a well done class, I've used it myself - Just include his view wherever you need a zoomable imageview.