来来来，先看下效果图~

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

布局文件

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">

android:id="@+id/title"

layout="@layout/toolbar_title_layout"/>

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

android:id="@+id/appBarLayout"

android:layout_width="match_parent"

android:layout_height="256dp"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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: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">

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: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:id="@+id/filter_sort_result_list"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

android:id="@+id/load_result_view"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

注意：

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的练习和应用哦。