CoordinatorLayout ＋ AppBarLayout + ToolBar

主要參考了 http://blog.csdn.net/leejizhou/article/details/50533020, 而後作了 一個本身的例子

首先是引入sdk

compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'

其實 這一部份主要是佈局上操做, 代碼沒有什麼內容

需求一     頁面有scroll內容時, toolbar 在上滑時隱藏,下滑時顯示,詳情見註釋部分

<?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="cn.feezu.coordinatordemo.MainActivity">

    <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">  <!-- 用不用這個Theme影響不大-->
        <!--爲了可以讓Toolbar響應滾動事件須要在Toolbar外面放AppBarLayout的佈局容器-->
        <!-- AppBarLayout裏面定義的view只要設置了app:layout_scrollFlags屬性，
        就能夠在RecyclerView或者任意支持嵌套滾動的view好比NestedScrollView滾動事件發生的時候會被觸發-->
        <!-- Toolbar中的app:layout_scrollFlags屬性裏面必須至少啓用scroll，
        這樣Toolbar纔會滾動出屏幕，不然它將一直固定在頂部。-->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">
            <TextView
                android:textSize="22sp"
                android:text="title"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <!-- 定義AppBarLayout與滾動視圖之間的聯繫-->
    <!-- 在RecyclerView或者任意支持嵌套滾動的view好比NestedScrollView上添加app:layout_behavior。
    Android design support library包含了一個字符串資源@string/appbar_scrolling_view_behavior，
    這個是官方定義好的，咱們直接拿來用就OK了，它和AppBarLayout.ScrollingViewBehavior相匹配，
    當這個滾動的View發生滾動事件時候，CoordinatorLayout會搜索本身所包含的其餘view，
    看看是否有view與這個behavior相關聯，因此NestedScrollView滾動的時候會觸發AppBarLayout-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="@string/textString"
                android:textSize="20sp"/>

            <Button
                android:id="@+id/btn"
                android:text="click me"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

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

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

總結下:

  1. 根佈局控件必須是CoordinatorLayout,最好設置屬性android:fitsSystemWindows="true"

  2. toolbar外層要放置一個AppBarLayout,  

  3. toolbar要設置一個屬性app:layout_scrollFlags="scroll|enterAlways",

            這個屬性是最爲AppBarLayout的子控件存在的屬性,設置爲scroll才能不固定.

 4. 在RecyclerView或者任意支持嵌套滾動的view好比NestedScrollView上添加                 app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性,這樣才能和AppBarLayout聯動

需求二  視差滾動和toolbar切換顯示

直接看佈局文件以及註釋:

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">

        <!--
        CollapsingToolbarLayout的2個重要屬性:
             layout_scrollFlags=」scroll|exitUntilCollapsed」：向上滾動時收縮View，
             但能夠固定Toolbar，使Toolbar一直在上面
             contentScrim： 當CollapsingToolbarLayout摺疊後背景顏色-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- CollapsingToolbarLayout子view，ImageView屬性
                layout_collapseMode=」parallax」：使ImageView跟隨滾動的時候具備視差效果
                layout_collapseParallaxMultiplier=」0.1」：視差因子，設置視差滾動因子，值爲：0~1-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitStart"
                android:src="@drawable/p"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>

            <!--爲了使Toolbar具備摺疊的效果，Toolbar外面還要放一個CollapsingToolbarLayout佈局容器，
            CollapsingToolbarLayout裏面放了一個ImageView和一個Toolbar，
            並把這個CollapsingToolbarLayout放到AppBarLayout中做爲一個總體。-->

            <!-- CollapsingToolbarLayout子view，Toolbar屬性
                layout_collapseMode=」pin」：當CollapsingToolbarLayout徹底收縮後，
                Toolbar還能夠保留在屏幕上。-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:textSize="20sp"
            android:text="@string/textString"
            android:layout_margin="9dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


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

    <!-- 錨點在AppBarLayout上,視差圖片隱藏時也隱藏 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16sp"
        android:src="@android:drawable/btn_star"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

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

總結下:

 1. 根佈局控件必須是CoordinatorLayout,最好設置屬性android:fitsSystemWindows="true"

 2.   AppBarLayout包含CollapsingToolbarLayout佈局,CollapsingToolbarLayout須要指定屬性

     app:layout_scrollFlags="scroll|exitUntilCollapsed"   // 向上滾動時收縮View

     app:contentScrim="?attr/colorPrimary"                   //這個指定摺疊後的背景色

 3. CollapsingToolbarLayout 下包含視差圖片的ImageView以及ToolBar 2個子控件

4 .最爲CollapsingToolbarLayout的視察圖片的控件ImageView須要2個屬性:

                app:layout_collapseMode="parallax"

                app:layout_collapseParallaxMultiplier="0.1"

5.最爲和視察圖片交互,ToolBar須要指定屬性

           app:layout_collapseMode="pin" 

6. 主要的帶scroll屬性的控件,好比NestedScrollView或者ScrollView,  須要指定屬性:

           app:layout_behavior="@string/appbar_scrolling_view_behavior"

7.若是 FloatingActionButton指定屬性

    app:layout_anchor="@id/app_bar"  //錨點定在AppBarLayout上,則能夠隨視差滾動聯動