1. 程式人生 > >Android 簡單實現ListView頂部懸浮效果

Android 簡單實現ListView頂部懸浮效果

首先上效果圖,實現如下效果:


起初在網上搜了下實現這樣的效果,美團網,大眾點評的“購買框”懸浮效果也是這樣的,不過作者實現比較麻煩,自己想了想就根據ListView提供的一些特性進行了簡單實現。

整個主要佈局就是一個ListView,如果listview的上面有內容且高度比較高,可以把它當做listview的header,這樣也可以避免ScrollView巢狀ListView帶來的麻煩(記住這一點就不會在平時出現ScrollView與ListView各種問題了)。要實現懸浮效果,主要是根據ListView可見的第一個條目是哪個條目來操作的。注意這裡的“懸浮”其實只是通過 隱藏/顯示 懸浮部分來實現:在ListView“背後”有一個隱藏的“懸浮部分”,當ListView條目中的懸浮部分成為ListView可見部分第一個時,這時非ListView條目中的懸浮部分顯示出來,這樣造成“懸浮”部分一直在頂部浮動,當ListView可見部分第一個條目並不是懸浮時,非ListView那部分“隱藏部分”繼續隱藏。表達能力不強,自己都快被自己繞暈了,總之就是2個懸浮部分:ListView條目中的和處於佈局頂部隱藏(Gone/invisible)的起初未顯示的,通過這兩部分的操作來完成整個功能的。希望讀者能夠理解……

主要程式碼:

  1. @Override
  2.     protectedvoid onCreate(Bundle savedInstanceState) {  
  3.         super.onCreate(savedInstanceState);  
  4.         setContentView(R.layout.activity_sticky);  
  5.         invis = (LinearLayout) findViewById(R.id.invis);  
  6.         strs = new String[100];  
  7.         for (int i = 0; i < 20; i++) {  
  8.             strs[i] = "data-----"
     + i;  
  9.         }  
  10.         lv = (ListView) findViewById(R.id.lv);  
  11.         View header = View.inflate(this, R.layout.stick_header, null);//頭部內容
  12.         lv.addHeaderView(header);//新增頭部
  13.         lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView條目中的懸浮部分 新增到頭部
  14.         lv.setAdapter(new ArrayAdapter<String>(
    this,  
  15.                 android.R.layout.simple_list_item_1, strs));  
  16.         lv.setOnScrollListener(new OnScrollListener() {  
  17.             @Override
  18.             publicvoid onScrollStateChanged(AbsListView view, int scrollState) {  
  19.             }  
  20.             @Override
  21.             publicvoid onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {  
  22.                 if (firstVisibleItem >= 1) {  
  23.                     invis.setVisibility(View.VISIBLE);  
  24.                 } else {  
  25.                     invis.setVisibility(View.GONE);  
  26.                 }  
  27.             }  
  28.         });  
  29.     }  
佈局:
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent">
  5.     <TextView
  6.         android:id="@+id/title"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="30dp"
  9.         android:background="#332b3b"
  10.         android:gravity="center"
  11.         android:text="標題"
  12.         android:textColor="#ffffff"/>
  13.     <FrameLayout
  14.         android:layout_width="match_parent"
  15.         android:layout_height="wrap_content"
  16.         android:layout_below="@id/title">
  17.         <ListView
  18.             android:id="@+id/lv"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="match_parent"/>
  21.         <LinearLayout
  22.             android:id="@+id/invis"
  23.             android:layout_width="fill_parent"
  24.             android:layout_height="50dp"
  25.             android:background="#ccedc7"
  26.             android:orientation="horizontal"
  27.             android:visibility="gone">
  28.             <TextView
  29.                 android:id="@+id/tv"
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="50dp"
  32.                 android:gravity="center"
  33.                 android:text="懸浮部分"/>
  34.         </LinearLayout>
  35.     </FrameLayout>
  36. </RelativeLayout>

程式碼下載地址:http://download.csdn.net/download/ljfbest/7804769