The effect of fixing the price and the purchase bar in Android apps that mimics American reviews _android

With the rapid development of mobile Internet, it has been closely related to our life, in the public transit subway can see a lot of people looking down at their own mobile phone screen, from the "Bow family" a word, as a mobile industry developers, I am also a "bow family", It's time to take a look at the news on the subway, and sometimes look at some of the interface effects of the popular app, why is the app so popular? With the user experience and UI design also has a direct relationship, recently in the United States and the general public reviews of the app see the following effect, I feel that the user is good, very user-friendly, so they also try to achieve the next, then explain the realization of the idea!

As pictured above (2) we see that when snapping up the layout immediately to the navigation bar layout, immediately snapped the layout on the navigation bar layout below, the rest of the following layout can still slide, when we slide down, immediately snapped up the layout with the slide down, seemingly a little complicated, But when you think about it, you suddenly have a clue.
As we slide up the process, we judge if the layout of the immediately snapped is slipping below the navigation bar layout, if you snap up the top to the navigation bar, we'll create a new immediately snapped suspension box to display under the navigation bar, which is the result of snapping up the effect immediately below the navigation bar, and when we slide down, When immediately snapped up the layout of the following just to the newly-created immediately after the suspension of the box below, we will remove immediately snapped up the suspension box, may say a bit of a mouthful, since we know the idea, next we will realize the effect.
A new Android project, named Meituandemo, first look at the layout of the immediately snapped (Buy_layout.xml), here to facilitate my direct from the United States to intercept the picture

<?xml version= "1.0" encoding= "UTF-8"?> <linearlayout xmlns:android= 
"http://schemas.android.com/apk/" Res/android " 
  android:orientation=" horizontal " 
  android:layout_width=" fill_parent " 
  android:layout_" height= "Wrap_content" > 
 
  <imageview 
    android:id= "@+id/buy_layout" android:layout_width= "Fill_" 
    Parent " 
    android:layout_height=" wrap_content " 
    android:background=" @drawable/buy "/> 
 
</ Linearlayout> 

Immediately snapped up the layout realized, the next implementation of the main interface layout, above is the navigation bar layout, in order to facilitate or directly from the United States to intercept the picture, and then the following Viewpager layout, immediately snapped up the layout, the other layout placed in the ScrollView inside, the interface is very simple

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:orien" tation= "vertical" > <imageview android:id= "@+id/imageview1" android:scaletype= "Centercrop" Andr 
     
 
  Oid:layout_width= "Match_parent" android:layout_height= "45dip" android:src= "@drawable/navigation_bar"/> 
    <com.example.meituandemo.myscrollview android:id= "@+id/scrollview" android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" > <linearlayout android:layout_width= "match_parent" and roid:layout_height= "wrap_content" android:orientation= "vertical" > <imageview android:id= "@ +id/iamge "android:layout_width=" match_parent "android:layout_height=" Wrap_content "Android:bac" kground= "@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" an droid:background= "@drawable/one" android:scaletype= "Centercrop"/> <imageview android:lay 
        Out_width= "Match_parent" android:layout_height= "wrap_content" android:background= "@drawable/one" Android:scaletype= "Centercrop"/> <imageview android:layout_width= "Match_parent" Androi 
    d:layout_height= "Wrap_content" android:background= "@drawable/one" android:scaletype= "Centercrop"/> 
 </LinearLayout> </com.example.meituandemo.MyScrollView> </LinearLayout>

You will find that the main interface layout above is not ScrollView, but a custom myscrollview, and then look at the code in the Myscrollview class

Package Com.example.meituandemo; 
Import Android.content.Context; 
Import Android.os.Handler; 
Import Android.util.AttributeSet; 
Import android.view.MotionEvent; 
Import Android.widget.ScrollView; /** * Blog Address: http://blog.csdn.net/xiaanming * * * @author xiaanming * */public class Myscrollview extends Scrollvi 
  ew {private Onscrolllistener onscrolllistener; 
   
  /** * is mainly used in the user's finger left Myscrollview,myscrollview still continue to slide, we used to save the distance of Y, and then do compare * * private int lastscrolly; 
  Public Myscrollview {This (context, NULL); 
  Public Myscrollview (context, AttributeSet attrs) {This (context, attrs, 0); 
  Public Myscrollview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); /** * Set Scrolling interface * @param onscrolllistener/public void Setonscrolllistener (Onscrolllistener onscrol 
  Llistener) {this.onscrolllistener = Onscrolllistener; /** * used for user finger to leave MyscrollView when you get the Y-distance of the Myscrollview scrolling, and then callback to the Onscroll method in the * * Private Handler Handler = new Handler () {public void handle 
       
      Message (Android.os.Message msg) {int scrolly = MyScrollView.this.getScrollY (); 
        The distance at this time is not equal to the distance recorded, and a message is sent to handler in 5 milliseconds if (lastscrolly!= scrolly) {lastscrolly = scrolly;  
      Handler.sendmessagedelayed (Handler.obtainmessage (), 5); 
      } if (Onscrolllistener!= null) {onscrolllistener.onscroll (scrolly); 
 
  } 
       
    };  
 
  }; /** * Rewrite ontouchevent, when the user's hand is above the Myscrollview, * directly to the Myscrollview sliding y-direction distance callback to the Onscroll method, when the user raised his hands, * Myscrollvi EW may still be slipping, so when the user raises his hand we send a message to handler in 5 milliseconds, handler processing * Myscrollview Sliding distance * * * @Override public boolean ontouchevent ( 
    Motionevent ev) {if (Onscrolllistener!= null) {onscrolllistener.onscroll (lastscrolly = this.getscrolly ()); Switch (ev.getaction ()) {Case MotionEvent.ACTION_UP:handler.sendMessageDelayed (HANDLER.OBtainmessage (), 5); 
    Break 
  return super.ontouchevent (EV);  
     /** * * * Rolling Callback interface * * @author xiaanming */public interface onscrolllistener{/** * Callback method that returns the Myscrollview sliding y-direction distance * @param scrolly *, */public void onscroll (int scroll 
  Y); 
 } 
   
   
 
}

A look at the code you may understand that is the scrollview of the rolling Y-value monitoring, we know that ScrollView did not implement rolling monitoring, so we have to realize the scrollview monitoring, we naturally think in ontouchevent () method to monitor the scrolling y axis, but you will find that we are sliding scrollview when our fingers leave the scrollview. It may also continue to slide for a distance, so we choose to determine whether the ScrollView stops sliding every 5 milliseconds when the user's finger is left, and scrollview the scrolling y-value back to the onscroll of the Onscrolllistener interface (int Scrolly) method, we only need to call on the scrollview we only need to call the Setonscrolllistener method on the ScrollView to hear the scrolling y value. The
implements the Y-value of scrollview scrolling, and then it's simple, we just need to show that we're snapping up the suspension and removing the suspension box, and then we'll look at the code for the main interface activity.

Package Com.example.meituandemo; 
Import android.app.Activity; 
Import Android.content.Context; 
Import Android.graphics.PixelFormat; 
Import Android.os.Bundle; 
Import android.view.Gravity; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.WindowManager; 
Import Android.view.WindowManager.LayoutParams; 
Import Android.widget.LinearLayout; 
Import Com.example.meituandemo.MyScrollView.OnScrollListener;  /** * Blog Address: http://blog.csdn.net/xiaanming * * * @author xiaanming * */public class Mainactivity extends activity 
  Implements onscrolllistener{private Myscrollview Myscrollview; 
  Private LinearLayout mbuylayout; 
  Private WindowManager Mwindowmanager; 
  /** * Mobile Screen width * * private int screenwidth; 
  /** * Floating frame View/private static view Suspendview; 
  /** * The parameters of the suspension box * * private static windowmanager.layoutparams suspendlayoutparams; 
  /** * Purchase the height of the layout * * private int buylayoutheight; /** * MYSCRollview the top of the layout of the parent class/private int myscrollviewtop; 
   
 
  /** * Purchase layout with its parent class layout of the top distance * * private int buylayouttop; 
    @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); 
    Myscrollview.setonscrolllistener (this); 
    Mwindowmanager = (WindowManager) getsystemservice (Context.window_service);  
  ScreenWidth = Mwindowmanager.getdefaultdisplay (). GetWidth (); When the/** * window has focus, that is, when all the layouts have been drawn, we get the height of the purchase layout and the Myscrollview distance from the top position of the parent-class layout * * * @Override public void ONWINDOWF  
    Ocuschanged (Boolean Hasfocus) {super.onwindowfocuschanged (hasfocus); 
      if (hasfocus) {buylayoutheight = Mbuylayout.getheight (); 
       
      Buylayouttop = Mbuylayout.gettop (); 
    Myscrollviewtop = Myscrollview.gettop ();  
 
 } 
  }
 
  /** * Scrolling callback method, when the y distance of the scroll is greater than or equal to the position of the purchase layout from the top of the parent class layout, the purchased suspension box is displayed * when the distance of the scrolling y is less than the location of the top of the parent class layout and the height of the purchase layout. Remove the Purchased suspension box * */@Override public void onscroll (int scrolly) {if (scrolly >= buylayouttop) {if (Suspendview = = nul 
      L) {showsuspend (); 
      }}else if (scrolly <= buylayouttop + buylayoutheight) {if (Suspendview!= null) {removesuspend (); /** * Display the Purchased suspension box */private void Showsuspend () {if (Suspendview = null) {s 
      Uspendview = Layoutinflater.from (this). Inflate (r.layout.buy_layout, NULL); 
        if (Suspendlayoutparams = = null) {suspendlayoutparams = new layoutparams (); Suspendlayoutparams.type = Layoutparams.type_phone;  
        The type of suspension window, generally set to 2002, represents above all applications, but under the status bar Suspendlayoutparams.format = pixelformat.rgba_8888; Suspendlayoutparams.flags = Layoutparams.flag_not_touch_modal | layoutparams.flag_not_focusable;  
Suspension window behavior, such as not focusing, modeless dialog box, etc.        suspendlayoutparams.gravity = Gravity.top; 
        The alignment mode of the suspension window suspendlayoutparams.width = screenwidth;  
        Suspendlayoutparams.height = Buylayoutheight; suspendlayoutparams.x = 0; The position of the suspension window x suspendlayoutparams.y = myscrollviewtop; 
  The position of the suspension window y} mwindowmanager.addview (Suspendview, suspendlayoutparams); /** * Remove the Purchased suspension box */private void Removesuspend () {if (Suspendview!= null) {Mwindowmanage 
      R.removeview (Suspendview); 
    Suspendview = null; 

 } 
  } 
 
}

The above code is relatively simple, according to the ScrollView sliding distance to determine the display and remove the suspension box, the implementation of the suspension box is mainly through WindowManager this class to achieve, call the class AddView method to add a floating box, Removeview is used to remove the suspension box.
Through the above code to achieve the United States, the public comment on this effect, before running the project we have to join the Androidmanifest.xml <uses-permission android:name= " Android.permission.SYSTEM_ALERT_WINDOW "/>

Let's run the project and look at the effect.

A modified version
the above code, in fact, I feel the effect is not very good, if the rapid sliding interface, show the suspension box will appear a card phenomenon, some friends say that sometimes two layout of the situation, especially for the ScrollView scrolling y is worth listening, I also used handler to get, There are friends to introduce me to the scrolling tricks this thing, I downloaded the test, indeed the United States Group Network, the public comment on the purchase box is this effect, but scrolling tricks can only be used in API11 above, this little tragedy, and then I made a change, And will realize the idea to share to everybody, realizes very simple
First of all, or to the ScrollView for rolling monitoring, directly in the Onscrollchanged () method can get the rolling y value, where the use of handler, detours, and directly look at the code

Package Com.example.meituandemo; 
Import Android.content.Context; 
Import Android.util.AttributeSet; 
Import Android.widget.ScrollView; 
   
  public class Myscrollview extends ScrollView {private Onscrolllistener onscrolllistener; 
  Public Myscrollview {This (context, NULL); 
  Public Myscrollview (context, AttributeSet attrs) {This (context, attrs, 0); 
  Public Myscrollview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); /** * Set Scrolling interface * @param onscrolllistener/public void Setonscrolllistener (Onscrolllistener onscrol 
  Llistener) {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/public interface onscrolllistener{/** * callback method, return Myscrollview 
  Sliding y-Direction distance * @param scrolly *, * * public void onscroll (int scrolly); 
 } 
   
   
 
}

Take a look at the layout file for 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_wi Dth= "Match_parent" android:layout_height= "45dip" android:scaletype= "Centercrop" android:src= "@drawable/navi Gation_bar "/> <com.example.meituandemo.myscrollview android:id=" @+id/scrollview "Android:layout_widt" H= "Fill_parent" android:layout_height= "fill_parent" > <framelayout android:layout_width= "Match_pa" Rent "android:layout_height=" wrap_content "> <linearlayout android:layout_width=" match_pare 
          NT "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= "cent Ercrop "/> <imageview android:layout_width=" match_parent "android:layout_height=" WR Ap_content "android:background=" @drawable/one "android:scaletype=" Centercrop "/> <i Mageview android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android : background= "@drawable/one" android:scaletype= "Centercrop"/> </LinearLayout> <incl Ude android:id="@+id/top_buy_layout" layout= "@layout/buy_layout"/> </FrameLayout> </com.example.meituandemo . 
 Myscrollview> </LinearLayout>

Here is the layout effect chart

From the layout of the main interface you can see that we placed a purchase on top of the layout, you may think, first let the above layout hidden, and so on the layout of the following slide up to show it, if this looks like I wrote before the article almost, the effect is not very good, so this version of the revision is certainly not such a son, Let's look at the code for the main interface first.

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; public class Mainactivity extends activity implements onscrolllistener{/** * Custom Myscrollview * * Private my 
  ScrollView Myscrollview; 
  /** * Inside the Myscrollview purchase layout * * Private linearlayout mbuylayout; 
   
 
  /** * Located at the top of the purchase layout * * 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);
     
    Interface Findviewbyid (r.id.parent_layout) that changes the callback when the state of the layout or the visibility of the control occurs. Getviewtreeobserver (). Addongloballayoutlistener (New Ongloballayoutlistener () {@Override public void Ongloballayout () {//This step is important so that the purchase layout above 
         
      and the following purchase layout coincide 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 ()); 
 } 
 
 
 
}

The main interface on a few lines of code, you may read the code you still do not understand how to do it, never mind, let me tell you, in fact, we are the above purchase layout and the following purchase layout coincide, layout () This method is to determine the size and location of the view, and then draw it out, The four parameters inside are the coordinates of the view's four points, his coordinates are not relative to the screen's origin, and relative to his parent layout,
We have added the listener to the layout state change in the outermost viewgroup of the main page, when the screen will be recalled to Method Ongloballayout (), we have manually called the Lower Onscroll () method in the Ongloballayout () method, Just start 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 is equal to the mbuylayout.gettop () (i.e. the top edge of the layout below to the top edge of the Myscrollview), so the purchase layout is just beginning to coincide with the purchase layout below.
When the Myscrollview is scrolled up, and the top edge of the above purchase layout is always mbuylayout.gettop () this distance from the top edge of the Myscrollview, the purchase layout is then scrolled up, When scrolly is larger 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 and the top edge of the Myscrollview always have to be scrolly this distance, So the purchase layout will always be under the navigation bar, as if stuck to the same, do not know you understand it? Okay, but depending on the idea, you can just start using a floating box to cover the purchase layout below, then the Onscroll () method updates the position of the suspension box, but the x,y of the suspension box is not relative to the parent layout, which is to be noted, this can also achieve effect, but relative to this, To be more complex, so we encountered similar functions directly using this line, concise and clear, well, you are not eager to see the effect, then we will run the next program

There are multiple purchase layout effects, the next purchase layout will be the last purchase layout top up, the use of the method is also very simple, you need to set the layout of the set tag for sticky, such 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> 

This way the layout of the scroll to the top will be glued to the top, we can try!