Android CoordinatorLayout的使用——實現Toolbar的隱藏和折疊

簡單介紹下CoordinatorLayout

CoordinatorLayout
public class CoordinatorLayout
extends ViewGroup implements NestedScrollingParent2
java.lang.Object
  ↳ android.view.View
    ↳ android.view.ViewGroup
     ↳ android.support.design.widget.CoordinatorLayout

CoordinatorLayout 是一個“super-powered FrameLayout”，主要用於兩個方面
1. 作為最頂層的控件
2. 作為一個父控件於一個或者多個子控件進行交互

CoordinatorLayout使用新的思路通過協調調度子布局的形式實現觸摸影響布局的形式產生動畫效果。CoordinatorLayout通過設置子View的 Behaviors來調度子View。系統（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior 等。

---

這篇文章主要講述ToolBar 的隱藏和折疊

一.配合AppBarLayout 控件，實現隱藏

AppBarLayout
public class AppBarLayout
extends LinearLayout
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
     ↳ android.widget.LinearLayout
      ↳ android.support.design.widget.AppBarLayout

AppBarLayout 繼承LinearLayout,子控件默認時豎直方向顯示。它支持滑動手勢,它的子控件可以通過在代碼中調用setScrollFlags(int)或者在XML里app:layout_scrollFlags來設置它的滑動手勢,但是前提是根布局是CoordinatorLayout。

下面介紹下scrollFlags 的5種參數：

• scroll: 所有想滾動出屏幕的view都需要設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設置這個值，將會停留在屏幕頂部
• enterAlways: 每次向下的滾動都會導致該view變為可見，啟用快速“返回模式”
• snap:當下拉不到一定高度時，Toolbar回彈回去，如果上滑不到一定高度，Toolbar不會收縮。但是上滑時會全隱藏Toolbar
• enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度
• exitUntilCollapsed: 滾動退出屏幕，最后折疊在頂端，向下滑時要等item是第一個時才能滑出Toolbar。

OK,下面看一下 app:layout_scrollFlags="scroll|enterAlways" 這樣設置的效果
布局文件如下：

<?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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

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

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

這里還要注意一個地方 ：RecyclerView 的layout_behavior 屬性，其實@string/appbar_scrolling_view_behavior 對應着的AppBarLayout.ScrollingViewBehavior,正是這個Behavior 實現了組件及之間的滑動交互，控制着Toolbar 的隱藏，所以這個參數是絕對不能忽略的。

AppBarLayout的子控件不僅僅可以設置為Toolbar，也可以包含其他的View，比如說包裹一個 TabLayout。

代碼及效果如下：

<?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="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

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

二、配合CollapsingToolbarLayout，實現ToolBar的折疊

CollapsingToolbarLayout
public class CollapsingToolbarLayout
extends FrameLayout
java.lang.Object
  ↳ android.view.View
   ↳ android.view.ViewGroup
      ↳ android.widget.FrameLayout
       ↳android.support.design.widget.CollapsingToolbarLayout

CollapsingToolbarLayout：顧名思義就是可折疊的toolbar布局,繼承FrameLayout。CollapsingToolbarLayout 設置 layout_scrpllFlag 屬性,可以控制包含在CollapsingToolbarLayout 中的控件。

下面介紹下CollapsingToolBarLayout 的屬性

• app:title=”” ToolBar 的標題，當ToolBar 和 CollapsingToolBarLayout 同時設置了title后，以CollapsingToolBarLayout 的為准。
• app:contentScrim=”?attr/colorPrimary” 當CollapsingToolBarLayout 被折疊后在最頂部顯示的顏色。
• app:expandedTitleGravity=”left|bottom” 當CollapsingToolBarLayout 完全展開后，title 所在的位置，默認的顯示在左下角 left+bottom
• app:collapsedTitleGravity=”left” 當CollapsingToolBarLayout 被折疊后title在頂部顯示的位置，默認的顯示在左邊 。
• app:layout_collapseMode=”pin” 注意:這是子視圖的屬性 表示子視圖的折疊模式，有兩個參數 1.”pin” 固定模式，在折疊的時候固定在頂端 2. “parallax” 視差模式,在折疊的過程中會有個視差折疊的效果。

好了，我們來看下使用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"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:collapsedTitleGravity="left"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/colorPrimary"
                android:scaleType="fitXY"
                android:src="@mipmap/timg" />

            <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.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/select_color_000000"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/select_color_000000"
            app:tabTextColor="@color/color_999999">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

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

以上就實現了Toolbar 的折疊和隱藏，實際上CoordinatorLayout 最經典的設計 BeHavior 並沒有詳細講到，我會在下一篇博客中更新 如何自定義的使用BeHavior。

最后附上源碼的地址 https://github.com/smile-sxl/CoordinatorLayout