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

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

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

         

接下来看看是如何实现的

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

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

@android:color/transparent

其中对应的颜色值为

#00000000

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

app:contentScrim="#87CEEB"

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

最后附上布局代码和activity的代码

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源码