概述

CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar，它繼承至FrameLayout，給它設定layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控制元件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除螢幕或固定在螢幕頂端)。

效果圖

程式碼如下：

1、配置Gradle：

 compile 'com.android.support:appcompat-v7:25.3.1'
 compile 'com.android.support:design:25.3.1'
 

2、佈局檔案：

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
 

android:clipToPadding="true"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="240dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id
 
="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleGravity="left|center_vertical"
        app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
        app:contentScrim="@color/cl_titlebar_bg"
        app:expandedTitleMarginEnd="12dp"
        app:expandedTitleMarginStart="12dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <!--拉開後顯示的背景圖片-->
        <ImageView
            android:id="@+id/iv_background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/background_1"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7"/>

        <!--標題欄-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            app:layout_collapseMode="pin"
            app:navigationIcon="@mipmap/ic_header_back"
            >
            <TextView
                android:id="@+id/tv_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="right"
                android:paddingLeft="@dimen/padding"
                android:paddingRight="@dimen/padding"
                android:textSize="16sp"
                android:textColor="@color/white"
                android:text="分享"/>
        </android.support.v7.widget.Toolbar>

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingTop="@dimen/padding"
            android:text=""
            android:textColor="@color/cl_title"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_title"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingTop="6dp"
            android:text=""
            android:textColor="@color/gray_smoke"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_time"
            android:gravity="center_vertical"
            android:padding="@dimen/padding"
            android:text=""
            android:textColor="@color/cl_content"
            android:textSize="16sp" />
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

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

在這裡對一些關鍵性的屬性作下說明：
（1）app:layout_scrollFlags：設定滾動標誌
- scroll 設定滾動；
- enterAlways 快速顯示View，也就是當向下滑動時候，立即就顯示View；
- exitUntilCollapsed 向上滾動收縮View；
- enterAlwaysCollapsed 當你的View已經設定minHeight屬性又使用此標誌時，你的View只能以最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度。

（2）contentScrim：收縮後標題欄的背景色
（3）layout_collapseMode ：摺疊模式
- pin：當CollapsingToolbarLayout完全收縮後，Toolbar還可以保留在螢幕上；
- parallax：在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和layout_collapseParallaxMultiplier(視差因子)搭配使用。
（4）layout_behavior：@string/appbar_scrolling_view_behavior”。NestedScrollView設定該屬性後，就可以跟CollapsingToolbarLayout進行聯動了，相當於為兩者建立一種聯絡。
（5）其他的屬性有expandedTitleMarginStart（展開狀態時標題距離左邊的距離）、expandedTitleMarginEnd（展開狀態時標題距離右邊的距離）等。
（6）修改CollapsingToolbarLayout的標題大小：expandedTitleTextAppearance
樣式：

 <!--CollapsingToolbarLayout標題大小-->
    <style name="CollapsingToolbarLayoutTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
    </style>

（7）修改Toolbar的navigation icon的padding值：
樣式：

 <!--修改Toolbar的navigation icon的padding值 -->
    <style name="myToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="android:minWidth">0dp</item>
        <item name="android:padding">12dp</item>
        <item name="android:scaleType">centerInside</item>
    </style>

然後我們將這個Activity的主題設定為：無標題，window背景色為白色，Toolbar的導航圖示的padding值

<!-- CollapsingToolbarLayoutActivity主題：無標題-->
    <style name="NoTitleTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <!-- Actionbar/toolbar color -->
        <!--<item name="colorPrimary">@color/colorPrimaryDark</item>-->
        <!--狀態列顏色 color-->
        <!--<item name="colorPrimaryDark">@color/colorPrimary</item>-->
        <!--Window color-->
        <item name="android:windowBackground">@color/white</item>
        <!--修改Toolbar的navigation icon的padding值 -->
        <item name="toolbarNavigationButtonStyle">@style/myToolbarNavigationButtonStyle</item>
    </style>

3、Activity程式碼：

package com.ha.cjy.utilityfunction;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * CollapsingToolbarLayout實現上滑隱藏ToolBar
 * Created by cjy on 17/11/21.
 */

public class CollapsingToolbarLayoutActivity extends AppCompatActivity implements View.OnClickListener {
    private AppBarLayout mAppBarLayout;
    private CollapsingToolbarLayout mCollapsingToolbarLayout;
    private Toolbar mToolBar;
    private TextView mTvTitle;
    private TextView mTvTime;
    private TextView mTvContent;
    private TextView mTvShare;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_appbarlayout);

        findControl();
        initControl();
    }


    public void findControl() {
        mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
        mCollapsingToolbarLayout  = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        mToolBar = (Toolbar) mCollapsingToolbarLayout.findViewById(R.id.tool_bar);
        mTvTitle = (TextView) findViewById(R.id.tv_title);
        mTvTime = (TextView) findViewById(R.id.tv_time);
        mTvContent = (TextView) findViewById(R.id.tv_content);
        mTvShare = (TextView) findViewById(R.id.tv_share);

        //這句話要加，不然底部滾動文字會顯示不全
        setSupportActionBar(mToolBar);
    }

    public void initControl() {
        //監聽展開摺疊狀態
        mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if( state == State.EXPANDED ) {//展開狀態
                    //使用CollapsingToolbarLayout必須把title設定到CollapsingToolbarLayout上，設定到Toolbar上則不會顯示
                    mCollapsingToolbarLayout.setTitle("展開狀態的標題");
                }else if(state == State.COLLAPSED){//摺疊狀態
                    mCollapsingToolbarLayout.setTitle("詳情");
                }else {//中間狀態
                    mCollapsingToolbarLayout.setTitle("");
                }
            }
        });
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        mTvShare.setOnClickListener(this);

        refreshUI();
    }

    private void refreshUI() {
        mTvTitle.setText(getString(R.string.txt_appbarlayout));
        mTvTime.setText(getString(R.string.txt_time, "2017-11-21","2017-12-11"));
        mTvContent.setText(getString(R.string.txt_content));
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tv_share:{
                Toast.makeText(this,"分享一次",Toast.LENGTH_SHORT).show();
                break;
            }
        }
    }
}

好了，到這裡就結束了，歡迎各位指教…….