Android——仿优酷节目筛选功能实现

来来来，先看下效果图~

这里有同学可能就已经想到了，这个不就是折叠式的toolbar实现的吗?对啊，我确实是这么做的，还是挺简单的，今天就给大家分享下code了，不过中间也遇到了些小插曲，比如：Toolbar上的文字不居中，分类不可点击等等。老规矩先上代码，跟着代码来分析总结。

布局文件

<?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:background="@color/darkGrayBg"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include
        android:id="@+id/title"
        layout="@layout/toolbar_title_layout"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/darkGrayBg"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/darkGrayBg"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/sortToolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dimen_40"
                    android:fitsSystemWindows="true"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                    <TextView
                        android:id="@+id/sortToolbar_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/font_size_14"/>
                </android.support.v7.widget.Toolbar>

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/filter_sort_list"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="none"
                    app:layout_collapseParallaxMultiplier="0.7"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <com.ysten.videoplus.client.widget.VpRecyclerView
            android:id="@+id/filter_sort_result_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <com.ysten.videoplus.client.widget.LoadResultView
            android:id="@+id/load_result_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

注意：
1、布局结构必须是CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar，否则无效果哦，这几个控件在前面的博客中我们详细为大家讲解过了，可以参考博客：
Materail Design 入门（八）——CollapsingToolbarLayout的使用方法
Materail Design 入门（七）——AppBarLayout的使用方法
Materail Design 入门（四）——Toolbar的使用方法（1）
2、CollapsingToolbarLayout中Toolbar和VpRecyclerView的顺序不能反了，否则，Recyclerview将不能点击，因为Toolbar将会覆盖在Recyclerview上方，导致Recyclerview点击事件不响应。
3、因为直接使用Toolbar，Toolbar的文字内容不居中，所以在Toolbar中嵌套TextView解决文字居中问题。
4、 app:contentInsetLeft=”0dp”
app:contentInsetStart=”0dp”
使Toolbar的内容居中

Java代码

private void initView() {
        setTitle(getString(R.string.filter));
        mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                Log.d("STATE", state.name());
                if (state == State.EXPANDED) { //展开状态
                    mSortToolbarTitle.setText("");
                    mFilterSortList.setVisibility(View.VISIBLE);
                } else if (state == State.COLLAPSED) {//折叠状态
                    mSortToolbarTitle.setText(mFilterSortAdapter.getSortKey());
                    mFilterSortList.setVisibility(View.GONE);
                } else { //中间状态
                    mSortToolbarTitle.setText("");
                    mFilterSortList.setVisibility(View.VISIBLE);
                }
            }
        });

        mFilterSortList.setLayoutManager(new LinearLayoutManager(this));
        mFilterSortList.addItemDecoration(new RecycleViewDivider(this, R.drawable.line_divier));
        mFilterSortList.setHasFixedSize(true);
        mFilterSortAdapter = new FilterSortAdapter(this);
        mFilterSortList.setAdapter(mFilterSortAdapter);

        mFilterSearchtList.setLayoutManager(new GridLayoutManager(this, 3, GridLayoutManager
                .VERTICAL, false));
        mFilterSearchtList.setHasFixedSize(true);
        mFilterSearchAdapter = new FilterSearchAdapter(this);
        mFilterSearchtList.setAdapter(mFilterSearchAdapter);
        mFilterSearchtList.setLoadingListener(new VpRecyclerView.LoadingListener() {
            @Override
            public void onRefresh() {
                loadType = VpRecyclerView.REFRESH;
                start = 0;
                filterSearch();
            }

            @Override
            public void onLoadMore() {
                loadType = VpRecyclerView.LOADMORE;
                start++;
                filterSearch();
            }
        });
    }

布局文件写对了基本上就完成了一大半了，java代码还是比较简单的，就是给标题和Recyclerview初始化赋值。这里需要注意的是何时展开Recyclerview何时折叠Recyclerview。这里我们给AppBarLayout添加一个监听事件：addOnOffsetChangedListener。根据他的state来控制Recyclerview的折叠和展开。

好了，讲解完了，本篇的目的还在于CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar的练习和应用哦。