Android imitation meituan.com and public comment purchase box suspension effect modified version

I wrote an article about the purchase box effect of meituan.com and public comments. Android monitors Scrollview to realize the purchase suspension effect of meituan and public comments. I don't think the effect is very good. If you quickly slide the interface and display the suspension box, there will be one card. Some friends say that sometimes there will be two layouts, In particular, Scrollview scrolling y is worth listening to. I also used the handler to get it. A friend introduced me to scrolling tricks. I downloaded it and tried it. Indeed, meituan.com and the purchase box of public comments use this effect, but scrolling tricks can only be used above api11. This is a little tragedy. Then I made some modifications, And share the implementation ideas to you, which is very simple to implement

First of all, you should listen to the Scrollview first. You can get the y value of scrolling directly in the onscrollchanged () method. In the previous article, you used handler. If you take a detour, just look at the code

Next, take a look at the layout file of the main interface

The following is the rendering of the layout:

From the layout of the main interface, you can see that we have placed a purchased layout on it. You may want to hide the layout above first and display it when the layout below slides up. If this is similar to the article I wrote before, the effect is not great, so this modified version is definitely not like this, Let's look at the code of the main interface first

The main interface is just a few lines of code. After reading these codes, you may still not understand how to do it. It doesn't matter. Let me tell you, in fact, we make the purchase layout above coincide with the purchase layout below. The layout () method determines the size and position of the view, and then draws it, The four parameters are the coordinates of the four points of the view. Their coordinates are not relative to the origin of the screen, but also relative to their parent layout.

We added a layout status change listener to the ViewGroup at the outermost layer of the main page. When the screen is drawn, it will be recalled to the method ongloballayout(). We manually called the next onscroll() method in the ongloballayout() method. At first, myscrollview. Getscroll() is equal to 0, so when scroll is less than mbuylayout. Gettop(), The distance from the upper edge of the upper purchase layout to the upper edge of myscrollview is equal to mbuylayout. Gettop() (that is, the upper edge of the lower layout to the upper edge of myscrollview). Therefore, at first, the upper purchase layout coincides with the lower purchase layout.

When myscrollview scrolls upward, and the upper edge of the purchase layout always keeps the distance of mbuylayout. Gettop() from the upper edge of myscrollview, so the purchase layout also scrolls upward. When scrolly is greater than mbuylayout. Gettop(), it means that the upper edge of the purchase layout slides to the navigation bar layout, Therefore, at this time, the upper edge of the purchase layout and the upper edge of myscrollview should always maintain the scrolly distance, so the purchase layout will always be under the navigation bar, just like sticking. Do you understand? OK, but according to this idea, you can just start to use a floating box to cover the following purchase layout, and then update the position of the floating box in the onscroll () method. However, the X and y of the floating box are not relative to the parent layout. Note that the child can also achieve the effect, but it is much more complex, So when we encounter similar functions, we can use them directly. It's concise and clear. Well, you can't wait to see the effect. Let's run the program next.

Running the program, you will find that no matter how we slide, the situation in the previous article will not appear. It is very smooth. This is completely consistent with the effect of meituan and public comments. Well, the explanation of the modified version is over here. If you have any questions, please leave a message below and I will answer them for you!

Project source code, click download

It contains the effect of multiple purchase layouts. The next purchase layout will top up the previous purchase layout. The method of use is also very simple. You only need to set the layout you need to set as sticky, such as

In this way, the layout will stick to the top when it scrolls to the top. You can download it and try it!

It is recommended that you download the following code: multiple purchase layout effect source code, click download

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.