Apps Zooming with multiple images?

[odhran]

Hi everyone,

A bit of an in-depth question here!

I'm creating an app that allows the user to zoom in and out and pan around the screen.

My question is this, how would I allow this to be done with multiple images?
Lets say I have a background grid image and 3 market bag images. Is there away of doing this neatly and efficiently in Java?

Here's the code I've got so far:

DesignBoard.java

import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

//See http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2/1747?tag=content;siu-container
//for detailed information on how the zoom works.

public class DesignBoard extends Activity implements OnTouchListener {
    private static final String TAG = "Touch";
    // These matrices will be used to move and zoom image
    Matrix matrix = new Matrix();
    Matrix savedMatrix = new Matrix();

    // We can be in one of these 3 states
    static final int NONE = 0;
    static final int DRAG = 1;
    static final int ZOOM = 2;
    int mode = NONE;
    
    // Remember some things for zooming
    PointF start = new PointF();
    PointF mid = new PointF();
    float oldDist = 1f;
    
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Remove title bar
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);	
        setContentView(R.layout.design_board); //ENSURE THE LINE GOES AFTER REMOVING THE TITLE BAR
        ImageView view = (ImageView) findViewById(R.id.imageViewForZoom);
        view.setOnTouchListener(this);

        
        //Check for intent from NewProject.java which sends over the
        //project name string. Change title text to users specified project name
        String Id = getIntent().getStringExtra("id");
        final TextView textViewToChange = (TextView) findViewById(R.id.strProjectName);
        textViewToChange.setText(Id);
    	}
    
    	//Call dumpEvent (which logs user touch interaction with the screen.
    	@Override
    	public boolean onTouch(View v, MotionEvent event) {
    		ImageView view = (ImageView) v;

        // Dump touch event to log
        dumpEvent(event);

     // Handle touch events here...
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
           savedMatrix.set(matrix);
           start.set(event.getX(), event.getY());
           Log.d(TAG, "mode=DRAG");
           mode = DRAG;
           break;
        case MotionEvent.ACTION_POINTER_DOWN:
           oldDist = spacing(event);
           Log.d(TAG, "oldDist=" + oldDist);
           if (oldDist > 10f) {
              savedMatrix.set(matrix);
              midPoint(mid, event);
              mode = ZOOM;
              Log.d(TAG, "mode=ZOOM");
           }
           break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_POINTER_UP:
           mode = NONE;
           Log.d(TAG, "mode=NONE");
           break;
        case MotionEvent.ACTION_MOVE:
           if (mode == DRAG) {
              // ...
              matrix.set(savedMatrix);
              matrix.postTranslate(event.getX() - start.x,
                    event.getY() - start.y);
           }
           else if (mode == ZOOM) {
              float newDist = spacing(event);
              Log.d(TAG, "newDist=" + newDist);
              if (newDist > 10f) {
                 matrix.set(savedMatrix);
                 float scale = newDist / oldDist;
                 matrix.postScale(scale, scale, mid.x, mid.y);
              }
           }
           break;
     }

        // Perform the transformation
        view.setImageMatrix(matrix);
        return true; // indicate event was handled
    	}
    	
        /** 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(TAG, sb.toString());
           
           
        }
        
        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);
        }

        /** Calculate the mid point of the first 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);
        }
}

design_board.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
    	android:id="@+id/imageViewForZoom"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	android:src="@drawable/graph_paper" 
    	android:scaleType="matrix"/>
    
     <ImageView
    	android:id="@+id/imageView2ForZoom"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:src="@drawable/ic_launcher" 
    	android:scaleType="matrix"/>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    
    <TextView
    	android:id="@+id/strProjectName"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:gravity="center"
    	android:layout_marginTop="5dip"
    	android:textColor="#FFFFFF"
    	android:textSize="20sp"
    	android:text="Start a new project" />
</LinearLayout>

</FrameLayout>

I know its a big question, but if someone could be kind enough to point me in the right direction I would be very grateful

For those interested in pinch zoom, visit this link.

Thanks in advance.

 

[Frisco]

Hello Odhran. Welcome to the forums. I know that assistance will be coming along in this thread of yours. I just wanted to thank you for joining up and adding yourself to our community as an app developer.

Android users depend on you guys (and gals) very much, every time we use our Android devices! Thank you for you're work and dedication to Android, and again, for being here with us in Android Forums.