摘要

通過上一篇文章我們初次認(rèn)識(shí)了下Toolbar。聊了下怎么把Toolbar集成到項(xiàng)目中和Toolbar的基本設(shè)置這兩個(gè)問題。接下來聊聊怎么給Toolbar加上一些交互效果，類似Play商店上的那些效果。

效果一:使Toolbar隨著內(nèi)容區(qū)域的滾動(dòng)而隱藏和顯示

我們知道手機(jī)屏幕的大小時(shí)候限的，有時(shí)候我們?yōu)榱孙@示更多的內(nèi)容需要隱藏掉一些不相關(guān)的內(nèi)容，比如Toolbar。以前我們可能會(huì)使用屬性動(dòng)畫或者通過view.animate().translationXX()這個(gè)便捷的方法來實(shí)現(xiàn)這些效果?，F(xiàn)在就不用這么麻煩了，只需要在xml中添加兩行代碼就可以了。

為了實(shí)現(xiàn)上述的效果，這里需要引入兩個(gè)新的控件：CoordinatorLayout和AppBarLayout，這兩個(gè)控件均位于design兼容包中。所以你需要在module的build.gradle依賴中加入下面一行代碼。

compile 'com.android.support:design:23.1.0'

• AppBarLayout：本質(zhì)上是一個(gè)垂直的線性布局。但是他實(shí)現(xiàn)了材料設(shè)計(jì)中app bar的滾動(dòng)手勢(shì)的特性。而為了讓這些特性發(fā)揮效果，你必須把AppBarLayout作為CoordinatorLayout的一個(gè)直接子控件來使用。并且，你還需要為AppBarLayout設(shè)置一個(gè)支持NestedScroll的兄弟控件。這樣父控件CoordinateLayout就知道什么時(shí)候來響應(yīng)滾動(dòng)事件了 它的子控件可以通過setScrollFlags(int)或者app:layout_scrollFlags的方式來為自己指定滾動(dòng)行為?？蛇x的行為有：SCROLL_FLAG_ENTER_ALWAYS、SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED、SCROLL_FLAG_EXIT_UNTIL_COLLAPSED、SCROLL_FLAG_SCROLL、SCROLL_FLAG_SNAP。
• CoordinateLayout：本質(zhì)上是一個(gè)增強(qiáng)版的FrameLayout。一般作為一個(gè)容器來使用，這樣可以讓它的子控件實(shí)現(xiàn)一些交互效果?？梢酝ㄟ^給子控件指定不同的Behaviors來實(shí)現(xiàn)不同的交互效果。

扯了這么多好像也沒啥感覺，感覺還真是“Talk is cheap. Show me the code.”呢。那下來就擼代碼，看效果吧。

<?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:fitsSystemWindows="true"
    tools:context="com.demo.activity.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

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

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

上面的布局中有兩個(gè)地方需要注意：1.Toolbar的app:layout_scrollFlags="scroll|enterAlways"屬性 2.RecyclerView的app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性。這兩個(gè)地方就是上文中加粗部分的提到的注意點(diǎn)。同時(shí)，注意下整個(gè)布局的結(jié)構(gòu)：CoordinateLayout作為跟布局，內(nèi)部分別放置了一個(gè)AppBarLayout和RecyclerView。Toolbar作為AppBarLayout的子控件而存在。
其實(shí)，就改這么點(diǎn)地方就可以了。想要的效果已經(jīng)有了。不信給你看看效果圖。

效果二：多個(gè)控件協(xié)同作戰(zhàn)(其實(shí)沒想出來怎么描述這種效果)

這種效果我還不好描述，直接上圖一看你就明白。一圖頂千言?。?/p>

從上面的效果圖中可以看到，隨著內(nèi)容區(qū)域的滑動(dòng)頂部的圖片和Toolbar也會(huì)做出相應(yīng)的動(dòng)作。圖片會(huì)收縮和展開，Toolbar的背景在透明和藍(lán)色之間變化。要實(shí)現(xiàn)這種類似Play商店的效果，還需要引入一個(gè)新的控件：CollapsingToolbarLayout。該控件同樣位于design兼容包中。

CollapsingToolbarLayout是對(duì)Toolbar的包裝，它實(shí)現(xiàn)了可收縮的app bar效果，而且被設(shè)計(jì)為AppBarLayout的直接子類來使用的。

引入CollapsingToolbarLayout控件后，我的布局變成了這樣子。

<?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:fitsSystemWindows="true"
    tools:context="com.demo.activity.MainActivity">

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:collapsedTitleGravity="center"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/cheese_1"
                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"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

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

可以看到，Toolbar被CollapsingToolbarLayout包裹起來了，并且給Toolbar添加了一個(gè)ImageView的兄弟控件。同時(shí)在CollapsingToolbarLayout的子控件上分別設(shè)置了app:layout_collapseMode屬性(姑且就叫收縮模式吧)，該屬性有兩種值：parallax和pin。parallax屬性值會(huì)讓的CollapsingToolbarLayout子控件在滾動(dòng)時(shí)呈現(xiàn)出視差效果，而pin則會(huì)讓它的子控件保持不動(dòng)。從上面設(shè)置的值對(duì)比著效果圖看，應(yīng)該就比較清晰了。

CollapsingToolbarLayout有很多屬性可以控制滾動(dòng)過程中文字的滾動(dòng)軌跡，文字樣式，文字的位置以及它的子控件之間的配合方式。比如collapsedTitleGravity可以設(shè)置收縮結(jié)束時(shí)title的對(duì)其方式，上例中使用了居中對(duì)齊，所以title最終顯示在了toolbar的中間，默認(rèn)是靠左顯示的。

其實(shí)之前提到的這些新控件配合起來可以實(shí)現(xiàn)的效果還是挺多的，這里面有一個(gè)起到重要角色的對(duì)象：Behavior。它定義了CoordinateLayout的子控件之間的交互行為，如果想實(shí)現(xiàn)一些自定義的交互效果，那么就需要自己去實(shí)現(xiàn)一些Behavior了。關(guān)于Behavior的自定義目前還不太了解，以后有機(jī)會(huì)的話也會(huì)研究下。

這篇就說這么多吧，計(jì)劃下一篇把CollapsingToolbarLayout的那些屬性總結(jié)下，然后再搞下Android抽屜的用法。