There are many ways to imageview gesture scaling, and most open source custom scaling is accomplished by modifying the OnDraw function. However, the ImageView itself has a scaletype attribute, and by setting android:scaletype= "Matrix" you can implement zooming with very little code. The advantage of scaling is that it is simple to implement, and there is no flicker in the scaling process because the OnDraw function is not called repeatedly.
Matrix matrices can be dynamically scaled to enlarge the picture to display, reduce the picture:
| The code is as follows |
Copy Code |
Get the height and width of the bitmap
int Bmpwidth=bmp.getwidth ();
int Bmpheight=bmp.getheight ();
Set shrink ratio
Double scale=0.8;
To figure out the percentage of this time.
Scalewidth= (float) (Scalewidth*scale);
scaleheight= (float) (Scaleheight*scale);
The bitmap object after the resize is generated
Matrix matrix=new Matrix ();
Matrix.postscale (ScaleWidth, ScaleHeight);
Bitmap resizebmp=bitmap.createbitmap (BMP, 0, 0, bmpwidth, Bmpheight, Matrix, True); |
The following is a customized copy of the ImageView code that implements the gesture scaling as follows:
| The code is as follows |
Copy Code |
| Package Com.jcodecraeer.stargallerry;
Import Android.content.Context;
Import Android.graphics.Matrix;
Import Android.graphics.PointF;
Import Android.util.AttributeSet;
Import Android.util.FloatMath;
Import android.view.MotionEvent;
Import Android.widget.ImageView;
public class Imagetouchview extends ImageView {
Private PointF startpoint = new PointF ();
Private Matrix matrix = new Matrix ();
Private Matrix CURRENTMARITX = new Matrix ();
private int mode = 0;//for tag mode
private static final int DRAG = 1;//drag
private static final int ZOOM = 2;//Amplification
private float Startdis = 0;
Private PointF midpoint;//Center point
/**
* Default constructor
* @param context
*/
Public Imagetouchview {
Super (context);
}
/**
* This construction method is necessary in the static introduction of XML files
* @param context
* @param paramattributeset
*/
Public Imagetouchview (Context Context,attributeset Paramattributeset) {
Super (Context,paramattributeset);
}
public boolean ontouchevent (Motionevent event) {
Switch (event.getaction () & Motionevent.action_mask) {
Case Motionevent.action_down:
mode = DRAG;
Currentmaritx.set (This.getimagematrix ());//record ImageView mobile position during the current period
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 on the basis of the current position
Matrix.posttranslate (dx, dy);
else if (mode = = ZOOM) {//Picture magnification event
float Enddis = distance (event);//End distance
if (Enddis > 10f) {
Float scale = enddis/startdis;//magnification
LOG.V ("scale=", string.valueof (scale));
Matrix.set (CURRENTMARITX);
Matrix.postscale (scale, scale, midpoint.x, MIDPOINT.Y);
}
}
Break
Case MOTIONEVENT.ACTION_UP:
mode = 0;
Break
A finger leaves the screen, but the screen has contacts (fingers).
Case MOTIONEVENT.ACTION_POINTER_UP:
mode = 0;
Break
When there is already a contact (finger) on the screen, another finger presses the screen.
Case Motionevent.action_pointer_down:
mode = ZOOM;
Startdis = Distance (event);
if (Startdis > 10f) {//Avoid two cocoons on your finger
Midpoint = Mid (event);
Currentmaritx.set (This.getimagematrix ());//record Current zoom multiples
}
Break
}
This.setimagematrix (matrix);
return true;
}
/**
* The distance between two points
* @param Event
* @return
*/
private static float distance (Motionevent event) {
Two distance of the line
float dx = event.getx (1)-event.getx (0);
float dy = event.gety (1)-event.gety (0);
Return floatmath.sqrt (DX*DX + dy*dy);
}
/**
* Calculate the distance of the center point between two points
* @param Event
* @return
*/
private static PointF Mid (Motionevent event) {
float Midx = event.getx (1) + event.getx (0);
float Midy = event.gety (1)-event.gety (0);
return new PointF (MIDX/2, MIDY/2);
}
}
Use custom ImageView in XML:
<com.jcodecraeer.stargallerry.imagetouchview
Android:id= "@+id/image"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
Android:scaletype= "Matrix"
/> |
Here's a little detail, android:layout_width and android:layout_height here are all = "match_parent", and if we switch to wrap_content, you'll find that the picture can only be scaled in a very small range. The match_parent can be easily scaled across the screen.
But Match_parent leads to an unexpected problem:
If you set the width and height of the ImageView to fill the entire parent control, and then the ScaleType is set to matrix, the picture is not centered, the whole picture is up, and I haven't figured out why, but I've found a solution online:
“
First set ImageView's scaletype= "CENTER"
To add drag and zoom to the control before shrinking. Then set the ScaleType as: "Matric"
(That is, change the property before ImageView set Ontouchlistener)
”
Where the "ImageView set Ontouchlistener before changing properties" should be replaced in our example by changing the properties at the start of the casemotionevent.action_move://move event. Changing ScaleType in code should do this:
This.setscaletype (ImageView.ScaleType.MATRIX);
Speaking of ScaleType, let's look at the meaning and difference of imageview.scaletype values:
Center/center is centered by the original size of the picture, and the center portion of the picture is displayed when the picture is longer/wider than the view's length/width.
Center_crop/centercrop proportionally enlarge the size of the picture to be centered so that the picture is long (wide) equal to or greater than the view's length (width)
Center_inside/centerinside the contents of the picture to the full center, by scaling or the original size so that the picture length/width is equal to or less than the view's length/width
Fit_center/fitcenter enlarge/Shrink the picture to the width of view, centered
Fit_end/fitend expands/shrinks the picture to the width of the view, displayed in the lower part of the view
Fit_start/fitstart expands/shrinks the picture to the width of the view, displayed in the upper part of the view
FIT_XY/FITXY enlarge/Reduce picture to view size display
Matrix/matrix drawn with a matrix
