Android CoordinatorLayout（二）CoordinatorLayout的組合使用

上一章講到了CoordinatorLayout + Toolbar，這章繼續講布局相關。

3、CollapsingToolbarLayout + Toolbar

如果對 2 的效果不滿意，我們想更高大上一點的，我們要展開的時候是圖檔，折疊的時候是Toolbar，這樣的逼格才高。那我們就試試CollapsingToolbarLayout 。

能否直接使用CollapsingToolbarLayout 而不使用AppBarLayout 呢？

我試過了，不能。為了節省時間，這種無關緊要的過程就不貼了。

<android.support.design.widget.CoordinatorLayout android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <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:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:layout_scrollFlags="scroll">

            <ImageView
                android:src="@mipmap/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:minHeight="100dp"/>

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


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

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

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

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

初步做法這樣做，會發現很有意思的事情，你可以試試，你會看到一個半成品的效果，我這裡不會錄gif，是以沒法展示。

其實要做的事很簡單，你隻要把CollapsingToolbarLayout的app:layout_scrollFlags設定為app:layout_scrollFlags="scroll|exitUntilCollapsed"這樣大概能有個70%成品的效果，我還是沒gif沒法展示，感興趣的可以試試。

之後你要為當中的兩個控件設定layout_collapseMode屬性，就像這樣：

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:src="@mipmap/test"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:minHeight="100dp"
                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"
                ></android.support.v7.widget.Toolbar>


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

這個屬性我們過後會講，你可以試試不加這個屬性和加這個屬性的差別。加了之後，這樣就能實作我們想要的結果的99%。剩下的還有一個問題，如果你實際操作你會發現，折疊後下拉時，有時候不會顯示圖檔全部，其實把這其中的android:minHeight="100dp"删除就行，這樣就能實作我們想要的效果。

更換CollapsingToolbarLayout的控件

有的朋友喜歡腦洞大開，難道CollapsingToolbarLayout就隻能用android.support.v7.widget.Toolbar和ImageView？這樣的組合？

我也想知道這個問題的答案，那就然我們來測試一下。

（1）更換完整版的ImageView 和 Toolbar 順序

image.png

滑到頂之後會變成這樣，圖檔上截走了一小部分，圖檔下截走了一大部分。

這告訴我們一個規律，它就差不多是一個FrameLayout的原理，誰在最外層圖層，滑到最頂後顯示的是app:layout_collapseMode="pin"的控件的高度截取的那個最外層圖層。

（2）把Toolbar換成TextView

<TextView
                android:layout_width="150dp"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimaryDark"
                android:text="測試"
                app:layout_collapseMode="pin"
                />
           

額......這套路好像玩不起來。

這就說明CollapsingToolbarLayout内部隻能用Toolbar來當基礎了，ImageView應該是可以換的。而且認真觀察你會發現CollapsingToolbarLayout都是以Toolbar來命名，是以裡面肯定基礎隻能用Toolbar。

那如果你有強迫症，說老子就不用Toolbar，行，我們解剖一下CollapsingToolbarLayout。

看好這張圖，這個類裡面有個Toolbar，這不是關鍵，

關鍵是這個類繼承FrameLayout ,FrameLayout 啊哥，不是我和你開玩笑，你要想實作裡面不用Toolbar也能做那樣的高逼格效果，你就要自定義一個類像CollapsingToolbarLayout，比如說你自定義裡面的基礎是TextView，那你就要寫一個CollapsingTextViewLayout，但是啊，以我現在的實力我是做不了的啊，它這裡是繼承FrameLayout ，要是他是繼承一個什麼CollapsingBaseLayout之類的我還能做，你要像它這樣把折疊的邏輯操作自己寫的話我這渣渣水準是沒轍了。這個類一共1299行，我是寫不了這邏輯的，但是如果你是一個大屌，你可以寫個CollapsingBaseLayout然後用繼承去實作。等等.....大屌好像不需要我來交。

是以各位兄弟，如果你沒能力自定義，還是乖乖的用CollapsingToolbarLayout吧。