Picture scrolling effect of Android imitation Taobao commodity browsing interface

When browsing product details on Taobao, the product picture is placed at the back. When the first Scrollview scrolls to the bottom, there will be a prompt. Continue to drag to browse the picture. It's not difficult to copy this effect. Just define a layout to manage two scrollviews. When the first Scrollview slides to the bottom, slide up again to enter the second Scrollview. The effects are as follows:

The points needing attention are:

1. If you manually slide to the bottom, you need to press it again to continue sliding down, and you don't need to scroll to the bottom automatically

2. In the process of sliding from the previous Scrollview to the next Scrollview, dragging multiple fingers successively will not lead to drastic changes in the layout, that is, sliding multiple pointers will not lead to drastic changes in the move distance.

The implementation idea of this layout is:

Place two scrollviews in the layout and set ontouchlistener for them to judge the Scrollview's rolling distance at all times. Once the first Scrollview rolls to the bottom, the logo can be dragged upward. At this time, start recording the sliding distance mmovelen and re layout the two scrollviews according to mmovelen; Similarly, listen to whether the second Scrollview scrolls to the top to drag down.

OK, after understanding the principle, you can look at the code:

The notes are very clear, and there are several key points to talk about: 1. Since ontouchlistener is set for the two scrollviews here, it can't be set in other places, otherwise it will be useless.

2. The layout parameters of the two scrollviews are uniformly determined by mmovelen.

3. The variable mevents has two functions: one is to prevent the layout from changing due to continued sliding when manually sliding to the bottom or top. You must press it again to continue sliding; Second, when a new pointer is down or up, set mevents to - 1 to discard the first move event to come and prevent drastic changes in mmovelen. Why the upheaval? It is assumed that only one finger is sliding at the beginning, and the recorded coordinate value is the event coordinate point of this pointer. At this time, the other finger presses, resulting in another pointer for the event. At this time, the coordinates of the incoming move event may become the coordinates of the new pointer. At this time, the difference between the calculated and the last coordinates will change dramatically, The changing distance is the distance between two pointers. Therefore, discard the move event, let the mlasty value record the coordinates of the pointer, and then start calculating the mmovelen. The same goes for pointer up.

After understanding these points, it seems that there is no difficulty and the amount of code is very small.

Layout of mainactivity:

Just put a few pictures in Scrollview. Code of mainactivity:

The above is the whole content of this article. I hope it will be helpful to your study.