Drag and zoom on Android images

Drag and zoom on Android images

May 9, 2014

We often need to browse images in the app, such as when you click on the image to zoom in on the image.

This blog describes how to drag and zoom the image, this first to understand the touch mechanism in Android, the screen has a finger pressed, finger lift, finger movement and a number of finger touch action. We want to achieve the drag and zoom of the image is to be based on these actions for logical processing.

The drag and drop of the image is mainly to calculate the position of the finger and the position of the current finger, to translate, the specific code can be seen.

The scaling of the image involves calculating the distance between two points to get the zoom ratio, and call the matrix method to achieve the scaling effect.

Example code: http://download.csdn.net/detail/wwj_748/7324363

Package Com.wwj.dragscale;import Android.app.activity;import Android.graphics.matrix;import Android.graphics.pointf;import Android.os.bundle;import Android.util.floatmath;import android.view.MotionEvent;  Import Android.view.view;import android.view.view.ontouchlistener;import android.widget.imageview;/** * Drag and zoom the image * * @author WWJ * */public class Mainactivity extends Activity {private ImageView ImageView; @Overrideprotected void Oncreat E (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); ImageView = (ImageView) Findviewbyid (R.id.imageview); Imageview.setontouchlistener (new Touchlistener ());} Private class Touchlistener implements Ontouchlistener {private PointF startPoint = new PointF ();p rivate matrix matrix = n EW matrix ();p rivate matrix CURRENTMARITX = new Matrix ();p rivate int mode = 0; Used to mark the mode private static final int DRAG = 1; Drag private static final int ZOOM = 2; Enlarge private Float Startdis = 0;private PointF midpoint; Center Point @oVerridepublic boolean OnTouch (View V, motionevent event) {switch (Event.getaction () & Motionevent.action_mask) {case MotionEvent.ACTION_DOWN:mode = DRAG; Drag Currentmaritx.set (Imageview.getimagematrix ()); Record ImageView Current moving position startpoint.set (Event.getx (), event.gety ()); Start point break;case motionevent.action_move://Move Event if (mode = = DRAG) {//Picture drag event Float dx = event.getx ()-startpoint.x;//X-axis Moving distance float dy = event.gety ()-Startpoint.y;matrix.set (CURRENTMARITX); Move the matrix.posttranslate (dx, DY) based on the current position;} else if (mode = = Zoom) {//Picture magnification event float Enddis = distance (event);//End Distance if (Enddis > 10f) {float scale = Enddis/star TDis; Magnification Matrix.set (CURRENTMARITX); Matrix.postscale (scale, scaled, midpoint.x, MIDPOINT.Y);}} Break;case MotionEvent.ACTION_UP:mode = 0;break;//has a finger to leave the screen, but the screen also has a contact point (finger) case MotionEvent.ACTION_POINTER_UP:mode = 0; break;//when there is already a touch point (finger) on the screen, and then a finger presses down on the screen case MotionEvent.ACTION_POINTER_DOWN:mode = Zoom;startdis = Distance (event); if ( Startdis > 10f) {//Avoid two midpoint on fingers = mID (event); Currentmaritx.set (Imageview.getimagematrix ()); Record the current zoom multiplier}break;} Show scaled picture Imageview.setimagematrix (matrix); return true;}} /** * Calculates the distance between two points * * @param event * @return */public static float distance (Motionevent event) {Float dx = event.getx (1)- Event.getx (0); float dy = event.gety (1)-event.gety (0); return floatmath.sqrt (DX * dx + dy * dy);} /** * Calculates the middle point between two points * * @param event * @return */public static PointF Mid (Motionevent event) {Float Midx = (event.getx (1) + Event.getx (0))/2;float Midy = (event.gety (1) + event.gety (0))/2;return new PointF (Midx, Midy);}}