Android multi touch technology for free zooming and moving pictures

In the last article, I took everyone to realize the effect of Android waterfall photo wall. Although this effect is very cool, it can only be regarded as a semi-finished product, because all the pictures in the photo wall can only be seen and can not be clicked. Therefore, in this article, we will improve this function, add the function of clicking on the picture to browse the large picture, and you can zoom the picture by multi touch when browsing the large picture.

If you haven't read this article about the implementation of Android waterfall photo wall to experience the beauty of irregular arrangement, please try to read it first and then read this article, because this code is completely developed on the basis of last time.

Let's start now. First, open the photowallfallsdemo project last time and add a zoomimageview class. This class is used for large image display and multi touch zoom. The code is as follows:

Since this class is the core of the whole multi touch zoom function, I'll explain it in detail here. First, in zoomimageview, we define four states, status_ INIT、STATUS_ ZOOM_ OUT、STATUS_ ZOOM_ In and status_ Move, these four states represent the actions of initialization, zoom in, zoom out and move respectively, and then we set the current state as the initialization state in the constructor. Then we can call the setimagebitmap () method to pass in the image object to be displayed. This method will invalidate the current view, so the OnDraw () method will be executed. Then, it is determined in the OnDraw () method that the current state is the initialization state, so the initbitmap () method will be called for initialization.

Let's take a look at the initbitmap () method. In this method, we first judge the size of the picture. If the width and height of the picture are less than the width and height of the screen, we will directly offset the picture so that it can be displayed on the screen in the middle. If the width of the picture is greater than the width of the screen, or the height of the picture is greater than the height of the screen, the picture is compressed in equal proportion to make the width or height of the picture exactly equal to the width or height of the screen, so as to ensure that the picture can be displayed completely in the initialization state. Here, all offset and scaling operations are completed through the matrix. We store the values to be scaled and offset in the matrix, and then pass in the matrix object when drawing the picture.

After the picture initialization is completed, you can zoom the picture. Here, the ontouchevent() method is used to judge the click event. If two fingers are found pressing on the screen at the same time (judged by event. Getpointercount()), the current state is set to the zoom state, and the distancebetweenfingers() is called to get the distance between the two fingers to calculate the zoom scale. Then invalidate, and the zoom () method will be called in the OnDraw () method. Then, in this method, the image is scaled and offset according to the current scaling scale and the position of the center point. Please read the code carefully for the specific logic. The comments have been written very clearly.

Then, when only one finger is pressed on the screen, the current state is set to the moving state. Then, the moving distance of the finger is calculated, and the boundary check is processed to prevent the picture from shifting out of the screen. Then invalidate the current view and enter the OnDraw () method. It is determined that the current state is moving, so the move () method will be called. The code in the move () method is very simple, which is to offset the picture according to the distance the finger moves.

After introducing zoomimageview, let's create a new layout image_ details. XML, directly reference the created zoomimageview in the layout:

Then create an activity and load the image in this activity_ Details layout. Create a new imagedetailsactivity with the following code:

As you can see, first we get an instance of ZoomImageView, then get the picture path to be displayed through Intent, then use BitmapFactory to load the image under the path into memory, and then call ZoomImageView's setImageBitmap () method to import the picture, so that the picture can be displayed.

Next, we need to consider how to add a click event to the picture on the photo wall so that it can start the imagedetailsactivity. In fact, this is also very simple. Just register the click event for each instance of ImageView when dynamically adding pictures, and modify the code of addimage() method in myscrollview, as shown below:

As you can see, here we call the setonclicklistener() method of ImageView to add a click event to the picture. When the user clicks any picture in the photo wall, it will start imagedetailsactivity and pass the path of the picture.

Since we have added a new activity, don't forget to add it in androidmanifest Register in the XML file:

In this way, all the coding work has been completed. Now we run the program and you will see the familiar photo wall interface. Clicking any picture will enter the corresponding large picture interface, and you can zoom the picture by multi touch. After zooming in, you can also move the picture by one finger, as shown in the figure below.

Source code download: http://xiazai.jb51.net/201610/yuanma/androidPhotoWall (jb51.net). rar

Well, the above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.