Please indicate that this article is from xiaamming's blog( http://blog.csdn.net/xiaanming/article/details/17761431 )Please respect the hard work of others, thank you!

I wrote an article about meituan.com, the effect of purchase box in public comments Android monitors ScrollView to achieve the purchase suspension effect of meituan and popular Reviews , I don't think the effect is very good. If I quickly slide the interface and display the hover box, there will be a card phenomenon. Some friends say that sometimes there will be two layouts, especially the ScrollView scrolling Y is worth monitoring. I also use the Handler to get it. Some friends introduced the Scrolling Tricks to me. I downloaded it and tried it. It's really meituan The purchase box of popular reviews uses this effect, but the Scrolling Tricks can only be used above API11, which is a little tragic. Then I made some modifications and shared the implementation ideas to you, which is very simple

First of all, you need to monitor ScrollView first. You can get the Y value of scrolling directly in the onScrollChanged() method. In the previous article, Handler is used. Take a detour. Look at the code directly

package com.example.meituandemo;



 




import android.content.Context;




import android.util.AttributeSet;




import android.widget.ScrollView;



/**



 * @blog http://blog.csdn.net/xiaanming



 * 



 * @author xiaanming



 *



 */




public class MyScrollView extends ScrollView {



 private OnScrollListener onScrollListener;



    



    public MyScrollView(Context context) {



        this(context, null);



    }



   



    public MyScrollView(Context context, AttributeSet attrs) {



        this(context, attrs, 0);



 }



 



  public MyScrollView(Context context, AttributeSet attrs, int defStyle) {



        super(context, attrs, defStyle);



  }



   



    /**




   * Set scroll interface



  * @param onScrollListener



    */



  public void setOnScrollListener(OnScrollListener onScrollListener) {



        this.onScrollListener = onScrollListener;



 }



   



    



    @Override




    public int computeVerticalScrollRange() {



        return super.computeVerticalScrollRange();



    }



    



 



   @Override




    protected void onScrollChanged(int l, int t, int oldl, int oldt) {



      super.onScrollChanged(l, t, oldl, oldt);



      if(onScrollListener != null){



           onScrollListener.onScroll(t);



       }



   }



 



 



 



    /**




   * 



    * Scrolling callback interface



     * 



    * @author xiaanming



  *



     */



  public interface OnScrollListener{



      /**




       * Callback method, return the Y direction distance of MyScrollView sliding



        * @param scrollY



         *              ,



      */



      public void onScroll(int scrollY);



    }



   



    



 



}

Next let's look at the layout file of the main interface

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"



    android:id="@+id/parent_layout"




    xmlns:tools="http://schemas.android.com/tools"




    android:layout_width="match_parent"




    android:layout_height="match_parent"




    android:orientation="vertical" >



 



    <ImageView




        android:id="@+id/imageView1"




        android:layout_width="match_parent"




        android:layout_height="45dip"




        android:scaleType="centerCrop"




        android:src="@drawable/navigation_bar" />



 



    <com.example.meituandemo.MyScrollView




        android:id="@+id/scrollView"




        android:layout_width="fill_parent"




        android:layout_height="fill_parent" >



 



        <FrameLayout




            android:layout_width="match_parent"




            android:layout_height="wrap_content" >



 



            <LinearLayout




                android:layout_width="match_parent"




                android:layout_height="wrap_content"




                android:orientation="vertical" >



 



                <ImageView




                    android:id="@+id/iamge"




                    android:layout_width="match_parent"




                    android:layout_height="wrap_content"




                    android:background="@drawable/pic"




                    android:scaleType="centerCrop" />



 



                <include




                    android:id="@+id/buy"




                    layout="@layout/buy_layout" />



 



                <ImageView




                    android:layout_width="match_parent"




                    android:layout_height="wrap_content"




                    android:background="@drawable/one"




                    android:scaleType="centerCrop" />



 



                <ImageView




                    android:layout_width="match_parent"




                    android:layout_height="wrap_content"




                    android:background="@drawable/one"




                    android:scaleType="centerCrop" />



 



                <ImageView




                    android:layout_width="match_parent"




                    android:layout_height="wrap_content"




                    android:background="@drawable/one"




                    android:scaleType="centerCrop" />



            </LinearLayout>




 



            <include




                android:id="@+id/top_buy_layout"




                layout="@layout/buy_layout" />



        </FrameLayout>




    </com.example.meituandemo.MyScrollView>




 



</LinearLayout>

Here is the renderings of the layout

From the layout of the main interface, you can see that we have placed a purchase layout on it. You may think, first, let the layout on it be hidden, and then the layout on it will be displayed when it slides up. If it looks like the article I wrote before, the effect is not great, so this modified version is definitely not like this. Let's look at the main interface first Interface code

package com.example.meituandemo;



 




import android.app.Activity;




import android.os.Bundle;




import android.view.ViewTreeObserver.OnGlobalLayoutListener;




import android.widget.LinearLayout;



 




import com.example.meituandemo.MyScrollView.OnScrollListener;



 



/**



 * @blog http://blog.csdn.net/xiaanming



 * 



 * @author xiaanming



 *



 */




public class MainActivity extends Activity implements OnScrollListener{



    /**




   * Custom MyScrollView



    */



  private MyScrollView myScrollView;



    /**




   * Purchase layout in MyScrollView



    */



  private LinearLayout mBuyLayout;



  /**




   * Purchase layout at top



   */



  private LinearLayout mTopBuyLayout;



   



 



   @SuppressWarnings("deprecation")



    @Override




    protected void onCreate(Bundle savedInstanceState) {



        super.onCreate(savedInstanceState); 



      setContentView(R.layout.activity_main);



     



        myScrollView = (MyScrollView) findViewById(R.id.scrollView);



        mBuyLayout = (LinearLayout) findViewById(R.id.buy);



     mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);



       



        myScrollView.setOnScrollListener(this);



       



        //Callback interface when layout state or control visibility changes




     findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {



           



            @Override




            public void onGlobalLayout() {



              //This step is very important to make the purchase layout above coincide with the purchase layout below




              onScroll(myScrollView.getScrollY());



                



            }



       });



 }



 



 



 



 



   @Override




    public void onScroll(int scrollY) {



       int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());



        mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());



 }



 



 



 



}

There are only a few lines of code in the main interface. After reading these codes, you still don't understand how to do it. It doesn't matter. Let me tell you, in fact, we made the purchase layout above coincide with the purchase layout below, layout()This method is to confirm View And then draw it out. The four parameters are View The coordinates of the four points are not relative to the origin of the screen, but also relative to the layout of his father,
We are on the outermost layer of the main page ViewGroup Add the listener of layout state change, when the screen is drawn, it will call back to the method onGlobalLayout()Middle, we are onGlobalLayout()Method manually called the following onScroll()Method, just started myScrollView.getScrollY()Equal to 0, so when scrollY less than mBuyLayout.getTop()When the upper edge of the purchase layout above myScrollView The distance from the top edge of is equal to mBuyLayout.getTop()(That is, the top edge of the layout below to myScrollView So in the beginning, the purchase layout above coincides with the purchase layout below.
When myScrollView Scroll up, and the top edge of the purchase layout above always matches myScrollView Top edge of mBuyLayout.getTop()This distance, so the above purchase layout also scroll up, when scrollY greater than mBuyLayout.getTop()It means that the top edge of the purchase layout slides to the navigation bar layout, so the top edge of the purchase layout is in line with the myScrollView Always keep the top edge of scrollY This distance, so the purchase layout will always be under the navigation bar, as if it's stuck, don't you know? OK, but according to this idea, you can also start using a hover box to cover the purchase layout below, and then onScroll()Method, but the x,y It's not relative to the layout of the parent. Pay attention to this, so that the child can achieve the effect, but it's much more complicated than this. So we can use this function directly when we encounter similar functions. It's simple and clear. OK, you can't wait to see the effect. Let's run the next program

Run the program you will find that no matter how we slide, there will be no situation of the previous article. It's very smooth. It's completely consistent with the effect of meituan and public comments. OK, the explanation of the revised 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 the previous purchase layout. The usage method is very simple. You only need to set the layout settings you need to set Tag by sticky， as

     <FrameLayout




            android:layout_width="fill_parent"




            android:layout_height="100dip"




            android:background="#ff00ffff"




            android:tag="sticky" >



 



            <Button




                android:id="@+id/button"




                android:layout_width="fill_parent"




                android:layout_height="wrap_content"




                android:text="Button" />



        </FrameLayout>

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

We recommend that you download the following code

Multiple purchase layout effect source codes, click download