MaterialDesign 之 AppBarLayout 與 CollapsingToolbarLayout 的學習

1、簡述

本文要介紹的AppBarLayout與CollapsingToolbarLayout均是隨MaterialDesign出現的新控件，二者的做用呢，能夠說就是爲了「加強」Toolbar的吧，它們的出現使得Toolbar再也不只是那個木訥的"ActionBar"，而是一個真正有靈性，有活力的APP工具條。下面就來看看它們是怎麼使用的吧。

2、使用

一、CoordinatorLayout

在使用AppBarLayout與CollapsingToolbarLayout以前，先來講說這個CoordinatorLayout。CoordinatorLayout直譯爲「協調佈局」，顧名思義，它就是用來協調子佈局及控件的，要使用它，則必須把它設置爲整個佈局的根，同時，經過對「特殊子控件」設置app:appbar_scrolling_view_behavior屬性的值，進而來協調子控件在整個佈局中的顯示位置。本文不對其進行深刻講解，咱們這裏只需知道，要使用AppbarLayout來「加強」Toolbar，就須要用到CoordinatorLayout便可。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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp">
        ...
    </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">

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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


</android.support.design.widget.CoordinatorLayout>複製代碼

從上面的代碼中，能夠知道，這裏只對NestedScrollView控件設置了app:appbar_scrolling_view_behavior屬性，沒錯，NestedScrollView是上面說到的「特殊子控件」，像這樣的「特殊子控件」有3個，分別是RecyclerView、ViewPager、NestedScrollView，它們的使用基本是同樣的，app:appbar_scrolling_view_behavior屬性也只對這3個「特殊子控件」有效。對於這個NestedScrollView，你能夠認爲，它就是ScrollView的加強版而已。好了，下面就開始介紹本文的主角。

二、AppBarLayout

下面是官方文檔中對AppBarLayout的描述：

AppBarLayout是一個垂直的LinearLayout，實現了Material Design中app bar的scrolling gestures特性。AppBarLayout的子View應該聲明想要具備的「滾動行爲」，這能夠經過layout_scrollFlags屬性或是setScrollFlags()方法來指定。
AppBarLayout只有做爲CoordinatorLayout的直接子View時才能正常工做，
爲了讓AppBarLayout可以知道什麼時候滾動其子View，咱們還應該在CoordinatorLayout佈局中提供一個可滾動View，咱們稱之爲scrolling view。scrolling view和AppBarLayout之間的關聯，經過將scrolling view的Behavior設爲AppBarLayout.ScrollingViewBehavior來創建。

結合上面CoordinatorLayout部分中貼出的代碼，這段描述的後半段是不難理解的，而比較難理解的應該是layout_scrollFlags屬性，描述中的scrolling view就是上面所說的「特殊子控件」。要牢記，描述中說的是對AppbarLayout的直接子控件設置layout_scrollFlags屬性，下面來看看都有哪些ayout_scrollFlags屬性：

scrollFlags的屬性值	做用
scroll	讓AppBarLayout與scrolling view合爲一體，當scrolling view滾動時，AppBarLayout也跟着一塊兒滾動。這是「加強」Toolbar的一個必需取值，能夠跟其餘值一塊兒使用，從而實現不一樣的「加強」效果。單獨使用scroll的話，其效果就相似給ListView加了一個HeaderView。

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="CSDN_LQR"
            app:layout_scrollFlags="scroll"
            app:titleTextColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

scroll

scrollFlags的屬性值	做用
scroll | enterAlways	當scrolling view向上滾動時，AppBarLayout也跟着一塊兒滾出屏幕，一旦scrolling view向下滾動，AppBarLayout也跟着一塊兒滾入屏幕。

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

enterAlways

scrollFlags的屬性值	做用
scroll | enterAlways | enterAlwaysCollapsed	當scrolling view向上滾動時，AppBarLayout也跟着一塊兒滾出屏幕，一旦scrolling view向下滾動，AppBarLayout便先慢慢滾動到摺疊高度（即最小高度），直到scrolling view向下滾動到最頂部時，AppBarLayout再先慢慢滾動到原來的高度（此時scrolling view也會再次和AppBarLayout一塊兒滾動）。

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

enterAlwaysCollapsed

scrollFlags的屬性值	做用
scroll | exitUntilCollapsed	當scrolling view向上滾動時，AppBarLayout也跟着一塊兒滾出屏幕，直到達到了摺疊高度（即最小高度），此時AppBarLayout再也不滾動，也就是不徹底滾出屏幕，而當scrolling view向下滾動到最頂部時，AppBarLayout纔會再隨scrolling view一塊兒滾動，直到原來的高度。

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

exitUntilCollapsed

scrollFlags的屬性值	做用
scroll | snap	snap有倉促的意思，效果同它的意思同樣，當scrolling view處於沒法再向下滾動的狀態時（即已經到頂部了），此時向上滾動scrolling view，AppBarLayout將一次所有滾出屏幕，或向下滾動scrolling view，AppBarLayout將一次所有滾入屏幕。有一種引力的感受。

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap"
            app:title="CSDN_LQR"
            app:titleTextColor="@android:color/white"/>

    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

snap

好啦，AppBarLayout對Toolbar的「加強」就差很少這樣了，不過要糾正一點，其實AppBarLayout並不僅是對Toolbar"加強"，對於其餘控件也是同樣的，只是AppBarLayout與Toolbar的搭配比較常見而已。下面接着來看看CollapsingToolbarLayout具體能夠對Toolbar作到怎樣的「加強」。

三、CollapsingToolbarLayout

CollapsingToolbarLayout對Toolbar的「加強」就是把Toolbar變成可摺疊的，使其具備更多的交互花樣（其實也就是更多的交互動畫），咱們先來看看能夠實現的效果：

CollapsingToolbarLayout

要實現上圖的效果，須要跟AppBarLayout一塊兒使用，CollapsingToolbarLayout的使用很簡單，直接包裹Toolbar便可，其中能夠增長一個ImageView控件來做爲CollapsingToolbarLayout的「背景」，其實CollapsingToolbarLayout自己是一個FrameLayout，因此其子控件的擺放就是從左上角開始，一個個疊加起來。不過，其中的Toolbar默認一開始是隱藏的。

<?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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/palette"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="CSDN_LQR"
                app:titleTextColor="@android:color/white"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    ...
</android.support.design.widget.CoordinatorLayout>複製代碼

這代碼中有個細節須要注意一下，你能夠發現，代碼中再也不對Toolbar設置app:layout_scrollFlags屬性，而是給CollapsingToolbarLayout控件設置了。這不奇怪，由於上面已經說了，app:layout_scrollFlags屬性是對AppBarLayout的直接子控件設置的。先來看看效果怎樣：

這是默認的效果，能夠看到滾動過程當中，ImageView和大標題一塊兒向上或向下滾動，其實這個過程當中，只有當CollapsingToolbarLayout摺疊時，Toolbar纔會顯示出來，大標題執行了縮放、位置和透明等動畫，而Toolbar執行透明動畫，兩標題重合或分離，看起來好像就只有一個標題同樣。此外，上面的佈局代碼中是有給Toolbar設置樣式的，但並無起做用。CollapsingToolbarLayout提供了文字樣式屬性，能夠分別對大標題（展開標題）與小標題（摺疊標題）的文字樣式進行設置。

style.xml中文字樣式代碼以下：

<!--CollapsingToolbarLayout展開時標題文字樣式-->
<style name="ExpandedTitleTextAppearance" parent="TextAppearance.AppCompat.Title"> <item name="android:textSize">30sp</item> <item name="android:textColor">#fff</item> </style>
<!--CollapsingToolbarLayout摺疊時標題文字樣式-->
<style name="CollapsedTitleTextAppearance" parent="TextAppearance.AppCompat.Title"> <item name="android:textSize">15sp</item> <item name="android:textColor">#000</item> </style>複製代碼

對CollapsingToolbarLayout分別設置展開標題樣式與摺疊標題樣式

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    >
    ...
</android.support.design.widget.CollapsingToolbarLayout>複製代碼

效果：

這樣還不夠，若是想在CollapsingToolbarLayout摺疊時，背景變爲純色、狀態欄也一塊兒變色的話，能夠經過以下代碼設置：

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    app:contentScrim="?attr/colorPrimary"
    app:statusBarScrim="?attr/colorPrimaryDark"
    >
    ...
</android.support.design.widget.CollapsingToolbarLayout>複製代碼

其中contentScrim設置的是摺疊時，CollapsingToolbarLayout的背景色。statusBarScrim設置的是摺疊時，狀態欄的顏色，能夠達到沉浸式的效果，不過這個屬性須要Android 5.0以上才能支持，並且，有的國產機對狀態欄作了限制，沒辦法生效，好比錘子的系統，狀態欄一塊兒是半透明色，且該屬性沒法生效，因此，這個效果需視手機及系統版本而定。來看下效果如何：

呀，馬馬虎虎，不過還差點，須要給圖片「背景」設置視差效果，還有大標題文字底部居中顯示。給圖片「背景」設置視差效果能夠經過設置app:layout_collapseMode屬性來完成，這個屬性只要是CollapsingToolbarLayout的子控件就有，有三種取值，分別是：none、pin、parallax。其中parallax的效果是在CollapsingToolbarLayout摺疊時，此佈局（或控件）會有視差摺疊效果；pin的效果是在CollapsingToolbarLayout摺疊後，此佈局（或控件）將固定在頂部。none是默認值，即沒有效果，實話說，我感受pin跟none沒什麼區別（若是以爲我說的不對，請不吝賜教）。至於標題的位置，能夠經過app:collapsedTitleGravity和app:collapsedTitleGravity來配置，用法跟layout_gravity同樣，就不說了，貼下代碼，隨便看下效果。

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:statusBarScrim="?attr/colorPrimaryDark"
    app:collapsedTitleGravity="start"
    app:expandedTitleGravity="center_horizontal|bottom" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/palette"
        app:layout_collapseMode="parallax"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="CSDN_LQR"
        app:titleTextColor="@android:color/white"
        app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>複製代碼

最後附上Demo連接

github.com/GitLqr/Mate…