Android UI Material Design交互设计（四）--AppBarLayout 与Toolbar结合

Material Design 交互设计在Android上的应用，Design Support Library 是在2015年
Google官方发布的一个全新兼容函数库，它使得开发这可以在Android2.1（API
7）及以上的设备中实现交互设计的效果。这个函数库提供了一些了的控件，主要包括：Snackbar
、NavigationView、FloatingActionButton、TextInputLayout、TabLayout、CollapsingToolbarLayout、AppBarLayout、CoordinatorLayout

Android UI Material Design交互设计(一)–BottomNavigationView底部菜单
Android UI Material Design交互设计(二)–Toolbar的基本使用与样式修改
Android UI Material Design交互设计（三）–SnackBar 详解
Android UI Material Design交互设计（四）–AppBarLayout 与Toolbar结合
Android UI Material Design交互设计(五)–CollapsingToolbarLayout 折叠布局
Android UI Material Design交互设计(六)–CoordinatorLayout之精髓Behavior 自定义Behavior

在使用Design Support Library之前，首先需要添加如下依赖

implementation 'com.android.support:design:28.0.0'

AppBarLayout 与Toolbar结合重点在app:layout_scrollFlags属性 scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed 这物种属性

scroll

子 view（这里是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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        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="?actionBarSize"
            app:title="@string/app_name"
            app:layout_scrollFlags="scroll"/>
    </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            tools:listitem="@layout/item_list"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

⚠️这里需要在listview 或者 recyclerview上加上如下behavior

app:layout_behavior="@string/appbar_scrolling_view_behavior"

效果如下：

scroll|enterAlways

单独使用scroll的时候 上滑toolbar消失，向上滑动的多的时候，再下滑toolbar不会立即出现，而是展示完所有上面的内容后再出现。如果加上enterAlways就会实现 上滑消失，下滑立即出现的功能。

代码如下：

<android.support.design.widget.AppBarLayout
        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="?actionBarSize"
            app:title="@string/app_name"
            app:layout_scrollFlags="scroll|enterAlways"/>
    </android.support.design.widget.AppBarLayout>

效果如下：

scroll|enterAlways|enterAlwaysCollapsed

enterAlwaysCollapsed 是 enterAlways附加值，这里涉及到子 View的高度和最小高度，向下滚动时，子 View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。
代码如下：

<android.support.design.widget.AppBarLayout
        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="200dp"
            android:minHeight="?actionBarSize"
            app:title="@string/app_name"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
    </android.support.design.widget.AppBarLayout>

效果如下：

scroll|exitUntilCollapsed

exitUntilCollapsed 效果正好与enterAlwaysCollapsed的效果相反我们直接看效果图吧
代码如下：

<android.support.design.widget.AppBarLayout
        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="200dp"
            android:minHeight="?actionBarSize"
            app:title="@string/app_name"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
    </android.support.design.widget.AppBarLayout>

效果如下：

scroll|snap

snap 吸附效果。也就是说，子 View不会滑动一半停止住画面的情况，滚动子 View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，
代码如下：

<android.support.design.widget.AppBarLayout
        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="200dp"
            android:minHeight="?actionBarSize"
            app:title="@string/app_name"
            app:layout_scrollFlags="scroll|snap"/>
    </android.support.design.widget.AppBarLayout>

效果如下：