Material Design 之TabLayout與Toolbar

今天在學習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 這個濃眉大眼的家伙也"叛變革命"了呢。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,197評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,415評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,104評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,884評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,647評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,130評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,208評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,366評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,887評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,737評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,939評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,478評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,174評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,586評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,827評論 1 283
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,608評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,914評論 2 372

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,630評論 25 708
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,842評論 22 665
  • 霍金說,在我二十一歲的時候,我對幸福的期待就已下降為零,從那時開始,任何一點小小的快樂都能讓我覺得幸福異常。 霍金...
    燕大胡子閱讀 445評論 0 0
  • 作者:李旺成 時間:2016年5月13日 這個 Hack 將介紹關于表單校驗中的一個小技巧。 表單檢驗 大部分開發...
    diygreen閱讀 771評論 2 39
  • 終于走出第一步,開始敞開自己的自卑心,雖然朋友說的都很現實,但是我還是敞開了心說,而且是毫無顧忌的說了,以前我會擔...
    豬豬pig閱讀 168評論 0 0