This article is contributed by Sanjing-Dajing wing
Sanjing-Dajing wing's blog address:
http://blog.csdn.net/wingichoy
If you still remember this interaction exploded: how hungry did Image turn into a detail page, then you should be able to think that this is the same author, the author seems to have started a series, and the interaction is very "exploded"~~
relax for a while
"Interactive Explosion" may be a series of high-end special effects tutorials. The article will introduce some cool special effects and the ideas for realization. The special effect itself may not be too difficult. The difficulty lies in the idea of realization. Once the idea is opened, the special effects will be easy to implement.
DragPhotoView project address
https://github.com/githubwing/DragPhotoView
Hello everyone, this issue is the fourth issue of interactive explosion~ The effect brought by this issue is the effect of the latest version of WeChat Moments. Look at the picture and drag it. If you haven't seen it, please update WeChat~~
This issue is different from the past:
not a demo! Use it directly! Not a demo! Use it directly! Not a demo! Use it directly! It is important to say three you understand.
The renderings are as follows:
I feel that the effect of self-realization is not bad. I suddenly think that he is WeChat haha.
1 One-minute usage
change your build.gradle file
Put it in xml
Just use it as a normal ImageView, all ImageView gameplay can be played on it. Note that you must add an onExitListener, which is a drag-out monitoring.
This completes the access, even faster than a minute. Is there any! Reject the title party.
The above is the usage, but whoever knows how to use it. If you use a tripartite library, you must understand the implementation, right? Let's introduce the idea of implementation.
2 Realization
Based on PhotoView
At first sight of this effect, I have the urge to achieve it, because there are many scenarios. So I directly find the most star PhotoView on GitHub to expand. Here I choose to directly rely on and inherit PhotoView, the reason is if PhotoView If there is an update, you can rely on directly changing the version. If I choose to change the source code copy, then I will not get the support of PhotoView.
Image zoom, transparent background
Activity is needed here to set the background to transparent. And the background is really black. In order to change the transparency of the View background with gestures, I draw an oversized rectangle to act as the background:
The canvas displacement, zoom, and transparency all change with gestures. So to handle touch events, I tried to rewrite the onTouchEvent method at first, and found that it didn’t work, because PhotoView uses its own gesture processing mechanism inside. So gesture processing is helpless. Where? No, we can do the processing in dispatchTouchEvent. So rewrite the method:
First judge whether it is in zoom mode, only when it is not in zoom mode can drag
After processing the ACTION_MOVE event:
It should be noted that the conflict between Viewpager and DragPhotoView and PhotoView must be resolved.
The conflict between DragPhotoView and PhotoView is gesture zooming, so just judge the current touch points.
The bottom Viewpager and DragPhotoView conflict between sliding left and right, so it is judged here: if it has not moved down, the Y displacement is 0 and handed over to ViewPager for processing. If it has moved down, change the flag to indicate that it is in the dragging state.
In ACTION_UP, it is necessary to judge whether the drag exceeds the threshold, and if it exceeds the threshold, the activity operation is ended.
The pit encountered here is that the single-finger return and the double-click zoom gesture conflict. At present, there is no good solution. You can only turn on the thread timing to judge based on the flag. Everyone has a good solution, please contact me and let me know ,Thank you!
This basically completes the expansion of PhotoView. It can already be used in projects.
But this article is not over yet, let's talk about the full version implementation of shared elements
3 Full version implementation of shared elements
Android's built-in shared elements can only be used above 5.0. So how to be compatible below 5.0. And how is the drag sharing in Demo implemented?
In fact, the idea is very simple. You only need to close the system special animation when Activity A starts Activity B, and pass in the information such as the size and coordinates of the clicked View. B is first in a transparent state, and the View on B is made a displacement animation. It can be achieved.
As for dragging and dropping shared elements, the principle is the same, the specific details are in the demo~~
This concludes this article~
DragPhotoView project address
If you feel good, welcome Star