AppBarLayout使用个人总结

    1.AppBarLayout官网是这么介绍的：

大意是说 AppBarLayout是一个垂直的LinearLayout，实现了Material Design中app bar的scrolling gestures特性。AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。 AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，如果包含了一个不同的ViewGroup，将会导致此功能无法实现（翻译水平有限）。也就是说在CoordinatorLayout父控件下面，AppBarLayout会根据子View声明的滚动行为来对其子View进行相应的滚动。当我们向上滚动可滚动View时，ToolBar会根据我们设定的layout_scrollFlags值做出不同效果的展示。

   2.collapsingToolbarLayout介绍：

CollapsingToolbarLayout在布局中包裹一个Toolbar，以实现具有“折叠效果“”的顶部栏。

1. Collasping title（可折叠标题）：当布局完全可见时，这个标题比较大；当折叠起来时，标题也会变小。标题的外观可以通过expandedTextAppearance和collapsedTextAppearance属性来调整。

2. Content scrim（内容纱布）：根据CollapsingToolbarLayout是否滚动到一个临界点，内容纱布会显示或隐藏。可以通过setContentScrim(Drawable)来设置内容纱布。

3. Status bar scrim（状态栏纱布）：也是根据是否滚动到临界点，来决定是否显示。可以通过setStatusBarScrim(Drawable)方法来设置。这个特性只有在Android5.0及其以上版本，我们设置fitSystemWindows为ture时才能生效。

4. Parallax scrolling children（视差滚动子View）：子View可以选择以“视差”的方式来进行滚动。（视觉效果上就是子View滚动的比其他View稍微慢些）

5. Pinned position children：子View可以选择固定在某一位置上。（部分翻译找了下网上资源）

    先看看效果，为了能把手机APP的展示录一个动态的gif，今天算是花了一番功夫弄了下，虽然不 是很好，但总比显示几张静态的图好了。OK，看图：

 

   3.AppBarLayout的实现

    xml布局实现：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    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:layout_height="?android:attr/actionBarSize"
    scroll|exitUntilCollapsed
    scroll|enterAlways
    scroll|enterAlways|enterAlwaysCollapsed
    -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/btn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="10dp"
                    android:layout_marginBottom="10dp"
                    android:textAllCaps="false"
                    android:text="跳转"/>
            </RelativeLayout>
        </android.support.v7.widget.Toolbar>

    </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">

        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </WebView>
    </android.support.v4.widget.NestedScrollView>

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

在上面的布局文件中，NestedScrollView充当了scrolling view的角色，Toolba r里面有个属性app:layout_scrollFlags,为了有滑动的效果，app:layout_scrollFlags属性必须要有scroll属性，也就是其余的都是和它并起来用，比如：scroll|exitUntilCollapsed

exitUntilCollapsed:当可滚动的view向下滑动时，只有当可滚动的view滑到了自己的顶部，然后执行Toolbar向下滑动的动作；当向上滑动时，首先将Toolbar的滑动滑到最小的高度，然后下面可滚动的view再向上滑动。

enterAlways:toolbar下面可滚动的view向下滚动时，Toolbar就会一起跟着向下滚动。

enterAlwaysCollapsed:在enterAlways的基础上，加上了“折叠”的效果。当我们开始向下滚动下面的view时，Toolbar会一起跟着滚动直到达到其“折叠高度”（即最小高度）。然后当下面view滚动至顶部内容完全显示后，再向下滚动下面的view，Toolbar会继续滚动到完全显示出来。这里需要把layout_scrollFlags指定为“scroll|enterAlways|enterAlwaysCollapsed”。

   4.CollapsingToolbarLayout的实现

   xml布局实现：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator"
    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:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        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="@color/colorAccent"
            app:title="@string/app_name"
            app:expandedTitleMarginEnd="50dp"
            app:expandedTitleMarginStart="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/meinv"
                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.design.widget.CollapsingToolbarLayout>
    </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">

        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </WebView>
    </android.support.v4.widget.NestedScrollView>

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

我们可以看到，顶部栏会随着scrolling view向上滚动而折叠。在XML文件中为CollapsingToolbarLayout的layout_scrollFlags指定为“scroll|exitUntilCollapsed”，这样便实现了向上滚动scrolling view时的折叠效果。把CollapsingToolbarLayout的contentScrim属性指定为"@color/colorAccent"后,当滑动view向上滑到 Toolbar最小高度后， Toolbar会显示为我们设置的颜色。layout_collapseMode属性为parallax， 表示图片渐变会有视差滚动；而Toolbar的layout_collaspeMode设为了pin，也就是Toolbar会始终固定在顶部。

最后：点我下载demo