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);
                }
            }
        });
    }
}