Android imitation music Yuetai page interaction example code

summary

The interaction of the playing page of the new yinyuetai app is very interesting. You can drag the player down, then suspend a small box at the bottom, or drag left and right, and then there will be corresponding effects when it rebounds. This interaction effect is also very common in headline videos and some video focused apps.

A few days ago, I saw that netizens imitated this effect. I think it's good. Now share it and the code can be optimized. The player here uses the ijkplayer of station B. first, put on two moving pictures.

When the picture reaches the bottom, drag left and right

Implementation ideas

First of all, if we drag the view to reduce the effect, we certainly need to customize a view. According to the scene of our project, we need two views, one is the dragged view, and the other is the floating up and down view (which can be reduced). In order to realize dragging, we know that we will use the viewdraghelper class, which is specially designed for dragging.

Then, for the view dragged to the bottom, we need to achieve the effect of dragging left and right. In fact, this is relatively easy to achieve. We can judge the status of the current view through the onviewpositionchanged method of viewdraghelper, and then we can zoom and gradient the view.

code analysis

First, we will customize a container. The init method of the container will initialize two views: mflexview (the view dragged to the bottom) and mfollowview (the view scaled with the touch)

The callback of viewdraghelper needs to do a lot of things. When mflexview is dragged, the corresponding change effects of mflexview and mfollowview need to be set at the same time. When mflexview is released, the effects of closing or folding need to be handled. So here we need to listen to various callback events of viewdraghelper. This is also the core of this function:

The next step is to process measurement and positioning. The arrangement effect we achieve is similar to the effect of LinearLayout vertical arrangement. Here, we need to reset the highuse of measurechildwithmargins; During onlayout, the location is directly located when the location cache is not empty because the viewdraghelper is doing some translation when handling touch events. If an element updates the UI, it will lead to re layout. Therefore, record the location in the onviewpositionchanged method of flexcallback, and then restore the previous view through layout when springback.

For the processing of touch events, since scaling will not affect the true width and height of mflexview, viewdraghelper will still block the area of the true width and height of mflexview. Therefore, judge whether the finger falls within the visual range of mflexview, and then adjust the shouldintercepttouchevent method of viewdraghelper.

At the same time, we need to listen to the rolling event. We need to close the entire translation execution event here.

In the actual application, in order to achieve the effect of the detail page after rebound, we need to implement a combined view. You can see the source code of Yinyue platform by yourself

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.