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.administrator.myapplication; import android.content.Context;
 import android.support.v4.app.FragmentActivity;
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.Window;
 import android.widget.AbsListView;
 import android.widget.ArrayAdapter;
 import android.widget.ListView;
 import android.widget.ProgressBar; 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);
                 }
             }
         });
     }
 }