Android Multi-Touch technology, free to scale and move pictures

In the last article I took you all together to achieve the effect of the Android waterfall flow photo wall, although this effect is very cool, but in fact, it is only a semi-finished product, because all the pictures in the wall of the picture is can not point. Therefore, in this article, we have to improve this function, add click on the image to be able to browse the large image of the function, and in the larger view of the image can also be a multi-touch way to zoom in the picture.

If you haven't seen the Android waterfall streaming photo wall implementation, experience the beauty of irregular arrangement, please try to read this article first, because this time the code is entirely on the basis of the last development.

So let's start by opening the last Photowallfallsdemo project and adding a Zoomimageview class in it, which is for big-picture display and multi-touch scaling, as the following code looks like:

public class Zoomimageview extends View {/** * initialization State constant */public static final int status_in  
      
    IT = 1;  
      
    /** * Picture Amplification State constant */public static final int status_zoom_out = 2;  
      
    /** * Picture Narrowing State constant */public static final int status_zoom_in = 3;  
      
    /** * Picture Drag State constant */public static final int status_move = 4;  
      
    /** * The matrix for moving and scaling a picture/private matrices = new Matrix ();  
      
    /** * Bitmap objects to be displayed * * Private Bitmap Sourcebitmap;  
      
    /** * Records the status of the current operation, the optional value is Status_init, Status_zoom_out, status_zoom_in and status_move/private int currentstatus;  
      
    /** * Zoomimageview Control width * * private int width;  
      
    /** * Zoomimageview Control Height * * private int height;  
      
    /** * Record two fingers at the same time on the screen, center point of the horizontal axis value * * Private float Centerpointx; 
  /** * Record the ordinate value of the center point when two fingers are placed on the screen at the same time   * * Private float Centerpointy;  
      
    /** * Record the width of the current picture, when the picture is scaled, this value will change together * * Private float currentbitmapwidth;  
      
    /** * Record the height of the current picture, when the picture is scaled, this value will change together * * Private float currentbitmapheight;  
      
    /** * Record the last time the finger moved the horizontal axis * * Private float Lastxmove =-1;  
      
    /** * Record the last time the finger movement of the ordinate * * private float Lastymove =-1;  
      
    /** * Record the movement distance of the finger in the direction of the horizontal axis * * Private float Moveddistancex;  
      
    /** * Record the movement distance of the finger in the ordinate direction * * private float Moveddistancey;  
      
    /** * Record the horizontal offset of the picture on the matrix * * Private float Totaltranslatex;  
      
    /** * Record the longitudinal offset of the picture on the matrix * * Private float Totaltranslatey;  
      
    /** * Record picture on the matrix of the total scaling ratio * * private float totalratio;  
      
    /** * Recording the distance of the finger movement caused by the scaling ratio * * private float scaledratio;  
      
    /** * Recording image initialization when the zoom ratio * * Private float initratio; /** 
     * Record the distance between the last two fingers * * private double Lastfingerdis; 
     /** * Zoomimageview constructor to set the current operation state to Status_init.  
        * * @param context * @param attrs/Public Zoomimageview (context, AttributeSet attrs) {  
        Super (context, attrs);  
    Currentstatus = Status_init; 
     /** * Set the picture to be shown in.  
        * * @param bitmap * Bitmap object to be displayed * * public void Setimagebitmap (bitmap bitmap) {  
        Sourcebitmap = bitmap;  
    Invalidate ();  
        @Override protected void OnLayout (Boolean changed, int left, int. top, int right, int bottom) {  
        Super.onlayout (changed, left, top, right, bottom);  
            if (changed) {//Zoomimageview width and height widths = getwidth () respectively);  
        Height = getheight (); @Override public boolean ontouchevent (Motionevent event) {switch (event.getactionmas Ked ()) {  
        Case MotionEvent.ACTION_POINTER_DOWN:if (event.getpointercount () = 2) {//when there is  
            When two fingers are pressed on the screen, calculate the distance between the two fingers Lastfingerdis = Distancebetweenfingers (event);  
        } break;  
                Case MotionEvent.ACTION_MOVE:if (event.getpointercount () = 1) {//drag state only when moving on screen  
                float xmove = Event.getx ();  
                float ymove = event.gety ();  
                    if (Lastxmove = = 1 && lastymove = = 1) {lastxmove = Xmove;  
                Lastymove = Ymove;  
                } currentstatus = Status_move;  
                Moveddistancex = Xmove-lastxmove;  
                Moveddistancey = Ymove-lastymove;  Boundary check is not allowed to drag the picture out of bounds if (Totaltranslatex + Moveddistancex > 0) {Moveddistancex  
                = 0; else if (width-Totaltranslatex + moveddIstancex) > Currentbitmapwidth) {moveddistancex = 0;  
                } if (Totaltranslatey + Moveddistancey > 0) {moveddistancey = 0; ' Else if ' (Height-(totaltranslatey + Moveddistancey) > currentbitmapheight) {moveddist  
                Ancey = 0;  
                //Call the OnDraw () method to draw the picture invalidate ();  
                Lastxmove = Xmove;  
            Lastymove = Ymove; If Else if (event.getpointercount () = = 2) {//two fingers are moved on the screen, the zoom state is CENTERPOINTBETWEENFI  
                Ngers (event);  
                Double Fingerdis = distancebetweenfingers (event);  
                if (Fingerdis > Lastfingerdis) {currentstatus = Status_zoom_out;  
                else {currentstatus = status_zoom_in; //Zoom multiple check, maximum only allowed to enlarge the picture 4 times times, the smallest can be reduced to the initialization ratio  
                if ((Currentstatus = = Status_zoom_out && Totalratio < 4 * initratio) || (Currentstatus = = status_zoom_in && totalratio > Initratio))  
                    {scaledratio = (float) (Fingerdis/lastfingerdis);  
                    Totalratio = Totalratio * scaledratio;  
                    if (Totalratio > 4 * initratio) {totalratio = 4 * initratio;  
                    else if (Totalratio < initratio) {totalratio = Initratio;  
                    //Call the OnDraw () method to draw the picture invalidate ();  
                Lastfingerdis = Fingerdis;  
        }} break;  
                Case MotionEvent.ACTION_POINTER_UP:if (event.getpointercount () = = 2) {//The temporary value is restored when the finger leaves the screen  
                Lastxmove =-1;  
            Lastymove =-1;  
          }  Break  
            Case MOTIONEVENT.ACTION_UP://When the finger left the screen to restore the temporary value Lastxmove =-1;  
            Lastymove =-1;  
        Break  
        Default:break;  
    return true; 
     /** * Determines what kind of drawing operations are performed on the picture based on the value of the currentstatus.  
        * * @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);  
            Switch (currentstatus) {case status_zoom_out:case status_zoom_in:zoom (canvas);  
        Break  
            Case Status_move:move (canvas);  
        Break  
        Case Status_init:initbitmap (canvas);  
            Default:canvas.drawBitmap (sourcebitmap, matrix, NULL);  
        Break 
     /** * The picture is scaled.  
        * * @param canvas/private void zoom (canvas canvas) {matrix.reset (); Scale the picture by the total scaling matrix.postscalE (Totalratio, totalratio);  
        float scaledwidth = sourcebitmap.getwidth () * totalratio;  
        float scaledheight = sourcebitmap.getheight () * totalratio;  
        float Translatex = 0f;  
        float Translatey = 0f; If the current picture is less than the width of the screen, zoom horizontally by the horizontal axis on the center of the screen. Otherwise, the horizontal scale of the center point of the two fingers is scaled horizontally if (Currentbitmapwidth < width) {Translatex = (width-scaledwidth)/2f  
        ;  
            else {Translatex = Totaltranslatex * scaledratio + centerpointx * (1-scaledratio);  
            Boundary check to ensure that the image scaling will not offset the horizontal direction of the screen if (Translatex > 0) {translatex = 0;  
            else if (Width-translatex > Scaledwidth) {translatex = Width-scaledwidth; }//If the current picture is less than the height of the screen, zoom vertically by the ordinate on the center of the screen. Otherwise, vertical scaling is performed vertically by the ordinate of the center point of the two fingers if (currentbitmapheight < height) {Translatey = (height-scaledheight)  
        /2f; else {Translatey = totaltrAnslatey * scaledratio + centerpointy * (1-scaledratio);  
            Boundary check to ensure that the picture is scaled in the vertical direction will not offset the screen if (Translatey > 0) {translatey = 0;  
            else if (Height-translatey > Scaledheight) {translatey = Height-scaledheight;  
        The image is offset after scaling to ensure that the center point position is unchanged after scaling matrix.posttranslate (Translatex, Translatey);  
        Totaltranslatex = Translatex;  
        Totaltranslatey = Translatey;  
        Currentbitmapwidth = Scaledwidth;  
        Currentbitmapheight = Scaledheight;  
    Canvas.drawbitmap (sourcebitmap, matrix, NULL);  
        /** * Translation of the picture * * @param canvas * * private void Move (canvas canvas) {  
        Matrix.reset ();  
        Calculates the total offset value according to the distance of the finger movement float Translatex = Totaltranslatex + Moveddistancex;  
        Float Translatey = Totaltranslatey + Moveddistancey; Scale the picture first by the scale you've already scaled Matrix.poStscale (Totalratio, totalratio);  
        Offset Matrix.posttranslate (Translatex, Translatey) according to the moving distance;  
        Totaltranslatex = Translatex;  
        Totaltranslatey = Translatey;  
    Canvas.drawbitmap (sourcebitmap, matrix, NULL); 
     /** * Initializes the picture, including centering the picture, and compressing the picture when the picture is larger than the width of the screen.  
            * * @param canvas */private void Initbitmap (canvas canvas) {if (Sourcebitmap!= null) {  
            Matrix.reset ();  
            int bitmapwidth = Sourcebitmap.getwidth ();  
            int bitmapheight = Sourcebitmap.getheight (); if (Bitmapwidth > Width | | bitmapheight > Height) {if bitmapwidth-width > Bitmapheight-he  ight) {////When the picture is wider than the width of the screen, compress the picture proportionally so that it can be fully displayed float ratio = width/(bitmapwidth  
                    * 1.0f);  
                    Matrix.postscale (ratio, ratio);  
  float Translatey = (Height-(bitmapheight * ratio))/2f;                  Offset in the ordinate direction to ensure the center of the picture display matrix.posttranslate (0, Translatey);  
                    Totaltranslatey = Translatey;  
                Totalratio = Initratio = ratio; else {///when the picture height is greater than the screen height, compress the picture proportionally so that it can be fully displayed float ratio = height/(bitmaphei  
                    Ght * 1.0f);  
                    Matrix.postscale (ratio, ratio);  
                    Float Translatex = (Width-(bitmapwidth * ratio))/2f;  
                    Offset in the direction of the horizontal axis to ensure the center of the picture display matrix.posttranslate (Translatex, 0);  
                    Totaltranslatex = Translatex;  
                Totalratio = Initratio = ratio;  
                } currentbitmapwidth = Bitmapwidth * initratio;  
            Currentbitmapheight = Bitmapheight * initratio; else {///when the width of the picture is smaller than the width of the screen, direct the picture to the center of float Translatex = (width-sourcebitmap.getwidth ())/2f;  
                float Translatey = (height-sourcebitmap.getheight ())/2f;  
                Matrix.posttranslate (Translatex, Translatey);  
                Totaltranslatex = Translatex;  
                Totaltranslatey = Translatey;  
                Totalratio = Initratio = 1f;  
                Currentbitmapwidth = Bitmapwidth;  
            Currentbitmapheight = Bitmapheight;  
        } canvas.drawbitmap (Sourcebitmap, matrix, NULL); 
     }/** * Calculates the distance between two fingers.  
        * * @param event * @return The distance between two fingers */private double Distancebetweenfingers (Motionevent event) {  
        float DISX = math.abs (event.getx (0)-event.getx (1));  
        float Disy = math.abs (event.gety (0)-event.gety (1));  
    Return math.sqrt (DISX * disx + disy * disy); 
     /** * Calculates the coordinates of the center point between two fingers.  
      * @param event */private void Centerpointbetweenfingers (Motionevent event) {  float xPoint0 = event.getx (0);  
        float yPoint0 = event.gety (0);  
        float xPoint1 = event.getx (1);  
        float yPoint1 = event.gety (1);  
        Centerpointx = (xPoint0 + xPoint1)/2;  
    Centerpointy = (yPoint0 + yPoint1)/2; }  
      
}