Android uses ImageView to support gesture zoom effect

Touchimageview inherits from ImageView and has all the functions of ImageView; In addition, there are zoom, drag, double-click zoom and other functions, support viewpager and scaletype, and accompanied by animation effects.

During initialization, set the listener of scalegestuuredetector to scalelistener, which is used to handle the zoom gesture, and set the listener of gesturedetector to gesturelistener, which is used to handle double-click and flying gestures. The first two gestures will cause the zoom of the picture, and flying will cause the movement of the picture.

Finally, set the touch event listener of the custom view as privateontouchlistener, which is the entry of touch events.

When touching, it will go to the ontouch of privateontouchlistener, and it will give the captured motionevent to mscaledetector and mgesturedetector to analyze whether there is an appropriate callback function to handle the user's gesture.

At the same time, when the current state is drag, the distance moved by X and Y is assigned to the transformation matrix

Set the matrix for ImageView to complete the movement of X and y, that is, to realize the single finger drag action

ScaleListener

The two finger scaling action will go to the callback of scalelistener, and its onscale callback will handle the scaling of the picture

scaleImage

Here, the scaling ratio of multiple scaling will be accumulated, and the maximum and minimum scaling ratios will be set, which cannot exceed the range

Finally, the scaling ratio and focus of X and y are transferred to the transformation matrix, which is associated to ImageView to complete the scaling action

In the onscalend callback, we will judge whether the current zoom ratio exceeds the maximum zoom ratio or is less than the minimum zoom ratio. If so, an animation will return to the maximum or minimum zoom ratio state

The double tapzoom animation here is double-click animation. We will talk about double tapzoom below. So far, the two finger zoom action is completed. Let's continue to see the double-click zoom action.

GestureListener

In the ondoubletap callback, set the double-click zoom ratio. If there is no zoom at present, set the zoom ratio to the maximum value. If it is already the maximum value, set it to no zoom

Then take the current click coordinate as the zoom center and hand it to doubletapzoom together with the zoom ratio to complete the zoom animation

DoubleTapZoom

Doubletapzoom is actually a thread that implements runnable. Let's directly look at its run method. Here, a time t is defined

In fact, t accelerates from 0 to 1 within 500ms through an accelerating differentiator

The current zoom ratio is calculated by T

Achieve scaling

Then judge whether the animation ends according to the current value of T. If t is less than 1, it indicates that the animation has not ended. Re execute this thread, otherwise the setting state is completed. Here, the animation effect is realized by executing threads for many times and redrawing ImageView for many times within 500ms.

At the same time, in the onfling callback of gesturelistener, set the X and Y speeds of fling, and then execute the displacement animation of fling

Fling

In fact, fling is also a thread that implements runnable. According to the X and Y speeds of the fling gesture, we will execute the scroller's flying function and set the current position as the starting position

Let's take another look at the run function. Calculate the new position information according to the current scroll position of the scroller, and subtract it from the old position to obtain the translation distance on the X and Y axes to realize the translation

Finally, after a period of delay, the thread is called again to complete the new translation drawing, and so on until the scroller stops scrolling and redraws the ImageView for many times, realizing the flying animation effect.

Let's take a look at the display effect:

Single picture

@H_ 419_ 177@

Load pictures into viewpager

Mirror image

Click to change the picture

Click to change the scaletype

The above is what Xiaobian introduced to you. Android uses ImageView to support gesture zoom effect. I hope it will be helpful to you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!