MD-CollapsingToolbarLayout 可摺疊標題欄

 顧名思義，CollapsingToolbarLayout是一個作用於Toolbar基礎之上的佈局，它也是由Design Support庫提供的。CollapsingToolbarLayout 可以讓Toolbar的效果變得更加豐富，不僅僅是展示一個標題欄，而是能夠實現非常華麗的效果。
不過，CollapsingToolbarLayout 是不能獨立存在的，它在設計的時候就被限定只能作爲AppBarLayout的直接子佈局來使用。而AppBarLayout又必須是CoordinatorLayout的子佈局。

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

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

            <ImageView
                android:id="@+id/fruit_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <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:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout新增了一些屬性：

android: theme屬性指定了一個ThemeOverlay.AppCompat.Dark.ActionBar 的主題，其實對於這部分我們也並不陌生，因爲之前在activity_main.xml中給Toolbar 指定的也是這個主題，只不過這裏要實現更加高級的Toolbar效果，因此需要將這個主題的指定提到上一層來。app:contentScrim屬性用於指定CollapsingToolbarLayout 在趨於摺疊狀態以及摺疊之後的背景色，其實CollapsingToolbarLayout在摺疊之後就是一個普通的Toolbar, 那麼背景色肯定應該是colorPrimary 了，具體的效果我們待會兒就能看到。app: layout_scrollFlags 屬性我們也是見過的，只不過之前是給Toolbar指定的，現在也移到外面來了。其中，scroll 表示CollapsingToolbarLayout會隨着水果內容詳情的滾動一起滾動，exitUntilCollapsed表示當CollapsingToolbarlayout隨着滾動完成摺疊之後就保留在界面上,不再移出屏幕。

CollapsingToolbarLayout裏面包着兩個佈局，一個是Imageview和一個toolbar；這裏新增的屬性有app:layout_collapseMode：表示當前控件在CollapsingToolbarLayout摺疊過程中的摺疊模式；

其中Toolbar指定成pin,表示在摺疊的過程中位置始終保持不變，
ImageView 指定成parallax, 表示會在摺疊的過程中產生一定的錯位偏移，這種模式的視覺效果會非常好。

可以看到，這裏還加入了一個FloatingActionButton,它和AppBarLayout以及NestedScrollView是平級的。FlatingActionButton 中使用app: layout_anchor屬性指定了一個錨點，我們將錨點設置爲AppBarLayout,這樣懸浮按鈕就會出現在水果標題欄的區域內,接着又使用app:layout_anchorGravity屬性將懸浮按鈕定位在標題欄區域的右下角。

新屬性：android:fitsSystemWindows。只不過很可惜的是，在Android 5.0 系統之前，我們是無法對狀態欄的背景或顏色進行操作的，那個時候也還沒有Material Design的概念。但是Android 5.0 及之後的系統都是支持這個功能的，因此這裏我們就來實現一個系統差異型的效果，在Android 5.0及之後的系統中，使用背景圖和狀態欄融合的模式，在之前的系統中使用普通的模式。使用value21文件夾進行適配。

關於摺疊模式：可以看一下源碼

 AppBarLayout有接口，可以監聽滑動：

 

 private fun initAppBarStatus() {
        binding.appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
            val scrollRange = appBarLayout.totalScrollRange
            var fraction = 1f * (scrollRange + verticalOffset) / scrollRange
            if (fraction < 0) {
                fraction = 0f
            }
            val alpha = ((1f - fraction) * 255f).toInt()
            val color = Color.argb(alpha, 0xff, 0xff, 0xff)
            binding.toolbar.setBackgroundColor(color)

            if (Math.abs(verticalOffset) >= appBarLayout.totalScrollRange * 0.8f) {
               // appbar_text_title.setVisibility(View.VISIBLE)
                ll_location.visibility=View.GONE
            } else {
               // appbar_text_title.setVisibility(View.INVISIBLE)
                ll_location.visibility=View.VISIBLE
            }

        })
    }