android Material Design 学习之六：AppBarLayout

/**
 * AppBarLayout is a vertical {@link LinearLayout} which implements many of the features of
 * material designs app bar concept, namely scrolling gestures.

AppBarLayout 就是实现了MD风格的滚动手势的LinearLayout。

AppBarLayout 的基本使用

RecyclerView 与ToolBar 联动

布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start"
    >

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

    <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.ActionBar">
        <include layout="@layout/tool_bar_layout"/>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
    </android.support.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@mipmap/fab_add"
            app:backgroundTint="@color/fab_ripple"
            android:layout_gravity="bottom|right|end" />

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

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

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

这里AppBarLayout 包裹着ToolBar,为RecyclerView 指定behavior：

   app:layout_behavior="@string/appbar_scrolling_view_behavior"

为ToolBar 指定scrollFlags：

  app:layout_scrollFlags="scroll"

向上滑动，ToolBar 消失，向下滑动，ToolBar 出现。

AppBarLayout 的五种scrollFlags

                SCROLL_FLAG_SCROLL,
                SCROLL_FLAG_EXIT_UNTIL_COLLAPSED,
                SCROLL_FLAG_ENTER_ALWAYS,
                SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED,
                SCROLL_FLAG_SNAP

第一种：scroll

 app:layout_scrollFlags="scroll"

官方说明：

    /**
         * The view will be scroll in direct relation to scroll events. This flag needs to be
         * set for any of the other flags to take effect. If any sibling views
         * before this one do not have this flag, then this value has no effect.
         */

该子View 会随着滚动事件滚出或者滚进屏幕，而且其他Flags 之前必须添加这个Flag，否则不起作用。

第二种：enterAlways

 app:layout_scrollFlags="scroll|enterAlways"

/**
         * When entering (scrolling on screen) the view will scroll on any downwards
         * scroll event, regardless of whether the scrolling view is also scrolling. This
         * is commonly referred to as the 'quick return' pattern.
         */

直接看图：

与上图的区别就在于，向下滑动时的区别，scroll 是先滑动RecyclerView ,再滑动Toolbar ,而 enter_Always 是优先滑动ToolBar 再滑动RecyclerView 。

第三种：enterAlwaysCollapsed

 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

 /**
         * An additional flag for 'enterAlways' which modifies the returning view to
         * only initially scroll back to it's collapsed height. Once the scrolling view has
         * reached the end of it's scroll range, the remainder of this view will be scrolled
         * into view. The collapsed height is defined by the view's minimum height.
         *
         * @see ViewCompat#getMinimumHeight(View)
         * @see View#setMinimumHeight(int)
         */

这种模式稍复杂，带着折叠效果。修改ToolBar 布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:minHeight="50dp"
    app:title="@string/app_name"
    app:theme="@style/OverFlowMenuTheme"
    app:popupTheme="@style/AppTheme"
    android:background="@color/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
   ></android.support.v7.widget.Toolbar>

这里设置了最小高度。

可以看出，这种模式向下滑动时，先滑动到最小值，然后RecyclerView 开始滑动，到达边界时，ToolBar在向下滑动。

第四种：exitUntilCollapsed

app:layout_scrollFlags="scroll|exitUntilCollapsed"

 /**
         * When exiting (scrolling off screen) the view will be scrolled until it is
         * 'collapsed'. The collapsed height is defined by the view's minimum height.
         *
         * @see ViewCompat#getMinimumHeight(View)
         * @see View#setMinimumHeight(int)
         */

如图：

也就是说无论滚上还是滚下，都会保留最小高度。

第五种：snap

   app:layout_scrollFlags="scroll|snap"

 /**
         * Upon a scroll ending, if the view is only partially visible then it will be snapped
         * and scrolled to it's closest edge. For example, if the view only has it's bottom 25%
         * displayed, it will be scrolled off screen completely. Conversely, if it's bottom 75%
         * is visible then it will be scrolled fully into view.
         */

即使向上滑到最小高度，松开手指，还是会全部缩上去，这就是snap 特殊的地方，多一个吸附效果。

这五种模式，哪种适合你，就用哪一个。