Android parody, VW reviews buy box suspension effect

such as the United States Network, the public reviews the purchase box suspension effect, the user in the upward sliding interface, the purchase button is always in the interface, the user experience is very good, very humane. Here's a look at how the code is implemented:

Main interface Layout file Main.xml

<? XML version= "1.0" encoding= "UTF-8"?> 
<LinearLayoutxmlns: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" >        <ImageViewAndroid:id= "@+id/imageview1"Android:layout_width= "Match_parent"Android:layout_height= "45dip"Android:scaletype= "Centercrop"android:src= "@drawable/navigation_bar" />        <Com.example.meituandemo.MyScrollViewAndroid:id= "@+id/scrollview"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent" >            <FramelayoutAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content" >                <LinearLayoutAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"android:orientation= "vertical" >                    <ImageViewAndroid:id= "@+id/iamge"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/pic"Android:scaletype= "Centercrop" />                    <includeAndroid:id= "@+id/buy"Layout= "@layout/buy_layout" />                    <ImageViewAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/one"Android:scaletype= "Centercrop" />                    <ImageViewAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/one"Android:scaletype= "Centercrop" />                    <ImageViewAndroid:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/one"Android:scaletype= "Centercrop" />              </LinearLayout>                <includeAndroid:id= "@+id/top_buy_layout"Layout= "@layout/buy_layout" />          </Framelayout>      </Com.example.meituandemo.MyScrollView>    </LinearLayout>  

Snapping up the hover box layout file now Buy_layout.xml

<?XML version= "1.0" encoding= "UTF-8"?>  <LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"android:orientation= "Horizontal"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content" >        <ImageViewAndroid:id= "@+id/buy_layout"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/buy" />    </LinearLayout>  

Custom ScrollView Control Myscrollview class

Package Com.greentree.meituanxuanfudemo;import Android.content.context;import Android.util.attributeset;import    Android.widget.scrollview;public class Myscrollview extends ScrollView {private Onscrolllistener onscrolllistener;    Public Myscrollview (Context context) {super (context);    } public Myscrollview (context context, AttributeSet Attrs) {Super (context, attrs);    } public Myscrollview (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); }/** * Set scrolling interface * * @param onscrolllistener */public void Setonscrolllistener (Onscrolllistener onsc    Rolllistener) {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, OL        DL, Oldt);          if (Onscrolllistener! = null) {  Onscrolllistener.onscroll (t);        }}/** * * Scrolling Callback interface * * @author xiaanming * */public interface Onscrolllistener { /** * Callback method, returns the Y-direction distance of the Myscrollview slide * * @param scrolly */public void onscroll (    int scrolly); }}

Main interface mainactivity

Package Com.greentree.meituanxuanfudemo;import Com.greentree.meituanxuanfudemo.MyScrollView.OnScrollListener; Import Android.app.activity;import Android.os.bundle;import Android.view.ViewTreeObserver.OnGlobalLayoutListener; Import Android.widget.linearlayout;public class Mainactivity extends Activity implements Onscrolllistener {/** * from    Definition of Myscrollview */private Myscrollview Myscrollview;    /** * Myscrollview inside the purchase layout * * Private linearlayout mbuylayout;    /** * At the top of the purchase layout */private linearlayout mtopbuylayout;        @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); When the state of the layout or the visibility of the control changes the callback interface fiNdviewbyid (r.id.parent_layout). Getviewtreeobserver (). Addongloballayoutlistener (New Ongloballayoutlistener ( {@Override public void Ongloballayout () {//This step is important to make the above purchase                    Buy layout and the following purchase layout coincident Onscroll (myscrollview.getscrolly ());    }                }); } @Override public void onscroll (int scrolly) {int mbuylayout2parenttop = Math.max (scrolly, Mbuylayout.getto        P ()); Mtopbuylayout.layout (0, Mbuylayout2parenttop, Mtopbuylayout.getwidth (), Mbuylayout2parenttop + mTopBuyLayou    T.getheight ()); }}

The main interface on just a few lines of code, maybe after reading the code you still do not understand how to do it, it's okay, I give everyone to say, in fact, we are to let the above purchase layout and the following purchase layout coincident, layout () This method is to determine the size and location of the view, and then draw it out, The four parameters are the coordinates of the four points of the view, and his coordinates are not relative to the original point of the screen, and relative to his parent layout,
We added a listener for the layout state change on the outermost viewgroup of the main page, and when the screen was drawn back to Method Ongloballayout (), we called the Onscroll () method manually in the Ongloballayout () method, At first myscrollview.getscrolly () equals 0, so when scrolly is less than mbuylayout.gettop (), The distance above the top edge of the purchase layout to the top edge of the Myscrollview equals Mbuylayout.gettop () (that is, the top edge of the layout below to the top edge of the Myscrollview), so the purchase layout at the beginning is coincident with the purchase layout below.
When the Myscrollview is scrolled upward, and the top edge of the purchase layout above is always kept to the top edge of the Myscrollview mbuylayout.gettop () This distance, so the purchase layout above also scrolls up, When scrolly is greater than mbuylayout.gettop (), it means that the top edge of the purchase layout is sliding to the navigation bar layout, so at this point the top edge of the purchase layout and the top edge of the Myscrollview are always scrolly this distance, So the purchase layout will always be under the navigation bar, as if stuck, do not know you know? OK, but according to this idea you can also just start using a suspension box to cover the purchase layout below, and then update the position of the onscroll () method, but the hover box x, Y is not relative to the parent layout, this should be noted, this can also achieve the effect, but relative to this, To be more complex, so we have a similar function directly using this on the line, concise and clear, well, you are not eager to see the effect, then we will run the next program it

Project Source Click to download

The demo is based on the original blogger wrote, pictures are, so the interface will be more ugly, please do not pay attention to these details ~!

This article is from Xiaanming's blog (http://blog.csdn.net/xiaanming/article/details/17761431)

Android parody, VW reviews buy box suspension effect