Android項目實戰（二十）：淺談ListView懸浮頭部展現效果

原文: Android項目實戰（二十）：淺談ListView懸浮頭部展現效果 　　先看下效果：需求是 滑動清單 ，其中一部分視圖（粉絲數，關注數這一部分）在滑動到頂端的時候不消失，而是停留在整個界面頭部。

我們先分析要解決的問題：

1、如何實作清單ListView頂部視圖跟随ListView一起滑動

2、如何實作滑動過程中需要停留在頂部的視圖

解決：

第一個問題，實作ListView與頂部視圖一起滑動，ListView提供一個方法，addHeadView(View);  意思就是在ListView頂部添加一個View。那麼這個View就能和ListView一起滾動。

第二個問題，怎麼保證界面中間的某一部分視圖滑動到頂部的時候停留在頂部呢？

首先我們這個停留在頂部的View（稱為View1）是ListView.addHeadView()上去的，即滑動清單，這個View1會劃出去，那麼如何讓它不劃出去？隻要在Listview所在布局最上方

也寫一個同樣的View（稱為View2，View2和ListView同屬于一個FragmentLayout）并先隐藏（Visible = 'gone'），當View1剛劃出頂部的時候，View2顯示。

View1剛劃出頂部的時機就是：

當滑動時 firstVisibleItem>=要懸浮的 item的position時 讓View2顯示 ，否則隐藏。

代碼實作：

首先布局檔案：

頭部布局：

1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="wrap_content"
 6     android:gravity="center"
 7     >
 8     <ImageView
 9         android:layout_width="match_parent"
10         android:layout_height="90dp"
11         android:src="@mipmap/p1"
12         android:scaleType="fitXY"
13         />
14 </LinearLayout>      

要停留在頂部的View布局：(這裡是要停留在頂部的View，這裡addHeadView到ListView頂部,跟随者ListView滑動到頂部消失，這時滿足firstVisibleItem>=要懸浮的 item的position條件，主界面裡在寫一個相同的View顯示即可)

<?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"
    android:gravity="center"
    >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:src="@mipmap/p2"
            android:scaleType="fitXY"
            />
</LinearLayout>      

主布局：

<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:orientation="vertical"
    >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center"
        android:text="個人中心"
        android:textSize="20dp"
         />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ListView
            android:id="@+id/lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:id="@+id/invis"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:visibility="gone"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:src="@mipmap/p2"
                android:scaleType="fitXY"
                />
        </LinearLayout>
    </FrameLayout>


</LinearLayout>      

java代碼:

1 private LinearLayout invis;
 2     private ListView lv;
 3     String[] strs;
 4     @Override
 5     protected void onCreate(Bundle savedInstanceState) {
 6         super.onCreate(savedInstanceState);
 7         setContentView(R.layout.activity_main);
 8 
 9         invis = (LinearLayout) findViewById(R.id.invis);
10 
11         strs = new String[100];
12 
13         for (int i = 0; i < 20; i++) {
14             strs[i] = "data-----" + i;
15         }
16 
17         lv = (ListView) findViewById(R.id.lv);
18         View header = View.inflate(this, R.layout.stick_header, null);//頭部内容
19         lv.addHeaderView(header);//添加頭部
20 
21         lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView條目中的懸浮部分 添加到頭部
22 
23         lv.setAdapter(new ArrayAdapter<String>(this,
24                 android.R.layout.simple_list_item_1, strs));
25         lv.setOnScrollListener(new AbsListView.OnScrollListener() {
26 
27             @Override
28             public void onScrollStateChanged(AbsListView view, int scrollState) {
29 
30             }
31 
32             @Override
33             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
34                 if (firstVisibleItem >= 1) {
35                     invis.setVisibility(View.VISIBLE);
36                 } else {
37 
38                     invis.setVisibility(View.GONE);
39                 }
40             }
41         });
42 
43     }