使用CollapsingToolbarLayout实现可展开与收缩的导航栏

前段时间学习人家的demo，看到了一个非常炫酷的效果，简单来讲就是一个activity的导航栏可以展开显示成一张图片，向上滑动的时候又可以收缩成原来的状态。于是自己尝试捣鼓了一下，先上效果图。

由于GIF图片太大了，传不上来，只有放图片了，这是从下往上滑动的效果


   

 
 

   


接下来看看是如何实现的

其实操作起来非常简单，因为android studio已经帮我们省了很大一部分工作量了，直接在死丢丢里面新建一个activity，选择Scrolling Activity，如下图



其实效果已经出来了，不过可以根据自己的需求进行修改，比如讲activity的主题改为NoActionBar，同时，我想让实现沉侵式效果，于是在activity的主题里面加上

<item name="android:statusBarColor">@android:color/transparent</item>

其中对应的颜色值为

<color name="transparent">#00000000</color>

另外，系统创建的布局文件，toolbar的标题是由CollapsingToolbarLayout决定的，所以要设置title需要在CollapsingToolbarLayout里面设置，要设置toolbar收缩回去后的背景色，可以在CollapsingToolbarLayout的属性里面设置

app:contentScrim="#87CEEB"

最后一个问题就是toolbar的标题不是居中的，需要在activity里面设置，但是如果你的toolbar里面添加了item，想要实现居中效果，就需要保证两边item所占的宽度一致，如果有一边不需要item，可以将其视图设为invisible即可，但是位置是必须占的。
最后附上布局代码和activity的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="com.test.demo.myappbarlayout.ScrollingActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#87CEEB"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:src="@mipmap/test"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" >
<TextView
android:text="back"
android:textColor="#ffffff"
android:paddingLeft="10dp"
android:textSize="18sp"
android:layout_gravity="start"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="menu"
android:textColor="#ffffff"
android:textSize="18sp"
android:paddingRight="20dp"
android:layout_gravity="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

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

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

package com.test.demo.myappbarlayout;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.View;

public class ScrollingActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

CollapsingToolbarLayout toolbar_layout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
toolbar_layout.setCollapsedTitleGravity(Gravity.CENTER);
toolbar_layout.setTitle("你大爷");
}
}

布局文件里面include的content_scrolling.xml是系统自己创建的，这里就不粘出来了。
附上demo源码