Android狀態(tài)欄合集-管你透不透明

歡迎Follow我的Github,源碼下載請點這里

溯源

Android的狀態(tài)欄千奇百怪。原生的colorPrimary和colorPrimaryDark,Android的沉浸式狀態(tài)欄,還有所謂的仿iOS的純透明狀態(tài)欄,到底哪個最好看,眾說紛紜。

分類

  • colorPrimary&colorPrimaryDark

用AndroidStudio新建一個項目,瀏覽res文件夾,找到colors.xml,如下:

colors.xml

這里的colorPrimary默認(rèn)就是ActionBar的顏色,colorPrimaryDark就是狀態(tài)欄的顏色,而下面的colorAccent是Android的強調(diào)色,比如FAB的控件顏色,EditText選中時方框下面顯示的顏色。

colors.xml具體設(shè)置
  • Android沉浸式狀態(tài)欄

設(shè)置很簡單,兩行代碼搞定(添加到setContentViwe()后面):

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

然后界面變成了這樣:

沉浸式狀態(tài)欄

注意到狀態(tài)欄顏色變深了,下面的導(dǎo)航欄也由先前的深色變成了現(xiàn)在的灰白色,字面意思第一句就是設(shè)置的狀態(tài)欄,第二句設(shè)置的導(dǎo)航欄。如果在抽屜菜單設(shè)置此效果會是這樣:

沉浸式透明抽屜菜單

注意:這里成為沉浸式的條件是使用了官方提供的抽屜菜單,如果沒有抽屜菜單狀態(tài)欄會變成灰色的,這時需要將colorPrimaryDark的值設(shè)置成colorPrimary的值才會出現(xiàn)這種效果。

類似的有Gmail:

Gmail使用沉浸式狀態(tài)欄
  • Android完全的透明狀態(tài)欄

上次我寫了一篇文章關(guān)于透明狀態(tài)欄的,寫得不好,不夠用心,這里給大家說聲抱歉。

這里所說的透明狀態(tài)欄是像網(wǎng)易云音樂那樣的透明狀態(tài)欄,如圖:

狀態(tài)欄透明1
狀態(tài)欄透明2

這里我說說我的實現(xiàn)方式。透明狀態(tài)欄1

  • 在Activity中設(shè)置
getWindow().setStatusBarColor(Color.TRANSPARENT);

這樣把狀態(tài)欄顏色設(shè)置成了透明的(注意這是透明的,沒有顏色哦)。

  • 在XML布局文件里面設(shè)置頂布局的background的顏色與Toolbar顏色相同,并設(shè)置
    android:fitsSystemWindows="true"屬性,這樣就實現(xiàn)了透明狀態(tài)欄。

那么,問題來了……
既然這里的透明就是把狀態(tài)欄的顏色換成Toolbar一樣的顏色就行了,為什么不直接把colorPrimary和colorPrimaryDark的顏色弄成一樣的呢?這樣不是更簡單么?
** 當(dāng)然程序員都是懶的,都是想花最少的時間干最多的事,所以一切看似冗雜的代碼都是有目的的。**

解釋:設(shè)置相同的顏色只是解決了Activity沒有抽屜的效果的情況下的窘境,但是如果有像狀態(tài)欄透明2那樣的抽屜怎么辦呢?

從colors.xml下手后的慘狀

可以看到狀態(tài)欄上的顏色與抽屜菜單上面的顏色不一致,或者叫抽屜菜單的header背景并沒有延伸到狀態(tài)欄,給用戶一種不好的體驗。而使用在Activity添加代碼的方式就能很好地解決這個問題。
然后我們立馬把使用這個方法,運行:

抽屜1

What?怎么會這樣,我是這樣設(shè)置的?????
其實一開始我也是那么天真,以為設(shè)置了上面的代碼就可以,后來查閱資料才知道還有一句代碼不可缺少:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

這里涉及到Window和DecorView的知識,不詳細(xì)介紹了……看字面意思能理解,然后就設(shè)置成功了:

真正的透明抽屜菜單

這也就實現(xiàn)了網(wǎng)易云音樂的透明狀態(tài)欄。見源碼Main22Activity.
有些朋友反映設(shè)置過后狀態(tài)欄倒是跟Toolbar顏色相同,但是抽屜菜單上面是沉浸式的,這時候需要將Toolbar放到activity的直接布局里面,就是說不要用include標(biāo)簽添加Toolbar,Toolbar外面可以用一個LinearLayout包裹,像這樣:

XML布局

補充

實現(xiàn)圖片作為全屏背景
這個東西本來挺簡單的,但是自己以前在瞎搞,有些只是理解錯了,現(xiàn)在寫下來給自己留個印象,也給大家一個補充。

設(shè)置背景圖片全屏不能直接在根布局里面設(shè)置background,這樣狀態(tài)欄無法隱藏。寫了透明狀態(tài)欄,就想到能不能用相同的方法設(shè)置呢。于是乎就利用上面的透明狀態(tài)欄設(shè)置背景圖片。在代碼中

getWindow().setStatusBarColor(Color.TRANSPARENT);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

在XML根布局里面添加背景資源并設(shè)置android:fitsSystemWindows="true"點擊運行,ok大功告成!

圖片作為整體背景

注意:

  • 以上代碼只是實現(xiàn)了需求,時間關(guān)系沒有過多關(guān)注美觀~
  • 要實現(xiàn)圖片作為全屏背景注意不能讓根布局為 android.support.design.widget.CoordinatorLayout,可能是CoordinatorLayout內(nèi)部實現(xiàn)的關(guān)系,使用LinearLayout即可。

總結(jié)

Android的UI比想象中的好玩,但是也挺難的,希望和我一樣熱愛UI的朋友能堅持學(xué)習(xí),態(tài)度決定一切。文中不免有錯誤的地方,希望廣大讀者提出指正!共勉!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容