一、效果图

二、xml代码

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="@string/app_name"
                app:titleTextColor="#FFF"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/mTableLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="#FFF"/>

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

        <android.support.v4.view.ViewPager
            android:id="@+id/mViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/mFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            app:srcCompat="@drawable/fab_up"/>

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

这里使用了dataBinding的layout，但不影响阅读，下面详细说明布局中参数的含义。

三、布局参数的含义：

CoordinatorLayout的属性：

android:fitsSystemWindows="true"

这是一个boolean值的属性，让view可以根据系统窗口来调整自己的布局，如果值为true,就会调整view的paingding属性来给system windows留出空间。最简单的理解，就是让手机状态栏不被view给覆盖（重叠）。

Toolbar的属性：

app:layout_scrollFlags="scroll|enterAlways"

设置layout_scrollFlags有如下几种选项：

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。

enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。

需要注意的是：后面两种模式基本只有在CollapsingToolbarLayout才有用，而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。

app:theme="@style/ThemeOverlay.AppCompat.ActionBar"

指定Toolbar的样式，包括ActionbarToggle和popupMenu的指示图标颜色

app:popupTheme="@style/AppTheme.PopupOverlay"

指定popupMenu溢出后的样式

TabLayout的属性：

app:tabGravity="fill"

表示TabLayout中的Tabs要占满屏幕的width，要配合app:tabMode使用。下面列出配合使用的效果对比图，相信大家一眼就能看出区别：

image

app:tabIndicatorColor="@color/colorAccent"

Tab指示器下标的颜色。

app:tabSelectedTextColor="@color/colorAccent"

Tab被选中字体的颜色。

app:tabTextColor="#FFF"

Tab未被选中字体的颜色。

ViewPager的属性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果，那就必须在它下面的那个控件中加入这个属性，并且下面的这个控件必须是可滚动的。当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。

四、整体代码逻辑：

为了节省文章篇幅，直接给出GitHub地址，查看源码即可。
https://github.com/FynnJason/AppBarDemo/tree/master