之前在知乎客戶端第一次看到CoordinatorLayout+AppBarLayout的時(shí)候就被其特效深深吸引，那時(shí)我還沒入android這個(gè)深坑，如今終于一探其奧秘，想想還有點(diǎn)小激動(dòng)呢~

AppBarLayout以其強(qiáng)大的靈活性接替了枯燥的ActionBar的職位，使得整個(gè)應(yīng)用的頭部變得不再單調(diào)。

廢話不多說，直接來看效果吧。

一、標(biāo)題欄固定

AppBarLayout有著良好的滾動(dòng)基因，配上CollapsingToolbarLayout對(duì)子布局滾動(dòng)效果的協(xié)助，可謂如虎添翼。

以CoordinaryLayout為根布局，AppBarLayout為被滾動(dòng)布局，再加上NestedScrollView或者RecycleView作為主動(dòng)滾動(dòng)布局，就能實(shí)現(xiàn)AppBarLayout的滾動(dòng)效果。

展開狀態(tài)

折疊狀態(tài)

代碼如下：

<?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:id="@+id/coordinator_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="false"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bar_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:titleTextColor="#fff"
                app:title="Hello World"
                app:titleMarginTop="15dp"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle_view_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>

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

CollapsingToolbarLayout的app:layout_scrollFlags屬性有5種滾動(dòng)標(biāo)識(shí)：

·scroll：最基本的標(biāo)識(shí)，只要你想實(shí)現(xiàn)AppBarLayout的滾動(dòng)效果，就必須加上此標(biāo)識(shí)。

·enterAlways：折疊后，一有下拉動(dòng)作就展開。

·enterAlwaysCollapsed：①定義了minHeight? ②定義了enterAlways? 之后再加上此標(biāo)識(shí)就能使view達(dá)到minHeight是就開始顯示。

·exitUntilCollapsed：當(dāng)定義了minHeight后，達(dá)到minHeight就折疊。

·snap：使動(dòng)畫完整化，當(dāng)view未完全展開到一定程度則自動(dòng)展開或折疊，優(yōu)化了體驗(yàn)效果。

子布局的app:layout_collapseMode有3種折疊模式：

·none：默認(rèn)屬性，無折疊行為。

·pin：折疊后，此布局固定在頂部。（單獨(dú)使用無效！必須和exitUntilCollapsed配合才能有此效果）

·parallax：折疊時(shí)，布局有視差折疊效果。設(shè)置完后還需設(shè)app:layout_collapseParallaxMultiplier

關(guān)于圖片折疊時(shí)的漸隱效果，必須在CollapsingToolbarLayout中設(shè)置app:contentScrim屬性，否則圖片不會(huì)有漸隱效果，另外Toolbar會(huì)顯示在圖片上。

二、標(biāo)題欄隨動(dòng)

折疊狀態(tài)

展開狀態(tài)

代碼如下：

<?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:id="@+id/coordinator_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/bar_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.9"/>

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


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle_view_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>

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

改動(dòng)的地方：

去掉Toolbar的app:layout_collapseMode="pin"以及title相關(guān)的設(shè)置，改為在控制層代碼中動(dòng)態(tài)添加。動(dòng)態(tài)添加代碼時(shí)最好使用mCollapsingToolbarLayout的方法添加，測(cè)試時(shí)使用mToolbar發(fā)現(xiàn)可以設(shè)置標(biāo)題文字但是顏色不好設(shè)置。

mCollapsingToolbarLayout.setTitle("Hello World");  //標(biāo)題
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);  //折疊時(shí)標(biāo)題顏色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.CYAN);  //展開時(shí)標(biāo)題顏色