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

大功告成啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哆啦A梦z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值