一棘劣、效果圖

二赋兵、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，但不影響閱讀桦他，下面詳細(xì)說明布局中參數(shù)的含義蔫巩。

三、布局參數(shù)的含義：

CoordinatorLayout的屬性：

android:fitsSystemWindows="true"

這是一個(gè)boolean值的屬性快压，讓view可以根據(jù)系統(tǒng)窗口來調(diào)整自己的布局圆仔，如果值為true,就會(huì)調(diào)整view的paingding屬性來給system windows留出空間。最簡單的理解蔫劣，就是讓手機(jī)狀態(tài)欄不被view給覆蓋（重疊）坪郭。

Toolbar的屬性：

app:layout_scrollFlags="scroll|enterAlways"

設(shè)置layout_scrollFlags有如下幾種選項(xiàng)：

scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag，沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部拦宣。

enterAlways: 這個(gè)flag讓任意向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢娊卮郑瑔⒂每焖佟胺祷啬Ｊ健薄?/p>

enterAlwaysCollapsed：當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的視圖只能以最小高度進(jìn)入鸵隧，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。

exitUntilCollapsed: 當(dāng)視圖會(huì)在滾動(dòng)時(shí)意推，它一直滾動(dòng)到設(shè)置的minHeight時(shí)完全隱藏豆瘫。

需要注意的是：后面兩種模式基本只有在CollapsingToolbarLayout才有用，而前面兩種模式基本是需要一起使用的菊值，也就是說外驱，這些flag的使用場景育灸，基本已經(jīng)固定了。

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

指定Toolbar的樣式昵宇，包括ActionbarToggle和popupMenu的指示圖標(biāo)顏色

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

指定popupMenu溢出后的樣式

TabLayout的屬性：

app:tabGravity="fill"

表示TabLayout中的Tabs要占滿屏幕的width磅崭，要配合app:tabMode使用。下面列出配合使用的效果對比圖瓦哎，相信大家一眼就能看出區(qū)別：

image

app:tabIndicatorColor="@color/colorAccent"

Tab指示器下標(biāo)的顏色砸喻。

app:tabSelectedTextColor="@color/colorAccent"

Tab被選中字體的顏色。

app:tabTextColor="#FFF"

Tab未被選中字體的顏色蒋譬。

ViewPager的屬性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

如果你使用CoordinatorLayout來實(shí)現(xiàn)Toolbar滾動(dòng)漸變消失動(dòng)畫效果割岛，那就必須在它下面的那個(gè)控件中加入這個(gè)屬性，并且下面的這個(gè)控件必須是可滾動(dòng)的犯助。當(dāng)設(shè)置了layout_behavior的控件滑動(dòng)時(shí)癣漆，就會(huì)觸發(fā)設(shè)置了layout_scrollFlags的控件發(fā)生狀態(tài)的改變。

四剂买、整體代碼邏輯：

為了節(jié)省文章篇幅惠爽，直接給出GitHub地址，查看源碼即可瞬哼。
https://github.com/FynnJason/AppBarDemo/tree/master