Android Development ImageView Control Zoom Picture

The first or most basic ImageView controls how to display a picture:

<imageview
Android:id= "@+id/imgview"
Android:layout_width= "Fill_parent"
android:layout_height= "Fill_parent"
android:src= "@drawable/ic_prepicture"
Android:scaletype= "Matrix"
/>

The above layout of the XML code is mainly ScaleType settings, determines the initial display of the state of the picture, Imageview.scaletype set the plot this article can clearly see the effect of each parameter.

Here we mainly use the matrix this effect to achieve scaling, must be set scaletype for the matrix, in order to achieve the corresponding effect, you can also Imgview.setscaletype (Scaletype.matrix) in the code, so set.

Straight to the subject

First step: Understanding the Action Object (Matrix) and how it works (panning and zooming)

1, ImageView controls have getimagematrix,setimagematrix these two functions get/set their pixel matrix matrices; (This is the object we want to manipulate)

2.1 Matrix matrices also have the following function 1:posttranslate (double dx, double dy) can implement matrix translation (dx, DY) Its API description is: Postconcats The matrix with the Specified translation. M ' = T (dx, dy) * M.

2.2 Function 2:postscale (float SX, float sy, float px, float py) can achieve matrix horizontal/Vertical scaling sx,sy, while controlling the center point (px, PY) API description for scaling: Postconcats the MA Trix with the specified scale. M ' = S (SX, SY, px, py) * m

Step Two: Learn how to get the translation parameter values (dx, dy) and the scaling parameter values (SX, SY, centerpoint.x, Centerpoint.y)

For Android development, this implementation should be simple, just an implementation of the Ontouchlistener class, overriding the public boolean OnTouch (View V, motionevent event) function, where panning is a single finger, Scaling is a multi-fingered

1, switch (event.getaction () & Motionevent.action_mask), and Motionevent.action_mask do and operations are mainly to refer to the identification of the message, or can not respond to multiple fingers.

2, translation situation: relatively simple, directly in the action_move implementation of the DX, dy (event.getx (), event.gety ());

3, zoom situation: Need to calculate the distance between two fingers dis1, dis2, so scale = DIS2/DIS1; The center point of the two fingers is also calculated as the center point of the zoom.

4, once again the idea: when the departure down message (Finger Press), record the state of the initial point, when the response to move, the current state and the initial state of the comparison, do the translation or scaling operation; when up, initialize the state.

The third step, through the preceding, directly on the code:

@Override
public boolean OnTouch (View V, motionevent event) {
TODO auto-generated Method Stub
Switch (event.getaction () & Motionevent.action_mask)
{
Single Finger Press
Case Motionevent.action_down:
{
Mmode = DragMode;
Mstarpt.set (Event.getx (), event.gety ());
Mcurrmatrix = Mimageview.getimagematrix ();

Break
}
Multi-finger Zoom pressed
Case Motionevent.action_pointer_down:
{
Mmode = Zoommode;
Mstardis = Getdistance (event);
MMIDPT = GETMIDPT (event);
Mcurrmatrix = Mimageview.getimagematrix ();
Break
}
Move
Case Motionevent.action_move:
{
if (Mmode = = DragMode)
{
Float left = 0, top = 0, right = 0, bottom = 0;
float dx = event.getx ()-mstarpt.x;
float dy = event.gety ()-mstarpt.y;

Mmatrix.set (Mcurrmatrix);
Mmatrix.posttranslate (dx, dy);
Mstarpt.set (Event.getx (), event.gety ());
}
else if (Mmode = = Zoommode)
{
float Enddis = getdistance (event);
if (Enddis > 10f)
{
float Fscale = Enddis/mstardis;
Mmatrix.set (Mcurrmatrix);

Mmatrix.postscale (Fscale, Fscale, Mmidpt.x, MMIDPT.Y);
Note Add this sentence, otherwise scale to the order of magnitude
Mstardis = Enddis;
}
}
Mimageview.setimagematrix (Mmatrix);
Break
}
Single Finger Lift
Case MOTIONEVENT.ACTION_UP:
Multiple fingers lifted up
Case MOTIONEVENT.ACTION_POINTER_UP:
{
Mmode = 0;
Break
}

}

return true;
}

The following is the definition of a global variable:

Private ImageView Mimageview;
private int mmode; Mode: 1-pull; 2-zoom
Final private int dragmode = 1;
Final private int zoommode = 2;

Private PointF mstarpt = new PointF ();
private float Mstardis;
Private PointF MMIDPT = new PointF ();

Private Matrix Mmatrix = new Matrix ();
Private Matrix Mcurrmatrix = new Matrix ();

This enables a simple zoom and pan operation, and the code idea is to refer to some of the online blog posts.

However, there is still a problem, that is, the limit of scaling, not infinitely large, not infinitely small, panning also need to define the scope of the translation. The next chapter will talk about how to achieve the effect in the picture browser. Then paste the whole code.

Android Development ImageView Control Zoom Picture