Android imitation e-commerce app product details page button floating effect

1. The renderings are as follows:

The user experience is still very cool. Today we will explain how to achieve this effect.

2. Analysis

In order to facilitate understanding, draw and analyze

As shown in the figure, the whole page is divided into four parts:

1. Floating content, floatview

2. Top content, headview

3. Intermediate content, the same as suspended content, middleview

4. Product details display page, detailview

Because the height of the page content will exceed the screen, Scrollview is used to realize scrolling. The suspended view is at the same level as Scrollview and is in a frame layout or relative layout.

When the scrolling distance in the Y direction is less than the distance from the middle middleview to the top, the middleview will naturally disappear with the page sliding upward. We display the suspended view to achieve the effect that the middleview is always stuck at the top.

When the scrolling distance in the Y direction is greater than the distance from the middle view to the top, the floating view can be hidden.

Through analysis, we found that we only need to know the rolling distance of Scrollview and the height from middleview to the top. So far, the complex interactive effects have been transformed into two simple APIs.

3. The first method is implemented

3.1 get the distance from the middleview to the top of the parent container

In oncreate() of the activity, the height of the view obtained directly through the gettop() method of the view will return 0. This is because the view has not been drawn to the interface at this time, so we use the above method to set listening acquisition for the view. Since multiple drawing may occur, remember to remove the listening event at last.

The following code can also be obtained:

Use the post method to put the operations in the queue. After the system layout is completed, execute the events in the queue, and you can also obtain the correct top value of the view.

3.2 obtaining the vertical rolling distance

There is a content change method onscrollchanged () in the parent view of Scrollview. Although this method is external to protect and cannot be called, internally, this method will be executed when Scrollview scrolls. Therefore, we customize a myscrollview to pass the scrolling distance to the outside through callback in onscrollchanged ().

The complete code of custom Scrollview is as follows:

3.3 use

In acitivity, you can set a user-defined rolling listening event for Scrollview

In this way, the display and hiding of the floatview is controlled by the scroll value of the vertical method,

Set touch monitoring for the suspended view and pass the user's gesture to the Scrollview, so that when the user slides the suspended view, the content area can also follow the scroll.

Here is the layout code

4. The second way

The difference between this method and the first method is that the method to obtain the rolling position is different. This method is simpler:

Some readers may want to ask why the first method is introduced since there is such a simple method to set monitoring directly. Carefully, you may have found that in the first method, I also callback the parameter status representing the current callback status in the customized listening event, because many apps cannot be processed by manual dragging and inertial scrolling. For example, on the Taobao product details page, when the top value of view in the middle of the boundary value is reached, the detail content at the bottom will be pulled out only after the user manually drags for a distance, and the inertial sliding will only stop there.

5. Summary

The above is about the method of Android realizing that the button is suspended in a fixed position as it scrolls up and down. I hope the content of this article can be helpful for everyone to develop Android.