Android realizes gesture sliding, multi touch zoom and pan picture effect

Now in the app, the picture preview function must be indispensable. Users have basically formed a conditioned reflex. When they see the small picture, click to see the large picture. When they see the large picture, two fingers begin to zoom in. After zooming in, they begin to move to the specified position. 1、 Overview if you want to support multi touch and zoom and pan freely, you need to know several knowledge points: matrix, gesturedetector, scalegestuuredetector and event distribution mechanism. PS: what can you do? You don't understand. 1. Matrix matrix, it's all the multiplication of three-dimensional matrix. It's troublesome ~ ~ in fact, it's OK to understand it like this: matrix data structure: three-dimensional matrix; Internal storage: new float [9]; Inside is a one-dimensional array with 9 elements; Setvalues (float [] values) can be initialized. The meaning of each element is:

Literally, you should be able to see which represents the scaling in the X direction and which represents the offset in the vertical direction ~ ~ there are 3 unknown ones. It's okay. Please ignore them. For example, if you want to set the offset of matrix to 200100, you can write:

If you need to rotate 30 degrees and zoom in twice ~ ~ it's troublesome to write this ~ ~ matrix provides some common APIs: for example, we can write this:

How to get the value: of course, we perform various operations on a matrix, such as postscale and posttranslate; Now how to get the current scaling ratio: as mentioned earlier, setvalues can be initialized, so getvalues can get the value of the current matrix, which is a one-dimensional array and 9 elements; Then take the corresponding value through subscript. For example, I want to know the current scaling in the X direction:

OK, that's enough to know ~ ~ 2. Gesturedetector, um, look at the API and can capture long press and double click; The usage will be in the example. 3. Scalegestuuredetector. Well, it's a bit like inherited, but it's not. It's an independent class ~ used to detect scaling gestures ~ ~ ~ the usage will be in the example. 2. In practice, for better understanding, I will separate each function and finally integrate it together ~ ~ it also helps you learn about the use of each API. 1. Free zoom demand: when the picture is loaded, center the picture in the screen; If the width or height of the picture is larger than the screen, it shall be reduced to the screen size; Free method or reduction of pictures; The code is not very long. I posted the code directly

1) In the callback of ongloballayout, we zoom and move the picture to the center of the screen according to the width and height of the picture and the width and height of the screen. If the picture is very small, it will be displayed normally and will not be enlarged ~ 2). We let ontouchlistener's motionevent be handed over to scalegesturedetector for processing

3) . in the onscale callback, control the zoom of the picture. First judge the zoom range, and then set the scale value of the mscale matrix. The current effect is: 1. It is less than the width and height of the screen

2. Greater than the width and height of the screen

However, there are problems:

Next, let's solve the problem of the zoom center first. Can't we always press the screen center? Like me, I pay more attention to my sister's eyes. I want to enlarge that piece ~ ~ ~ 2. Set the zoom Center 1. Simply setting the zoom center is just setting the center. It's very simple to directly modify the next center point:

However, the arbitrary enlargement and reduction of the center point will lead to the change of the position of the picture, and finally lead to the white edge between the picture and the screen when the width and height of the picture are larger than the screen; The picture is smaller than the screen, but not centered. 2. Control the display range of the picture when zooming, so we need to manually control the range when zooming:

Remember to call in onscale:

In this way, you can zoom in anywhere freely, and there will be no white edge on the boundary, and the picture can also be displayed in the middle of the screen (when the width or height of the picture is smaller than the screen); 3. Paste layout file

The eye is the window of the mind. Let's zoom in and see the effect picture:

Well, here's our random way to shrink the picture ~ ~ ~ it's finished ~ ~ ~ if you only need the zoom function, you can use it ~ due to space reasons, the next article will continue to improve the view: 1. Increase the moving when multi touch 2. Increase the double click to become larger and double click to become smaller 3. Event conflict when used with viewpager

The above is the whole content of this article. I hope it will help you learn Android Software Programming.