AppBarLayout使用与详解

先来看看效果图（图片借用的哈，效果是这样的）

<?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:id="@+id/activity_coordinator_toolbar_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ws.scrollviewdemo.CoordinatorToolbarTest">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="exitUntilCollapsed|scroll">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_pay_zhifubao"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin">

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

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

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_pay_yilian" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_pay_yilian" />

            <!--……此处n个ImageView，为了滑动的效果-->

        </LinearLayout>

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

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

在这个布局中我们可以看到几个陌生而又熟悉的控件：CoordinatorLayout、NestedScrollView、CollapsingToolbarLayout、Toolbar还有AppBarLayout。

1、CoordinatorLayout

CoordinatorLayout详解

CoordinatorLayout简单说就是作为父布局来协调子View，为什么要用它呢？在android的开发文档中说，如果AppBarLayout用其他的ViewGroup会不起作用，所以就老老实实的按着文档搞吧……^_^。

2、NestedScrollView

看上面的效果图，可以理解为滑动下面的可以滚动的控件，使上面的AppBarLayout也可以动，所以这就需要上面提到的那个可以协调子View的父 布局了；那么怎么将下面滚动的控件和上面的AppbarLayout关联起来呢？我门可以看到下面的可滚动的控件设置了一个layout_behavior的属性，对就是根据它关联的，自己去写这个Behavior很不方便，文档已经告诉我们了一个已经具有Behavior的可滚动的控件NestedScrollView。

3、Toolbar

Toolbar就不用多说了吧？

想了解看ToolBar详解

4、CollapsingToolbarLayout

CollapsingToolbarLayout是一个包裹ToolBar并实现了可折叠的app bar，它被设计用作AppBarLayout的直接子View。

大概的原理都是这样，下面来介绍一下代码里出现的还有一些没有出现的属性吧：

1、AppBarLayout的子View应该设置app:layout_scrollFlags属性，可设置的值为：

1）scrol：View设置为该值时，会跟随滚动事件一起滚动，就像和NestedScrollView是一体的，一起动。

2）enterAlways：View设置为该值时，当NestedScrollView向下滑动的时候，View会直接向下滑动，不考虑NestedScrollView是否在滑动。

3）exitUntilCollapsed：View设置为该值的时候，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。（android:attr/actionBarSize最小高度）。

4）enterAlwaysCollapsed：是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。

2、CollapsingToolbarLayout主要包括几个功能：

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status barscrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。

将app:layout_collapseMode设为pin。

参考文档