今天在學習Material Design的過程中，遇到了一個比較坑的問題，在這里記錄一下，以后如果有人遇到的話，可以做個參考吧。首先來看看我們的需求，今天我們需要實現下面這個效果：

需求.gif

圖片來自blog：http://blog.csdn.net/eclipsexys/article/details/46349721

大家可以看到這個需求其實是非常簡單的，就是有個Toolbar和一個TabLayout，然后在TabLayout中有個列表，根據列表的上下滑動，Toolbar也相應的隱藏和顯示。我們都知道這個是Material Design中的動畫效果，那么我們就直接開始動手編碼來實現這個效果。首先貼出布局部分的代碼吧：

<?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_base"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


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

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

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

上面就是我們主布局的代碼，然后我們看看ViewPager對應的布局的代碼：

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/section_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/section_label"/>

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

這個里面的代碼也很簡單，就是一個ListView，主要的作用就是上下滑動，然后觸發Toolbar的動畫。
剩下的就是一些簡單的Fragment和一些控件初始化之類的，就不貼代碼了，然后我們直接運行。運行之后截圖如下：

運行結果.gif

運行結果如上圖，請大家忽視這個畫質的問題，視頻轉GIF真是心累。

如果大家有什么好的視頻轉GIF的工具，可以給我推薦一下。

有細心的朋友可能已經發現問題了，當我們將列表往上滑動時，Toolbar確實隱藏了起來，但是在最后，屏幕的左上角還留有一些沒有隱藏起來。這是第一個問題，還有一個比較細節的問題是我們通過對比我們的需求圖片和運行結果圖片，可以發現：
需求圖片中向上滑動時，狀態欄是保持不動的，Toolbar和TabLayout向上滑動，給人一種狀態欄是在Toolbar和Tablayout上方的感覺。
運行結果向上滑動時，狀態欄也會向上滑，給人的感覺就像是被Toolbar和TabLayout擠上去的樣子。

基于以上的兩個不同之處，我們大致可以推斷出Toolbar沒有完全隱藏可能是因為狀態欄的原因，那么我們就開始著手解決這個問題。

• 從布局開始
  首先我們進行了將主布局的android:fitsSystemWindows="true"放到不同的地方，看看是否是這行代碼出了問題，我分別將這行代碼放到了CoordinatorLayout、AppBarLayout、Toolbar、TabLayout等多個地方，最后發現并沒有解決問題。但是在這個過程中，卻有一個小的變化是比較奇怪的，那就是當我android:fitsSystemWindows="true"這行代碼移出CoordinatorLayout中時，我們運行程序之后會出現如下結果：
  
  將上述代碼移動到AppBarLayout中的結果

從上圖中我們可以看到，上面的狀態欄變白了。這個發現就更加印證了我們之前的推測：這件事情肯定和狀態欄有關系。既然已經知道這個，那么我們就可以從第二個方面來解決。

• 從代碼入手
  我們嘗試著在進行了第一步嘗試的基礎上在代碼中將狀態欄的顏色修改一下getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));修改完之后，發現是可以得到和需求一樣的結果。問題得到了完美的解決......嗎？我們都知道上面這修改狀態欄顏色的代碼是在api>=21才可以用的，那如果api<21怎么辦？可能有人會說用開源庫來修改啊。這個確實是一種非常好的解決辦法，但是我并不想“撞大運”式的將這個問題解決。所以我們還得繼續的深入查找問題，那么這個時候就想到了，和狀態欄有關的屬性，除了布局文件中和代碼中，還有一個地方，就是style.xml中。

• 從style.xml入手
  先貼出代碼：

<resources>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

上面這個是style.xml(v21)的代碼，從這段代碼中我們就可以找到這次這個bug的罪魁禍首了。就是這一行<item name="android:statusBarColor">@android:color/transparent</item>
就是這行代碼將我們的狀態欄給弄成了透明了，結果就導致我們看到的狀態欄和布局文件是在同一個z軸上，也就是會被擠上去，從而導致我們的Toolbar不能完全的隱藏起來。

最后，為什么這個小bug費了這么大勁才找出來，我上面這一整套代碼，基本上都是在android studio 中新建一個TabActivity 自動生成的。也就說原本自動生成的代碼就有這個Bug，誰能想到android studio 這個濃眉大眼的家伙也"叛變革命"了呢。