Material Design 系列（3）—AppbarLayout

转载请注明出处：
http://blog.csdn.net/user11223344abc?viewmode=contents
出自【蛟-blog】

1.AppBarLayout是啥？

1.1 书面解释：

AppBarLayout是一个实现了Material Design中app bar的scrolling gestures特性的垂直的LinearLayout

AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。

AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作

为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。

scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

1.2 人话解释

它不过是一个布局，它跟LinearLayout，RelativeLayout这种布局的学习方式差不多，我们回想当初我们学习这些老的布局控件的时候，首先肯定是先熟悉他们在xml中的属性，然后再对应着界面看效果。当然这只限入门级别，想要通过它来实现一些非常牛逼的特性，估计还是要在此基础上进行更多的探索。言归正传，学习这个控件的属性的时候主要把握几个点。

1.2.1:scroll属性：
所有的属性必须配合scroll这个属性来实现，否则UI没法联动滚动。so，下面我就将其余属性用管道符的形式表述出来，这样看起来友好一些。

1.2.2:父View必须为协调者布局CoordinatorLayout，且appbarLayout自身必须为父View的直接子View：
具体太深入的源码我没去看，大致感觉就是联动事件的传递应该是基于它的，官方这么说。咱就这么做，so，记住就好，不然无法正常工作。
且由于，它是协调者布局的子View，那么它必然需要按照协调者布局的套路出牌，这是之前博客的研究（详情点击此处），所以，我们经常看见他和协调者布局CoordinatorLayout一起使用，有时候我甚至觉得，抛开这个控件，我们只使用协调者布局也能实现，可能是谷歌的大神考虑到实现起来的复杂性，专门推出这么一个控件来汇总管理一些常有的酷炫效果让我们可以遵循一些规范来降低实现这些效果的复杂度。

1.2.3:scroll及其相关属性设置给谁？
咱说了这么久的scroll flag，这个属性到底该设置到哪儿呢？答案是，这些属性是设置在AppbarLayout的直接子View上的，否则无效。体现出来就是，顶部那块bar区域直接就不动了。

1.2.4:属性汇总

是的，你没看错，这个控件总共5个属性。
具体的各个属性，咱们接下来看。

2.具体属性实现

2.1:scroll：

这个是第一个属性，所以我将我的描述语言也尽量的讲清楚，因为像这种联动滑动的效果，区别实际上不是很明显，一些很细节的东西只有看图才能看出来，但是光看图不进行描述，理解上表示不是很深刻，所以我这里也试着描述一下。如下图：

效果展示：

它的布局是这样子的：

<?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:background="@android:color/white"
    tools:context="bv.zj.com.appbarlayoutdemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="200dp"
            android:background="@color/colorAccent" />

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


    <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="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/strs"
            android:textColor="@android:color/black" />

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

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

效果描述：
上滑：
Top布局先隐藏，Bottom布局后隐藏。

下滑：
Bottom布局先出来，Top布局后出来。

2.2:scroll | enterAlways：

效果展示：

它的布局是这样子的：

   ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="200dp"
            android:background="@color/colorAccent" />

    ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

效果描述：
上滑：
Top布局先隐藏，Bottom布局后隐藏。

下滑：
Top布局先出来，Bottom布局后出来。

2.3：scroll | exitUntilCollapsed：

效果展示：

它的布局是这样子的：

   ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="200dp"
            android:background="@color/exitUntilCollapsed" />

    ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

效果描述：

这个布局会去find >>> android:minHeight=”变量dp” 属性。该属性设置到scroll-flags的控件载体上，若没有设置android:minHeight，则视定 android:minHeight=”?android:attr/actionBarSize”。

上滑：
Top布局先隐藏至minHeight时停留，Bottom布局后隐藏。

下滑：
Bottom布局先出来，Top布局后出来至实际控件Height时停留(这里是200dp)。

2.4：scroll | enterAlwaysCollapsed：

效果展示：

它的布局是这样子的：

   ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="200dp"
            android:background="@color/enterAlwaysCollapsed" />

    ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

可以看出，他的效果就跟scroll是一样的，那么他存在的意义是什么了？
我们看他名字带有enterAlwaysCollapsed,那么他应该就是和enterAlways属性一起用的，经过查验资料之后也确实是如此，接下来看变种。

2.5：scroll | enterAlways | enterAlwaysCollapsed：

前面已经看过enterAlways了，这里之所以加上enterAlwaysCollapsed，是因为enterAlwaysCollapsed的功能是让原来的enterAlways具备识别最小高度的功能（对应于2.3:exitUntilCollapsed）。

效果展示：

它的布局是这样子的：

   ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            android:minHeight="30dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent" />

    ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

效果描述：

这个布局会去find >>> android:minHeight=”变量dp” 属性。该属性设置到scroll-flags的控件载体上，若没有设置android:minHeight，则视定 android:minHeight=”?android:attr/actionBarSize”。

上滑：
Top布局先隐藏，Bottom布局后隐藏。

下滑：
Top布局先出来至min_height时停留，Bottom布局再出来直到拉不动时，Top布局再出来至实际控件Height时停留(这里是200dp)。

2.6：scroll | snap：

这个属性就比较叼了，还记得以前我们做过的自定义控件吗？比如让顶部bar滑动至某个坐标时，让其自动展开至最大高度，或者让其自动收缩回顶部。没错，这个属性就是实现这一个功能的，具体看效果图吧。

效果展示：

它的布局是这样子的：

   ...和上面的布局一样...只修改了scroll_flags 省略篇幅...


        <!--属性看这里 layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|snap"
            android:layout_height="200dp"
            android:background="@color/colorAccent" />

    ...和上面的布局一样...只修改了scroll_flags 省略篇幅...

demo

好了，完事儿，有什么不足请指出，小弟一定虚心受教。

THANKS：

http://blog.csdn.net/litengit/article/details/52948574