Android provides ScrollView rolling monitoring to achieve the suspension of purchases by Meituan and public comments.

Android provides ScrollView rolling monitoring to achieve the suspension of purchases by Meituan and public comments.

Post please indicate this article from xiaanming blog (http://blog.csdn.net/xiaanming), please respect others' hard work results, thank you!

With the rapid development of the mobile Internet, it has been closely related to our lives. Many people can see in the bus and subway lines looking down at their mobile phone screens, since then, the word "Bow family" has emerged. As a mobile industry developer, I myself am also a "Bow family ", during the commuting time, I took a look at the news on the bus and sent the time. Sometimes I also looked at some Interface Effects of popular apps. Why are apps so popular? There is also a direct relationship with user experience and uidesign. Recently, the following effects were seen in the apps of Meituan and the public comments. I feel that the users are good and user-friendly, so I tried to implement it myself, next, I will explain the Implementation ideas!

As shown in figure (2), when the layout is moved up to the navigation bar layout, the layout is immediately snapped up and pasted under the navigation bar layout. Other la S below can still be slide, when we slide down, the layout of the flash sales immediately slides down, which seems a bit complicated, but you may suddenly realize the idea.

When we slide upwards, we can determine whether the layout of the flash sale will slide under the navigation bar layout. If the flash sale is on the top of the navigation bar, we created a new floating box for flash sales to be displayed under the navigation bar, so that we can immediately snap up and paste it under the navigation bar. When we slide down, when the layout of an instant flash sale is just below the newly created instant flash sale suspension box, we will remove the instant flash sale suspension box. It may be a bit difficult to say. Now that we know our ideas, next we will implement the effect.

Create an Android project named MeiTuanDemo. Let's take a look at the layout of the Buy now (buy_layout.xml). Here, I cut the picture from the Meituan for convenience.

2. Android: orientation = "horizontal"
3. Android: layout_width = "fill_parent"
4. Android: layout_height = "wrap_content">
6. Android: id = "@ + id/buy_layout"
7. Android: layout_width = "fill_parent"
8. Android: layout_height = "wrap_content"
9. Android: background = "@ drawable/buy"/>

11. 
    The layout of the flash sale is realized. Next, the layout of the main interface is implemented. The navigation bar is located above. For convenience, the pictures taken directly from the Meituan are arranged. Then, the ViewPager layout below is immediately snapped up the layout, other la s are placed in ScrollView, and the interface is quite simple.

    1. Xmlns: tools = "http://schemas.android.com/tools"
    2. Android: layout_width = "match_parent"
    3. Android: layout_height = "match_parent"
    4. Android: orientation = "vertical">
    6. Android: id = "@ + id/imageView1"
    7. Android: scaleType = "centerCrop"
    8. Android: layout_width = "match_parent"
    9. Android: layout_height = "45dip"
    10. Android: src = "@ drawable/navigation_bar"/>
    13. Android: id = "@ + id/scrollView"
    14. Android: layout_width = "fill_parent"
    15. Android: layout_height = "fill_parent">
    17. Android: layout_width = "match_parent"
    18. Android: layout_height = "wrap_content"
    19. Android: orientation = "vertical">
    21. Android: id = "@ + id/iamge"
    22. Android: layout_width = "match_parent"
    23. Android: layout_height = "wrap_content"
    24. Android: background = "@ drawable/pic"
    25. Android: scaleType = "centerCrop"/>
    27. Android: id = "@ + id/buy"
    28. Layout = "@ layout/buy_layout"/>
    30. Android: layout_width = "match_parent"
    31. Android: layout_height = "wrap_content"
    32. Android: background = "@ drawable/one"
    33. Android: scaleType = "centerCrop"/>
    35. Android: layout_width = "match_parent"
    36. Android: layout_height = "wrap_content"
    37. Android: background = "@ drawable/one"
    38. Android: scaleType = "centerCrop"/>
    40. Android: layout_width = "match_parent"
    41. Android: layout_height = "wrap_content"
    42. Android: background = "@ drawable/one"
    43. Android: scaleType = "centerCrop"/>

    47. You will find that the above main interface layout is not a ScrollView, but a custom MyScrollView. Next let's take a look at the code in the MyScrollView class.

        1. Package com. example. meituandemo;
        3. Import android. content. Context;
        4. Import android. OS. Handler;
        5. Import android. util. AttributeSet;
        6. Import android. view. MotionEvent;
        7. Import android. widget. ScrollView;
        8. /**
        9. * Blog: http://blog.csdn.net/xiaanming
        10. *
        11. * @ Author xiaanming
        12. *
        13. */
        14. Public class MyScrollView extends ScrollView {
        15. Private OnScrollListener onScrollListener;
        16. /**
        17. * It is mainly used when the user's finger leaves MyScrollView, and MyScrollView continues to slide. We use it to save the distance of Y and then compare
        18. */
        19. Private int lastScrollY;
        21. Public MyScrollView (Context context ){
        22. This (context, null );
        23. }
        25. Public MyScrollView (Context context, AttributeSet attrs ){
        26. This (context, attrs, 0 );
        27. }
        29. Public MyScrollView (Context context, AttributeSet attrs, int defStyle ){
        30. Super (context, attrs, defStyle );
        31. }
        33. /**
        34. * Set the scrolling Interface
        35. * @ Param onScrollListener
        36. */
        37. Public void setOnScrollListener (OnScrollListener onScrollListener ){
        38. This. onScrollListener = onScrollListener;
        39. }
        42. /**
        43. * It is used to obtain the Y distance of MyScrollView scrolling when the user's finger leaves MyScrollView, and then calls back to the onScroll method.
        44. */
        45. Private Handler handler = new Handler (){
        47. Public void handleMessage (android. OS. Message msg ){
        48. Int scrollY = MyScrollView. this. getScrollY ();
        50. // At this time, the distance is not the same as the distance in the recording. messages are sent to handler within 5 milliseconds.
        51. If (lastScrollY! = ScrollY ){
        52. LastScrollY = scrollY;
        53. Handler. sendMessageDelayed (handler. obtainMessage (), 5 );
        54. }
        55. If (onScrollListener! = Null ){
        56. OnScrollListener. onScroll (scrollY );
        57. }
        59. };
        61. };
        63. /**
        64. * Override onTouchEvent. When the user's hand is on MyScrollView,
        65. * Directly call back the Y-direction distance of MyScrollView to the onScroll method. When the user raises his hand,
        66. * MyScrollView may still slide, so when the user raises his hand, we send a message to the handler every Five milliseconds and process the message in the handler.
        67. * MyScrollView sliding distance
        68. */
        69. @ Override
        70. Public boolean onTouchEvent (MotionEvent ev ){
        71. If (onScrollListener! = Null ){
        72. OnScrollListener. onScroll (lastScrollY = this. getScrollY ());
        73. }
        74. Switch (ev. getAction ()){
        75. Case MotionEvent. ACTION_UP:
        76. Handler. sendMessageDelayed (handler. obtainMessage (), 5 );
        77. Break;
        78. }
        79. Return super. onTouchEvent (ev );
        80. }
        83. /**
        84. *
        85. * Rolling callback Interface
        86. *
        87. * @ Author xiaanming
        88. *
        89. */
        90. Public interface OnScrollListener {
        91. /**
        92. * Callback method. The Y-direction distance of MyScrollView is returned.
        93. * @ Param scrollY
        94. *,
        95. */
        96. Public void onScroll (int scrollY );
        97. }
        101. }

             You may understand the code by listening to the rolling Y value of ScrollView. We know that ScrollView does not implement rolling listening, so we must monitor ScrollView on our own, we naturally want to listen to the rolling Y axis in the onTouchEvent () method, but you will find that when we slide the ScrollView, we leave the ScrollView with our fingers. It may continue to slide for a distance, so we choose to judge whether the ScrollView stops sliding every 5 milliseconds when the user's finger leaves, callback the ScrollView's rolling Y value to the onscrolly (int scrollY) method of the OnScrollListener interface, we only need to call ScrollView. We only need to call the setOnScrollListener Method on ScrollView to listen to the scrolling Y value.
             

             The implementation of the ScrollView scrolling Y value listening, next is simple, we just need to display the buy now floating box and remove the floating box, next look at the main interface Activity code writing

             1. Package com. example. meituandemo;
             3. Import android. app. Activity;
             4. Import android. content. Context;
             5. Import android. graphics. PixelFormat;
             6. Import android. OS. Bundle;
             7. Import android. view. Gravity;
             8. Import android. view. LayoutInflater;
             9. Import android. view. View;
             10. Import android. view. WindowManager;
             11. Import android. view. WindowManager. LayoutParams;
             12. Import android. widget. LinearLayout;
             13. Import com. example. meituandemo. MyScrollView. OnScrollListener;
             14. /**
             15. * Blog: http://blog.csdn.net/xiaanming
             16. *
             17. * @ Author xiaanming
             18. *
             19. */
             20. Public class MainActivity extends Activity implements OnScrollListener {
             21. Private MyScrollView myScrollView;
             22. Private LinearLayout mBuyLayout;
             23. Private WindowManager mWindowManager;
             24. /**
             25. * Mobile phone screen width
             26. */
             27. Private int screenWidth;
             28. /**
             29. * Floating box View
             30. */
             31. Private static View suspendView;
             32. /**
             33. * Parameters of the Floating Box
             34. */
             35. Private static WindowManager. LayoutParams suspendLayoutParams;
             36. /**
             37. * Layout height
             38. */
             39. Private int buyLayoutHeight;
             40. /**
             41. * The distance between myScrollView and the top of its parent class Layout
             42. */
             43. Private int myScrollViewTop;
             45. /**
             46. * The distance between the purchased layout and the top of its parent Layout
             47. */
             48. Private int buyLayoutTop;
             51. @ Override
             52. Protected void onCreate (Bundle savedInstanceState ){
             53. Super. onCreate (savedInstanceState );
             54. SetContentView (R. layout. activity_main );
             56. MyScrollView = (MyScrollView) findViewById (R. id. scrollView );
             57. MBuyLayout = (LinearLayout) findViewById (R. id. buy );
             59. MyScrollView. setOnScrollListener (this );
             60. MWindowManager = (WindowManager) getSystemService (Context. WINDOW_SERVICE );
             61. ScreenWidth = mWindowManager. getdefadisplay display (). getWidth ();
             62. }
             64. /**
             65. * When the window has focus, that is, when all la s are drawn, we can obtain the height of the purchased layout and the position of myScrollView at the top of the parent layout.
             66. */
             67. @ Override
             68. Public void onWindowFocusChanged (boolean hasFocus ){
             69. Super. onWindowFocusChanged (hasFocus );
             70. If (hasFocus ){
             71. BuyLayoutHeight = mBuyLayout. getHeight ();
             72. BuyLayoutTop = mBuyLayout. getTop ();
             74. MyScrollViewTop = myScrollView. getTop ();
             75. }
             76. }
             80. /**
             81. * The Rolling callback method. When the rolling Y distance is greater than or equal to the purchased layout distance from the top of the parent layout, the purchased floating box is displayed.
             82. * If the distance between the rolling Y and the parent layout is smaller than the purchased layout, and the height of the purchased layout is added to the top of the parent layout, the suspended box is removed.
             83. *
             84. */
             85. @ Override
             86. Public void onScroll (int scrollY ){
             87. If (scrollY> = buyLayoutTop ){
             88. If (suspendView = null ){
             89. ShowSuspend ();
             90. }
             91. } Else if (scrollY <= buyLayoutTop + buyLayoutHeight ){
             92. If (suspendView! = Null ){
             93. RemoveSuspend ();
             94. }
             95. }
             96. }
             99. /**
             100. * Display the suspended box for purchase
             101. */
             102. Private void showSuspend (){
             103. If (suspendView = null ){
             104. SuspendView = LayoutInflater. from (this). inflate (R. layout. buy_layout, null );
             105. If (suspendLayoutParams = null ){
             106. SuspendLayoutParams = new LayoutParams ();
             107. SuspendLayoutParams. type = LayoutParams. TYPE_PHONE; // The type of the floating window, which is generally set to 2002, indicates that the window is on top of all applications, but under the status bar
             108. SuspendLayoutParams. format = PixelFormat. RGBA_8888;
             109. SuspendLayoutParams. flags = LayoutParams. FLAG_NOT_TOUCH_MODAL
             110. | LayoutParams. FLAG_NOT_FOCUSABLE; // floating window behavior, such as non-focusing and non-Modal Dialog Boxes
             111. SuspendLayoutParams. gravity = Gravity. TOP; // alignment of the floating window
             112. SuspendLayoutParams. width = screenWidth;
             113. SuspendLayoutParams. height = buyLayoutHeight;
             114. SuspendLayoutParams. x = 0; // The Position of the floating Window X
             115. SuspendLayoutParams. y = myScrollViewTop; // The Position of the floating window Y.
             116. }
             117. }
             119. MWindowManager. addView (suspendView, suspendLayoutParams );
             120. }
             123. /**
             124. * Remove the purchased floating box
             125. */
             126. Private void removeSuspend (){
             127. If (suspendView! = Null ){
             128. MWindowManager. removeView (suspendView );
             129. SuspendView = null;
             130. }
             131. }
             133. }

                  
                  The above code is relatively simple. The display and removal of floating boxes are determined based on the sliding distance of ScrollView. The implementation of floating boxes is mainly implemented through the WindowManager class, call the addView method of this class to add a floating box. removeView is used to remove the floating box.
                  The above code is used to achieve the effect of the comments. Before running the project, we must add it to AndroidManifest. xml.

                  
                  Let's run the project and check the effect.