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

大功告成啦！