Android 实现悬浮的几种方式（二）HeaderView显示隐藏

上篇博客（http://blog.csdn.net/zx_android/article/details/77265902），我使用appbar实现的悬浮，这次试试使用HeaderView，更加灵活。

你可以选择HeaderView里面的任意一个view进行悬浮，但是会有一个小问题

RecyclerView添加headerView，如果该HeaderView的根布局是LinearLayout会出现不能撑满宽度的情况。

可以把根布局换成RelativeLayout或者加条横线来解决此问题。

借鉴于：http://blog.csdn.net/ljfbest/article/details/38765641

引用的包：

compile 'com.android.support:cardview-v7:23.2.1'
compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.zhy:base-rvadapter:3.0.3'
compile 'com.zhy:base-adapter:3.0.3'
compile 'cn.finalteam.loadingviewfinal:ultra-pull-to-refresh:1.0.1'
compile 'cn.finalteam.loadingviewfinal:loading-more-view:1.0.1'

HeaderView中分为3个部分

需求是需要suspend_chart悬浮，那么我们就需要添加3个HeaderView。

先贴出布局：

header_chart_top.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/layout_line" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:padding="@dimen/d_15dp">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="您已筛选"
            android:textColor="@color/gray_a"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_time_result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:text="今日"
            android:textColor="@color/gray_64"
            android:textSize="13sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="的生产装箱情况"
            android:textColor="@color/gray_a"
            android:textSize="13sp" />
    </LinearLayout>

    <include layout="@layout/layout_line" />

</LinearLayout>

suspend_chart.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fl_suspend"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/layout_line" />

        <TextView
            android:id="@+id/tv_product_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/d_15dp"
            android:layout_marginTop="@dimen/d_15dp"
            android:gravity="center_vertical"
            android:text="@string/common_null"
            android:textColor="@color/gray_32"
            android:textSize="13sp" />


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="@dimen/d_15dp"
            android:paddingTop="15dp">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_product_boxs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/common_null"
                    android:textColor="@color/gray_32"
                    android:textSize="28dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/d_10dp"
                    android:text="箱"
                    android:textColor="@color/gray_a"
                    android:textSize="13sp" />


            </LinearLayout>

            <TextView
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/lineColor" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_product_singles"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/common_null"
                    android:textColor="@color/gray_32"
                    android:textSize="28dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/d_10dp"
                    android:text="单标"
                    android:textColor="@color/gray_a"
                    android:textSize="13sp" />
            </LinearLayout>

        </LinearLayout>

        <include layout="@layout/layout_line_margingtop" />
    </LinearLayout>
</RelativeLayout >

header_chart_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <include layout="@layout/layout_line" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_ll_white"
        android:gravity="center"
        android:padding="@dimen/d_15dp">


        <TextView
            android:id="@+id/tv_time_details"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/icon_boxing_40"
            android:drawablePadding="@dimen/d_10dp"
            android:gravity="center_vertical"
            android:text="今日"
            android:textColor="@color/gray_32"
            android:textSize="14sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawablePadding="@dimen/d_10dp"
            android:gravity="center_vertical"
            android:text="生产装箱情况"
            android:textColor="@color/gray_32"
            android:textSize="14sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawablePadding="5dp"
            android:drawableRight="@mipmap/ic_arrow_right"
            android:text="详情"
            android:textColor="@color/gray_a"
            android:textSize="14sp" />


    </LinearLayout>

</LinearLayout>

layout_line.xml

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/height_line"
    android:background="@color/lineColor" />

最后主Activity的布局：activity_chart.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
>

    <include layout="@layout/layout_recycler_view_loading" />
    <include layout="@layout/suspend_chart"/>
</FrameLayout>

layout_recycler_view_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!--使用PtrClassicFrameLayout套RecyclerViewFinal-->
    <cn.finalteam.loadingviewfinal.PtrClassicFrameLayout
        android:id="@+id/ptr_rv_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:ptr_duration_to_close="300"
        app:ptr_duration_to_close_header="1500"
        app:ptr_keep_header_when_refresh="true"
        app:ptr_ratio_of_header_height_to_refresh="1.2"
        app:ptr_resistance="1.7">

        <cn.finalteam.loadingviewfinal.RecyclerViewFinal
            android:id="@+id/rv_list"
            android:layout_width="match_parent"
            android:descendantFocusability="beforeDescendants"
            android:layout_height="match_parent"
            android:cacheColorHint="#00000000"
            app:loadMoreMode="click|scroll"
            app:loadMoreView="cn.finalteam.loadingviewfinal.DefaultLoadMoreView"
            app:noLoadMoreHideView="false" />

    </cn.finalteam.loadingviewfinal.PtrClassicFrameLayout>

</merge>

布局定好了，剩下的就简单了。

第一步：初始化主页面View和各个HeaderView

    public class StockInProductChartActivity extends StateViewActivity {


    private static final int REQUEST_CODE_TIME = 1;
    @Bind(R.id.rv_list)
    RecyclerViewFinal mRvList;
    @Bind(R.id.ptr_rv_layout)
    PtrClassicFrameLayout mPtrRvLayout;
    @Bind(R.id.tv_product_name)
    TextView tvProductName;
    @Bind(R.id.tv_product_boxs)
    TextView tvProductBoxs;
    @Bind(R.id.tv_product_singles)
    TextView tvProductSingles;
    @Bind(R.id.fl_suspend)
    RelativeLayout flSuspend;

    private View headerViewTop;
    private View headerViewBottom;
    private View suspendView;

    private void initHeaderView() {
        LayoutInflater layoutInflater = LayoutInflater.from(this);
        //上方的header
        headerViewTop = layoutInflater.inflate(R.layout.header_chart_top, null);

        //悬浮的Header
        suspendView = layoutInflater.inflate(R.layout.suspend_chart, null);
        suspendViewHolder = new SuspendViewHolder();
        ButterKnife.bind(suspendViewHolder, suspendView);

        //下方的header
        headerViewBottom = layoutInflater.inflate(R.layout.header_chart_bottom, null);

        mRvList.addHeaderView(headerViewTop);
        mRvList.addHeaderView(suspendView);
        mRvList.addHeaderView(headerViewBottom);
    }

    //悬浮view
    static class SuspendViewHolder {
        @Bind(R.id.tv_product_name)
        TextView tvProductName;
        @Bind(R.id.tv_product_boxs)
        TextView tvProductBoxs;
        @Bind(R.id.tv_product_singles)
        TextView tvProductSingles;
        //根布局
        @Bind(R.id.fl_suspend)
        RelativeLayout flSuspend;
    }

第二步：初始化RecyclerView

        linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRvList.setLayoutManager(linearLayoutManager);

第三步，重点来了，监听滚动事件，判断显示隐藏

        mRvList.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                int position = linearLayoutManager.findFirstVisibleItemPosition();
                //当滚动到第二个View的时候，显示悬浮view
                if (position >= 1) {
                    flSuspend.setVisibility(View.VISIBLE);
                    tvProductName.setText(suspendViewHolder.tvProductName.getText());
                    tvProductBoxs.setText(suspendViewHolder.tvProductBoxs.getText());
                    tvProductSingles.setText(suspendViewHolder.tvProductSingles.getText());
                } else {
                    flSuspend.setVisibility(View.GONE);
                }
            }
        });

大功告成啦！