CollapsingToolbarLayout用法詳解（簡潔易懂）

阿新 • • 發佈：2019-02-12

Collapsing翻譯過來就是摺疊的意思。
CollapsingToolbarLayout：顧名思義就是可摺疊的toolbar佈局。

先看一下使用它的效果：
CollapsingToolbarLayout

可以看到有這樣幾個效果：

1、背景圖片漸漸消失變為主題顏色
2、FloatingActionButton在滑到頂部的時候消失了
3、左上角的箭頭保持不動
4、title在滑到頂部的時候自動調整位置和大小

CollapsingToolbarLayout就是這樣一個把各種toolbar的效果組合起來的佈局，它可以實現toolbar的摺疊效果。

要實現這樣的效果還需要CoordinatorLayout+AppBarLayout的配合。

佈局檔案：
activity_main.xml :

<?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.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support 
.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="60dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"

                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0.5" />

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

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>

關鍵詞：

CoordinatorLayout:

Coordinator : 協調。
協調(Coordinate)其他元件, 實現聯動的佈局。只有最外層是這個佈局，一些滾動行為的引數才能使用。

AppBarLayout：

AppBarLayout會將它內部的所有控制元件組合成一個toolbar，它繼承自LinearLayout，佈局方向為垂直方向。它可以設定當某個可滾動View的滾動手勢發生變化時，其內部的子View如何動作。

CollapsingToolbarLayout：

實現可摺疊toolbar的佈局。通過設定一些屬性實現可摺疊的toolbar。

Toolbar：完美代替actionbar的新控制元件。

NestedScrollView

Nested：巢狀
NestedScrollView代替了ScrollView。它符合MD設計風格，並且能更好的和其它新控制元件配合。它自己佈局內的子View滾動的時候會自動觸發CoordinatorLayout中設定的ToolBar的滑入滑出。

FloatingActionButton

浮動按鈕

關鍵屬性：

contentScrim ：

當CollapsingToolbarLayout完全摺疊後的背景顏色。
通常設定為：app:contentScrim=”?attr/colorPrimary”，這樣當CollapsingToolbarLayout完全摺疊後就會顯示主題顏色。

expandedTitleMarginStart ：

佈局張開的時候title與左邊的距離，如圖：
expandedTitleMarginStart

layout_scrollFlags:

設定滾動表現：
1、 Scroll, 表示手指向上滑動的時候,CollapsingToolbarLayout也會向上滾出螢幕並且消失，這個屬性必須要有。
2、 exitUntilCollapsed, 表示這個layout會一直滾動離開螢幕範圍,直到它收折成它的最小高度.

如圖：

有exitUntilCollapsed屬性

最後會固定在頭部

exitUntilCollapsed

沒有exitUntilCollapsed 屬性：

最後會滑出去
exitUntilCollapsed

3、enterAlways: 一旦手指向下滑動這個view就可見。

4、enterAlwaysCollapsed:
這個flag定義的是已經消失之後何時再次顯示。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。

ImageView及Toolbar中的屬性：

layout_collapseMode=””
1、 pin
在view摺疊的時候Toolbar仍然被固定在螢幕的頂部。

2、 parallax
設定為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果, 通常和layout_collapseParallaxMultiplier(設定視差因子，值為0~1)搭配使用。

parallax：視差

toolbar設定parallax：注意看左上角的箭頭,它會滑出頭佈局

parallax

toolbar設定pin:注意看左上角的箭頭,它會固定在頭佈局

parallax

我們再看看
layout_collapseParallaxMultiplier的影響

layout_collapseParallaxMultiplier=0.8

layout_collapseParallaxMultiplier

layout_collapseParallaxMultiplier=0.3

可以看到給layout_collapseParallaxMultiplier設定的值越大可以讓滾動的效果更加明顯。

FloatingActionButton的屬性

app:layout_anchor=”@id/appbar”
app:layout_anchorGravity=”end|bottom|right”

anchor：錨

app:layout_anchor
設定這個屬性可以讓FloatingActionButton以某一個控制元件為基準調整位置，我們這裡設定這個控制元件就是appbar

app:layout_anchorGravity
設定基於appbar控制元件的位置，我們這裡設定了end|bottom|right

這樣兩行程式碼就可以將FloatingActionButton設定在appbar的右下角，並且行為會和appbar的滾動行為協作。

app:layout_anchorGravity

另外需要注意的是Toolbar的title需要在程式碼裡設定：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("HD TEST");
        toolbar.setNavigationIcon(R.drawable.back);
        setSupportActionBar(toolbar);

程式碼下載：

CollapsingToolbarLayout用法詳解（簡潔易懂）