Android control suspension effect example code

With the rapid development of mobile Internet, it has been closely related to our life. Many people can be seen in the bus and subway. People look down at their mobile phone screen. From then on, the word "bow head group" came into being. As a developer in the mobile industry, I am also a "bow head group", During commuting time, I read the news on the bus and subway to make the delivery time. Sometimes I also see some interface effects of popular apps. Why are other people's apps so popular? It also has a direct relationship with user experience and UI design. Recently, I saw the following effects in meituan and public comment apps. I feel that users are good and humanized, so I also tried to realize it. Next, I'll explain the implementation ideas!

As shown in figure (2) above, when the immediate rush purchase layout slides up to the navigation bar layout, the immediate rush purchase layout is pasted under the navigation bar layout, and other layouts below can still slide. When we slide down, the immediate rush purchase layout slides down again. It seems a little complicated, but you may suddenly realize the idea.

When we slide up, we judge whether the layout of immediate rush purchase slides below the navigation bar layout. If the top of immediate rush purchase is on the navigation bar, we create a new suspension box for immediate rush purchase to display under the navigation bar, so as to achieve the effect of immediate rush purchase pasted under the navigation bar. When we slide down, When the bottom of the immediate rush purchase layout is just below the newly-built immediate rush purchase suspension box, we will remove the immediate rush purchase suspension box, which may be a bit awkward. Now that we know the idea, let's realize the effect.

Create a new Android project named meituandemo. First, look at the layout of buy_layout. XML. Here, I directly cut the picture from meituan for convenience

The layout of immediate rush purchase is realized. Next, the layout of the main interface is realized. The above is the navigation bar layout. For convenience, the pictures are directly intercepted from meituan. Then, the viewpager layout below is the layout of immediate rush purchase. Other layouts are placed in Scrollview, and the interface is still very simple

You will find that the main interface layout above is not a Scrollview, but a custom myscrollview. Next, take a look at the code in the myscrollview class

After looking at the code, you may understand that it is to monitor the Scrollview's scrolling y value. We know that Scrollview does not implement scrolling monitoring, so we must monitor the Scrollview by ourselves. We naturally think of monitoring the scrolling Y axis in the ontouchevent() method, but you will find that when we slide the Scrollview, When our fingers leave Scrollview. It may continue to slide for some distance, so we choose to judge whether the Scrollview stops sliding every 5 milliseconds when the user's finger leaves, and call back the Scrollview scroll y value to the onscroll (int scrolly) method of the onscrolllistener interface, We only need to call the setonscrolllistener method on the Scrollview to listen for the y value of scrolling.

It is realized to monitor the y value of Scrollview scrolling. Next, it is simple. We only need to display the immediate rush to buy the suspension box and remove the suspension box. Next, let's take a look at the coding of the main interface activity

The above code is relatively simple. The display and removal of the floating frame is determined according to the sliding distance of the Scrollview. The implementation of the floating frame is mainly realized through the WindowManager class. The addview method of this class is called to add a floating frame, and the removeview is used to remove the floating frame.

This effect of meituan and public comment is realized through the above code. Before running the project, we must add < uses permission Android: name = "Android. Permission. System_alert_window" / > in androidmanifest.xml

Let's run the project and see the effect

Project 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.