ListView之頭部浮動效果

ListView 中有時須要在頂部固定一個浮動欄，當向上滑動 ListView 時，浮動欄固定在頂部，當向下滑動 ListView 到其 HeaderView 可見時，浮動欄成爲ListView的一部分，與ListView一塊兒滑動。效果以下：

 

實現思路

使用兩個浮動欄，一個浮動欄（A）添加到 ListView 的 HeaderView中，另外一個浮動欄（B）與ListView頂部對齊佈局。當ListView下滑超過浮動欄時，隱藏浮動欄（B），此時用戶看到的是浮動欄（A）；當ListView上滑超過浮動欄時顯示浮動欄（B），此時用戶看到的是浮動欄（B）。

demo 代碼

代碼很少，就直接貼出來了。代碼很簡單，能夠根據須要修改應用到本身的項目中。

activity_main.xml是一個相對佈局，包含兩個子標籤：一個ListView和一個FrameLayout。FrameLayout經過<include>標籤包含浮動欄佈局，其建立時處於隱藏狀態。include_floatbar.xml是浮動欄的佈局文件，listitem_headview.xml是 ListView 的 HeaderView 佈局文件。

activity_main.xml

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2      android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     >
 5     <ListView
 6         android:id="@+id/lv"
 7         android:layout_width="match_parent"
 8         android:layout_height="match_parent"
 9         android:layout_alignParentTop="true"
10         android:fadingEdge="none"/>
11     <FrameLayout
12         android:id="@+id/float_bar"
13         android:layout_width="match_parent"
14         android:layout_height="wrap_content"
15         android:visibility="gone">
16         <include
17             layout="@layout/include_floatbar"/>
18     </FrameLayout>
19 </RelativeLayout>

include_floatbar.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="40dp"
 5     android:layout_alignParentTop="true"
 6     android:background="#0F0">
 7     <TextView
 8         android:text="浮動欄"
 9         android:gravity="center"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent"/>
12 </FrameLayout>

 

listitem_headview.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:id="@+id/head_lv"
 4     android:orientation="vertical"         android:layout_width="match_parent"
 5     android:layout_height="150dp"
 6     android:background="#8F00" >
 7     <TextView
 8         android:text="ListView 頭部"
 9         android:gravity="center"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent" />
12 </LinearLayout>

MainActivity中首先獲取 ListView 的 ID，而後從佈局文件建立 ListView 的 HeaderView，給 ListView 設置適配器，並監聽 ListView 的滾動事件以決定何時隱藏或顯示浮動欄。

MainActivity.java

 1 package com.example.administrator.myapplication;
 2 
 3 import android.content.Context;
 4 import android.support.v4.app.FragmentActivity;
 5 import android.support.v7.app.AppCompatActivity;
 6 import android.os.Bundle;
 7 import android.view.LayoutInflater;
 8 import android.view.View;
 9 import android.view.Window;
10 import android.widget.AbsListView;
11 import android.widget.ArrayAdapter;
12 import android.widget.ListView;
13 import android.widget.ProgressBar;
14 
15 import java.util.ArrayList;
16 import java.util.List;
17 
18 public class MainActivity extends FragmentActivity {
19     private Context mContext;
20     private ListView mListView;
21     private View mHeadView;
22     private View mFloatBarInLvHeader;
23     private View mFloatBar;
24 
25     @Override
26     protected void onCreate(Bundle savedInstanceState) {
27         super.onCreate(savedInstanceState);
28         setContentView(R.layout.activity_main);
29 
30         mContext = this;
31         mListView = (ListView) findViewById(R.id.lv);
32         // ListView 頂部隱藏的浮動欄
33         mFloatBar = findViewById(R.id.float_bar);
34 
35         // ListView 第一個頭部控件（效果圖中的紅色區域）
36         mHeadView = LayoutInflater.from(mContext).inflate(R.layout.listitem_headview, mListView, false);
37         mListView.addHeaderView(mHeadView);
38         // ListView 第二個頭部控件（浮動欄）
39         mFloatBarInLvHeader = LayoutInflater.from(mContext).inflate(R.layout.include_floatbar, mListView, false);
40         mListView.addHeaderView(mFloatBarInLvHeader);
41 
42         List<String> data = new ArrayList<>(100);
43         for (int i = 0; i < 100; ++i) {
44             data.add(String.valueOf(i));
45         }
46         ArrayAdapter<String> adpater = new ArrayAdapter<>(mContext,
47                 android.R.layout.simple_list_item_1, data);
48         mListView.setAdapter(adpater);
49         mListView.setSelection(1);
50         // 監聽 ListView 滑動事件
51         mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
52             @Override
53             public void onScrollStateChanged(AbsListView view, int scrollState) {
54             }
55 
56             @Override
57             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
58                  /* 判斷ListView頭部中的浮動欄(mFloatBarInLvHeader)當前是否可見
59                   * 來決定隱藏或顯示浮動欄(mFloatBar)*/
60                 if (firstVisibleItem >= 1) {
61                     mFloatBar.setVisibility(View.VISIBLE);
62                 } else {
63                     mFloatBar.setVisibility(View.GONE);
64                 }
65             }
66         });
67     }
68 }