Android CoordinatorLayout使用 標題由圖片變純色

效果圖：

依賴：

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

佈局為下：

//CoordinatorLayout是新新增的一個增強型的FrameLayout，通過它可以實現很多東西：
//   例如：
//      1.介面向上滾動逐漸隱藏Toolbar；
//      2.在其中可以放置浮動的View，就像Floating Action Button。
<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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    //AppBarLayout跟它的名字一樣，把容器類的元件全部作為AppBar。
    //        將AppBarLayout放在CoordinatorLayout中，就可以實現滾動效果。
    //        本例中，TabLayout在介面滾動時，隨著Toolbar的逐漸隱藏，將佔據Toolbar的位置，
    //            達到節省螢幕空間，介面動畫效果的目的。
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:title="Coding"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

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

            //屬性解析：
            // app:theme：指定Toolbar的樣式，包括ActionbarToggle和popupMenu的指示圖示顏色
            // app:popupTheme：指定popupMenu溢位後的樣式
            // app:title:    指定Toolbar中主Title的內容
            // app:layout_scrollFlags的意思是：

            設定的layout_scrollFlags有如下幾種選項：
                scroll: 所有想滾動出螢幕的view都需要設定這個flag- 沒有設定這個flag的view將被固定在螢幕頂部。
                enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。
                enterAlwaysCollapsed: 當你的檢視已經設定minHeight屬性又使用此標誌時，你的檢視只能以最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度。
                exitUntilCollapsed: 當檢視會在滾動時，它一直滾動到設定的minHeight時完全隱藏。

            // 需要注意的是，後面兩種模式基本只有在CollapsingToolbarLayout才有用，
            // 而前面兩種模式基本是需要一起使用的，也就是說，這些flag的使用場景，基本已經固定了。
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    //app:layout_behavior 屬性，沒錯，
    //      如果你使用CoordinatorLayout來實現Toolbar滾動漸變消失動畫效果，那就必須在它下面的那個控制元件中加入這個屬性，並且下面的這個控制元件必須是可滾動的。
    //  當設定了layout_behavior的控制元件滑動時，就會觸發設定了layout_scrollFlags的控制元件發生狀態的改變。
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="這裡面是內容區域"
            />

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

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

ok，直接編譯執行看看效果吧！（注，佈局中的android.support.v4.widget.NestedScrollView可以更換為其他控制元件，比如ViewPager）

原始碼下載：點選下載