"Android" ListView top floating bar effect. MD

Sometimes in a ListView you need to pin a floating bar at the top, and when you swipe up the ListView, the floating Bar is fixed at the top, and when you swipe down from the ListView to its headerview visible, the floating bar becomes part of the ListView and slides along with the ListView. The effect is as follows:

Implementation ideas

Using two floating bars, a floating bar (a) is added to the ListView's Headerview, and the other floating bar (B) aligns with the top of the ListView. When the listview falls above the floating bar, hide the floating bar (b), at which point the user sees a floating bar (A) and a floating bar (b) When the ListView is sliding above the floating bar, at which point the user sees a floating bar (b).

Demo Code

The code is not much, it is directly posted out. The code is simple and can be applied to your project as needed.

activity_main.xmlis a relative layout that contains two sub-tags: a listview and a framelayout. Framelayout <include> contains a floating bar layout through a label that is hidden when it is created. include_floatbar.xmlis the floating bar layout file, which listitem_headview.xml is the Headerview layout file of the ListView.

activity_main.xml

<relativelayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:layout_width  =" match_parent " android:layout_height  =;     <listview  android:id  = "@+id/lv"  android:layout_width  =< Span class= "Hljs-value" > "match_parent"  android:layout_height  = "match_parent"  android:layout_alignparenttop  =< Span class= "Hljs-value" > "true"  android:fadingedge  =" none "/>     <framelayoutandroid:id= "@+id/float_bar"android:layout_width=" Match_parent "android:layout_height=" Wrap_content "android:visibility=" Gone " >                                        <includelayout="@layout/include_floatbar" />                </framelayout></relativelayout>

include_floatbar.xml

<?xml version= "1.0" encoding= "Utf-8"?><framelayout xmlns:android="Http://schemas.android.com/apk/res/android"  Android:layout_width="Match_parent"android:layout_height="40DP"android: Layout_alignparenttop="true"android:background="#0F0" >                    <TextViewandroid:text="Floating bar"android:gravity="center"  Android:layout_width="Match_parent"android:layout_height="Match_parent" />                                 </framelayout>

listitem_headview.xml

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:id  =  Android:orientation  = "vertical"  android: Layout_width  = "match_parent"  android:layout_ Height  = "150DP"  android:background  =< Span class= "Hljs-value" > "#8F00" ;     <TextViewandroid:text="ListView header"android:gravity="center" android:layout_width="Match_parent"android:layout_height="Match_parent" / >                                </linearlayout>

MainActivityFirst gets the ID of the ListView, then creates a ListView Headerview from the layout file, sets the adapter to the ListView, and listens to the ListView's scrolling events to determine when to hide or show the floating bar.

MainActivity.java

 PackageCom.example.testlistviewtopfloatbar;ImportAndroid.content.Context;ImportAndroid.os.Bundle;Importandroid.support.v4.app.FragmentActivity;ImportAndroid.view.LayoutInflater;ImportAndroid.view.View;ImportAndroid.widget.AbsListView;ImportAndroid.widget.ArrayAdapter;ImportAndroid.widget.ListView;ImportJava.util.ArrayList;ImportJava.util.List; Public  class mainactivity extends fragmentactivity {    PrivateContext Mcontext;PrivateListView Mlistview;PrivateView Mheadview;PrivateView Mfloatbarinlvheader;PrivateView Mfloatbar;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main); Mcontext = This; Mlistview = (ListView) Findviewbyid (r.id.lv);//Hide floating bar at top of ListViewMfloatbar = Findviewbyid (R.id.float_bar);//ListView First header control (red area in)Mheadview = Layoutinflater.from (Mcontext). Inflate (R.layout.listitem_headview, Mlistview,false); Mlistview.addheaderview (Mheadview);//ListView Second header control (floating bar)Mfloatbarinlvheader = Layoutinflater.from (Mcontext). Inflate (R.layout.include_floatbar, MListView,false);        Mlistview.addheaderview (Mfloatbarinlvheader); list<string> data =NewArraylist<> ( -); for(inti =0; I < -;        ++i) {Data.add (string.valueof (i)); } arrayadapter<string> adpater =NewArrayadapter<> (Mcontext, Android.        R.layout.simple_list_item_1, data);        Mlistview.setadapter (adpater); Mlistview.setselection (1);//Monitor ListView Slide eventMlistview.setonscrolllistener (NewAbslistview.onscrolllistener () {@Override             Public void onscrollstatechanged(Abslistview view,intscrollstate) {}@Override             Public void onscroll(Abslistview view,intFirstvisibleitem,intVisibleItemCount,intTotalitemcount) {/ * Determine if the Floating bar (Mfloatbarinlvheader) in the ListView header is currently visible * to hide or show the floating Bar (mfloatbar) */                  if(Firstvisibleitem >=1) {mfloatbar.setvisibility (view.visible); }Else{mfloatbar.setvisibility (View.gone);    }            }        }); }}

"Android" ListView top floating bar effect. MD