Showing posts with label view. Show all posts
Showing posts with label view. Show all posts

Monday, March 21, 2011

Pinch Zoom to view completely

Hope you have gone through my previous post Zooming a view completely 
Now to apply pinch zoom we need to override the OnTouchListener.
There are many blogs and code to do pinch zoom in image view me used that logic here
So my main activity class will be like this

public class PinchZoomLayout extends Activity {
 View mainView = null;

 // Remember some things for zooming
 PointF start = new PointF();
 PointF mid = new PointF();

 float oldDist = 1f;
 PointF oldDistPoint = new PointF();

 public static String TAG = "ZOOM";

 static final int NONE = 0;
 static final int DRAG = 1;
 static final int ZOOM = 2;
 int mode = NONE;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mainView = (LinearLayout) findViewById(R.id.linearLayout);

  Button buttonZoomOut = (Button) findViewById(R.id.buttonZoomOut);
  Button buttonNormal = (Button) findViewById(R.id.buttonNormal);
  Button buttonZoomIn = (Button) findViewById(R.id.buttonZoomIn);

  buttonZoomOut.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(0.5f, 0.5f, new PointF(0, 0));
   }
  });
  buttonNormal.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(1f, 1f, new PointF(0, 0));
   }
  });
  buttonZoomIn.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(2f, 2f, new PointF(0, 0));
   }
  });

  mainView.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    Log.d(TAG, "mode=DRAG");
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:
     start.set(event.getX(), event.getY());
     Log.d(TAG, "mode=DRAG");
     mode = DRAG;

     break;
    case MotionEvent.ACTION_POINTER_DOWN:
     oldDist = spacing(event);
     oldDistPoint = spacingPoint(event);
     Log.d(TAG, "oldDist=" + oldDist);
     if (oldDist > 10f) {
      midPoint(mid, event);
      mode = ZOOM;
      Log.d(TAG, "mode=ZOOM");
     }
     System.out.println("current time :" + System.currentTimeMillis());
     break;// return !gestureDetector.onTouchEvent(event);
    case MotionEvent.ACTION_UP:
    case MotionEvent.ACTION_POINTER_UP:
     Log.d(TAG, "mode=NONE");
     mode = NONE;
     break;
    case MotionEvent.ACTION_MOVE:
     if (mode == DRAG) {

     } else if (mode == ZOOM) {
      PointF newDist = spacingPoint(event);
      float newD = spacing(event);
      Log.e(TAG, "newDist=" + newDist);
      float[] old = new float[9];
      float[] newm = new float[9];
      Log.e(TAG, "x=" + old[0] + ":&:" + old[2]);
      Log.e(TAG, "y=" + old[4] + ":&:" + old[5]);
      float scale = newD / oldDist;
      float scalex = newDist.x / oldDistPoint.x;
      float scaley = newDist.y / oldDistPoint.y;
      zoom(scale, scale, start);
     }
     break;
    }
    return true;
   }
  });
 }

 /** 
  * zooming is done from here 
  */
 public void zoom(Float scaleX, Float scaleY, PointF pivot) {
  mainView.setPivotX(pivot.x);
  mainView.setPivotY(pivot.y);
  mainView.setScaleX(scaleX);
  mainView.setScaleY(scaleY);
 }

 /**
  * space between the first two fingers
  */
 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);
 }

 private PointF spacingPoint(MotionEvent event) {
  PointF f = new PointF();
  f.x = event.getX(0) - event.getX(1);
  f.y = event.getY(0) - event.getY(1);
  return f;
 }

 /**
  * 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);
 }
}
 
But this zoom is not much smooth :(.

Zooming a view completely

Here I'm discussing how to zoom a complete view with different UI controls in it.
For this i used setScaleX and setScaleY.

mainView.setScaleX(scaleX);
mainView.setScaleY(scaleY);
 
This will Scale the the view in X and Y axis. A value of scale 1 means that no scaling is applied.
In order to work this correctly it need to specify the pivot point correctly. We can set our pivot point using setPivotX and setPivotY.

mainView.setPivotX(pivot.x);
mainView.setPivotY(pivot.y);
 
My complete code 

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:id="@+id/linearLayout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <Button
   android:text="Zoom In"
   android:id="@+id/buttonZoomIn"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Normal"
   android:id="@+id/buttonNormal"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Zoom Out"
   android:id="@+id/buttonZoomOut"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 </LinearLayout>
 <TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/hello" />
 <ProgressBar
  android:id="@+id/progressBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <ImageView
  android:id="@+id/imageView"
  android:src="@drawable/honeycombdroid"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <LinearLayout
  android:layout_width="200dp"
  android:orientation="vertical"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <Button
   android:text="Button"
   android:id="@+id/button2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"></Button>
 </LinearLayout>
</LinearLayout>
 

Here me only use that three buttons
buttonZoomIn , buttonNormal and buttonZoomOut
Then My main activity class

public class ZoomLayout extends Activity {
 View mainView = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mainView =(LinearLayout)findViewById(R.id.linearLayout);
  
  Button buttonZoomOut = (Button)findViewById(R.id.buttonZoomOut);
  Button buttonNormal = (Button)findViewById(R.id.buttonNormal);
  Button buttonZoomIn = (Button)findViewById(R.id.buttonZoomIn);
  
  buttonZoomOut.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(0.5f,0.5f,new PointF(0,0));    
   }
  });
  buttonNormal.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(1f,1f,new PointF(0,0));  
   }
  });
  buttonZoomIn.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(2f,2f,new PointF(0,0));   
   }
  });
 }
 
 /** zooming is done from here */
 public void zoom(Float scaleX,Float scaleY,PointF pivot){
  mainView.setPivotX(pivot.x);
  mainView.setPivotY(pivot.y);  
  mainView.setScaleX(scaleX);
  mainView.setScaleY(scaleY);  
 } 
}
buttonZoomOut
Here zoom is the main function for zooming