【Android】ListView 頂部浮動欄效果.md

標籤：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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"    android:layout_height="match_parent"    >    <ListView        android:id="@+id/lv"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_alignParentTop="true"        android:fadingEdge="none"        />    <FrameLayout        android:id="@+id/float_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:visibility="gone"        >        <include            layout="@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"    >    <TextView        android:text="浮動欄"        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="@+id/head_lv"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="150dp"    android:background="#8F00"    >    <TextView        android:text="ListView 頭部"        android:gravity="center"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

MainActivity中首先擷取 ListView 的 ID，然後從布局檔案建立 ListView 的 HeaderView，給 ListView 設定適配器，並監聽 ListView 的滾動事件以決定什麼時候隱藏或顯示浮動欄。

MainActivity.java

package com.example.testlistviewtopfloatbar;import android.content.Context;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.view.LayoutInflater;import android.view.View;import android.widget.AbsListView;import android.widget.ArrayAdapter;import android.widget.ListView;import java.util.ArrayList;import java.util.List;public class MainActivity extends FragmentActivity {    private Context mContext;    private ListView mListView;    private View mHeadView;    private View mFloatBarInLvHeader;    private View mFloatBar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mContext = this;        mListView = (ListView)findViewById(R.id.lv);        // ListView 頂部隱藏的浮動欄        mFloatBar = findViewById(R.id.float_bar);        // ListView 第一個頭部控制項（中的紅色地區）        mHeadView = LayoutInflater.from(mContext).inflate(R.layout.listitem_headview, mListView, false);        mListView.addHeaderView(mHeadView);        // ListView 第二個頭部控制項（浮動欄）        mFloatBarInLvHeader = LayoutInflater.from(mContext).inflate(R.layout.include_floatbar, mListView, false);        mListView.addHeaderView(mFloatBarInLvHeader);        List<String> data = new ArrayList<>(100);        for (int i = 0; i < 100; ++i) {            data.add(String.valueOf(i));        }        ArrayAdapter<String> adpater = new ArrayAdapter<>(mContext,                android.R.layout.simple_list_item_1, data);        mListView.setAdapter(adpater);        mListView.setSelection(1);        // 監聽 ListView 滑動事件        mListView.setOnScrollListener(new AbsListView.OnScrollListener() {            @Override            public void onScrollStateChanged(AbsListView view, int scrollState) {            }            @Override            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {                 /* 判斷ListView頭部中的浮動欄(mFloatBarInLvHeader)當前是否可見                   * 來決定隱藏或顯示浮動欄(mFloatBar)*/                  if (firstVisibleItem >= 1) {                    mFloatBar.setVisibility(View.VISIBLE);                } else {                    mFloatBar.setVisibility(View.GONE);                }            }        });    }}

【Android】ListView 頂部浮動欄效果.md