CoordinatorLayout实现的效果(标题栏效果)

一、效果

CoordinatorLayouy是一个能够协调子布局的容器布局。

使用引入：

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

常见的使用方法如下：
1.与AppbarLayout共同包裹Toolbar可以实现滚动隐藏Toolbar和重现Toolbar。

实现布局：（通过布局就可以实现这样的效果）CoordinatorLayout + 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:orientation="vertical">

     <android.support.design.widget.AppBarLayout
         android:id="@+id/app_bar"
         android:layout_width="match_parent"
         android:layout_height="wrp_content"
         android:fitsSystemWindows="true"
         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"
               app:navigationIcon="@drawable/ic_arrow_back" />
     </android.support.design.widget.AppBarLayout>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@color/colorPrimary">

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
                 android:layout_weight="1"
                 android:gravity="center"
                 android:padding="10dp"
                 android:text="未开始"
                 android:textColor="#fff"
                 android:textSize="16sp" />

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
                 android:gravity="center"
                 android:padding="10dp"
                 android:text="已开始"
                 android:textColor="#fff"
                 android:textSize="16sp" />
         </LinearLayout>

         <android.support.v7.widget.RecyclerView
             android:id="@+id/recycle_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:padding="10dp"
             android:scrollbars="vertical" />
     </LinearLayout>

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

2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView实现 视差 滚动效果

　　　　　　　　　　(一)　　　　　　　　　　　　　　　　　　　　　　(二)

            

视差效果一和二的区别看代码：（注释的一行放开，就是效果二） CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar 实现效果

 <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:orientation="vertical">

     <android.support.design.widget.AppBarLayout
         android:id="@+id/app_bar"
         android:layout_width="match_parent"
         android:layout_height="200dp"
         android:fitsSystemWindows="true"
         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"
             android:fitsSystemWindows="true"
             app:contentScrim="?attr/colorPrimary"
             app:expandedTitleMarginEnd="64dp"
             app:expandedTitleMarginStart="48dp"
             app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:scaleType="centerCrop"
                 android:src="@mipmap/a"
                 app:layout_collapseMode="parallax"
                 app:layout_collapseParallaxMultiplier="0.7" />-->

             <android.support.v7.widget.Toolbar
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="?attr/actionBarSize"
                 app:layout_collapseMode="pin"
                 app:navigationIcon="@drawable/ic_arrow_back"
                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@color/colorPrimary">

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
                 android:layout_weight="1"
                 android:gravity="center"
                 android:padding="10dp"
                 android:text="未开始"
                 android:textColor="#fff"
                 android:textSize="16sp" />

             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
                 android:gravity="center"
                 android:padding="10dp"
                 android:text="已开始"
                 android:textColor="#fff"
                 android:textSize="16sp" />
         </LinearLayout>

         <android.support.v7.widget.RecyclerView
             android:id="@+id/recycle_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:padding="10dp"
             android:scrollbars="vertical" />
     </LinearLayout>

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

二、说明

scrollFlags，通过设置它的值可以实现不同的滚动模式，有四种值

1.scroll ，滚动。所有的Flag都要设置这个值，设置了之后可以向上滚动出屏幕。
2.enterAlways ，设置了这个值的话，该View会在向下滑动的时候立刻显示出来。
3.exitUntilCollapsed ，向上滑动时，所有组件都会滚出屏幕，但Toolbar除外。
4.enterAlwaysCollapsed ，如果你的View设置了最小高度（minHeight）,该View只会以这个最小高度滚出屏幕

layout_collapseMode，设置折叠模式，设置 parallax 为折叠，Pin 是不折叠

  app:layout_collapseMode="parallax"

视差效果中：

 app:contentScrim="?attr/colorPrimary"
 app:expandedTitleMarginEnd="64dp"
 app:expandedTitleMarginStart="48dp"

contentScrim：作用是当整个视图收缩时，整个视图的颜色。
expandedTitleMarginStart：设置Tittle文本的边距，当视图收缩后，Tittle离左边的距离
expandedTitleMarginStart：设置Tittle文本的边距，当视图扩展后，Tittle离左边的距离

图片视差中：

app:layout_collapseParallaxMultiplier=”0.7”

layout_collapseParallaxMultiplier：视差滚动因子，自动收缩的比例值。当手指操作收缩到宽展的70%时，放开会自动收缩。

三、注意：
　　1. AppBarLayout必须是CoordinatorLayout的直接子View
　　2. 要把带有scroll flag的view放在前面，这样收回的view才能让正常退出，而固定的view继续留在顶部
　　3. android:fitsSystemWindows="true" 的使用注意
　　4. app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。
　　5. 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，它的值为android.support.design.widget.AppBarLayout$ScrollingViewBehavior ，指向AppBarLayout.ScrollingViewBehavior，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发滚动事件的view之上。

四、参考
http://blog.csdn.net/a8341025123/article/details/53006865
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html
http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html