可折叠式标题栏

虽说我们现在使用的标题栏是使用Toolbar来编写的，不过它看上去和传统的ActionBar其实没什么两样，只不过可以相应RecyclerView的滚动事件来进行隐藏和显示。而Material Design并没有限定标题栏必须长这个样子，事实上我们可以根据自己的喜好随意定制标题栏的样式。那么我们就可以借助CollapsingToolbarLayout 这个工具来实现可折叠式标题栏。
CollapsingToolbarLayout
顾名思义，CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，他也是由Design Support库提供的。CollapsingToolbarLayout可以让Toolbar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。
不过，CollapsingToolbarLayout是不能独立存在的，他在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局。
首先实现标题栏的部分，以CoordinatorLayout为最外层布局：

<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"
    tools:context=".SecondActivity">
    
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appbar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

这里我们用到了新的布局CollapsingToolbarLayout，其中theme属性指定了ThemeOverlay.AppCompat.Dark.ActionBar的主题，因为这里要实现更高级的Toolbar效果，所以把theme提到了Toolbar的上一层CollapsingToolbarLayout上来。app:contentScrim这个属性用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色，其实CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar，所以设定成colorPrimary。app:layout_scrollFlags 这个属性之前也是给Toolbar设定的，现在提到外面来了，scroll表示CollapsingToolbarLayout会随着滚动一起滚动，exitUntilCollapsed表示当CollapsingToolbarLayout滚动完成折叠之后就保留在界面上，不再移出屏幕。
接下来具体标题栏的内容：

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img_header"
                app:layout_collapseMode="parallax"/>
            
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

可以看出这个高级标题栏是由一个ImageView和一个Toolbar组成的，app:layout_collapseMode这个属性用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，parallax表示会在折叠过程中产生一定的错位偏移，这种模式的视觉效果会非常好，pin表示在折叠过程中位置始终保持不变。
下面是内容详情部分：

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="4dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="内容详情"
                    android:layout_margin="10dp"/>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

内容详情的外层布局是NestedScrollView，与AppBarLayout是平级的。它与ScrollView的区别是增加了嵌套相应滚动事件的功能。由于CoordinatorLayout本身已经可以响应事件了，因此我们就需要在它内部使用NestedScrollView或RecyclerView这样的布局，这里给NestedScrollView指定了app:layout_behavior这样的属性，表示指定了布局行为。
不管是NestedScrollView还是ScrollView，他们的内部都只允许存在一个直接布局，因此如果我们里面需要放很多东西的话，通常会先嵌套一个LinearLayout，然后再放入具体的内容即可。
我们也可以加入一个悬浮按钮：

<android.support.design.widget.FloatingActionButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"/>

FloatingActionButton与AppBarLayout、NestedScrollView同级，其中app:layout_anchor属性指定了一个锚点，我们将锚点设置成AppBarLayout，这样悬浮按钮就会出现在标题栏区域内，接着又使用app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右下角。
在活动内的引用如下：

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

ActionBar actionBar = getSupportActionBar();
if (actionBar!=null){
     //设置显示Home按钮
     actionBar.setDisplayHomeAsUpEnabled(true);
}

CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle("CollapsingToolbar");

运行效果图：

向上滚动出现如下效果：

可以看出当我们慢慢向上拖动内容详情，会发现背景图上的标题慢慢缩小，并且背景图会产生一些错位偏移的效果，继续向上拖，直到标题栏完全成为折叠状态，背景图不见了，悬浮按钮也消失了，标题栏变成一个最普通的Toolbar。如果向下拖动，就会执行一个完全相反的动画过程。