目錄

如何實(shí)現(xiàn)铛碑？

集成DEMO

簡短的分析

一個(gè)額外的小栗子

我想讓狀態(tài)欄變色怎么辦藻丢？

為什么這么做犁跪？

總結(jié)

效果預(yù)覽：

透明狀態(tài)欄效果

如何實(shí)現(xiàn)？

第一步: 在platforms/android/src/../../MainActivity.java路徑下MainActivity.java()中的super.onCreate()函數(shù)后添加如下代碼:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {? getWindow().getDecorView().setSystemUiVisibility(? ? ? View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |? ? ? View.SYSTEM_UI_FLAG_LAYOUT_STABLE);}

不要忘了在MainActivity.java 中導(dǎo)入依賴包:

importandroid.os.Build;importandroid.view.View;

第二步:在項(xiàng)目根目錄的config.xml文件中添加下面配置法希，這里需要注意

顏色的設(shè)置至關(guān)重要枷餐，此處是八位hex color，前兩位是透明度苫亦，后六位是RGB顏色值．可以根據(jù)自己的需要配置．

第三步: 在app.scss中添加樣式

.platform-android {? ? ion-header {? ? ? padding-top:$cordova-md-statusbar-padding;? ? ? background-color: color($colors, primary);? ? }}

OK! 你現(xiàn)在有一個(gè)透明的狀態(tài)欄了毛肋。詳細(xì)內(nèi)容或具體的實(shí)現(xiàn)細(xì)節(jié)請(qǐng)查看項(xiàng)目倉庫，項(xiàng)目將會(huì)持續(xù)更新屋剑，同時(shí)你能獲取到更多有用的bug修復(fù)润匙。我們建議你這樣做。

集成DEMO

項(xiàng)目地址:

[ionic2-super-bar]https://github.com/jeneser/ionic-super-bar

（2017/4/1更新）

還是有點(diǎn)麻煩饼丘，我按照你的方法怎么都實(shí)現(xiàn)不了趁桃，能不能來點(diǎn)刺激的.....嗯辽话，你的要求我盡量滿足肄鸽。

文章發(fā)出來一段時(shí)間后卫病，得到了很多小伙伴的支持，也積累了一些問題典徘。于是就抽時(shí)間寫了個(gè)DEMO蟀苛，解決了小伙伴本疑問比較多的地方，吶逮诲，你想要的都在這里了帜平。你可以狠狠的點(diǎn)擊下面的鏈接去往倉庫地址，一探究竟梅鹦●伤Γ可以直接clone下來，根據(jù)README里Transparent statusBar for android進(jìn)行簡單的配置齐唆，直接運(yùn)行嗤栓，便能看到效果了，之后你便可以自由發(fā)揮了......

(2017/4/17更新)

關(guān)于兼容性的說明:

文章發(fā)布之后箍邮，很多同學(xué)說按照你的說法茉帅，不能實(shí)現(xiàn)啊，很多同學(xué)的問題都在于沒有關(guān)注android版本號(hào)锭弊。首先透明狀態(tài)欄(國內(nèi)大多稱沉浸式狀態(tài)欄)是在android5之后添加的新特性堪澎，android4經(jīng)過hack只能實(shí)現(xiàn)半透明的狀態(tài),不是特別美觀，實(shí)現(xiàn)起來有些復(fù)雜味滞。所以這個(gè)文章以及下面的demo專注于android5+樱蛤，在android5+下表現(xiàn)正常.在android4中狀態(tài)欄默認(rèn)黑色，不會(huì)因此影響你的頁面布局剑鞍，和整體的效果刹悴。

兼容性列表：

兼容性說明

(2017/7/7更新)

關(guān)于同一個(gè)項(xiàng)目中使用本項(xiàng)目的方法和原生狀態(tài)欄插件沖突的問題？

你只需要調(diào)整一下以上方法的第二步：在src/app/app.component.ts中修改statusbarbackgroundcolor攒暇。這樣土匀，同一個(gè)項(xiàng)目中使用本項(xiàng)目的方法和原生狀態(tài)欄插件。android和IOS之間將不會(huì)有任何沖突形用。我們建議你這樣做就轧。這些代碼是無害的！

// #AARRGGBB where AA is an alpha valueif(this.platform.is('android')) {this.statusBar.backgroundColorByHexString("#33000000");}

你可以查看這個(gè)issue來了解更多：Can we use your option for Android and native status bar plugin for iOS devices on the same project?

簡短的分析

第一步田度，將視口設(shè)置全屏將狀態(tài)欄固定在視圖之上妒御，第二步，配置狀態(tài)欄顏色镇饺，這一步有一個(gè)概念需要清楚乎莉，hex color是能定義透明度的，我們平常所見的類似#ffffff是六位的RGB顏色，這里在前面再加兩位便是能定義透明度的ARGB惋啃，也就是RGB色彩模式附加上Alpha（透明度）通道．所以可以根據(jù)自己的需要進(jìn)行不同透明度的設(shè)置．第三步哼鬓，由于我們將視口擴(kuò)大至了整個(gè)屏幕，自然我們的頁面會(huì)被覆蓋在狀態(tài)欄下面边灭，我的做法是給ion-header加一個(gè)內(nèi)邊距异希，并且指定一個(gè)背景顏色，當(dāng)作默認(rèn)的狀態(tài)欄底色绒瘦。當(dāng)然這里你可以自由發(fā)揮称簿，你只要記著現(xiàn)在你寫的頁面已經(jīng)在透明的狀態(tài)欄下面了，你要做的就是讓頁面下移狀態(tài)欄的高度惰帽，騰出位置避免覆蓋．

此時(shí)憨降，你可能已經(jīng)意識(shí)到，這個(gè)方案是比較靈活的该酗，你可以自由的控制你的頁面和狀態(tài)欄的位置．很多同學(xué)想要這樣一種效果：圖片深入到透明的狀態(tài)欄下面．想一想是不是很容易實(shí)現(xiàn)呢券册？你只需要簡單修改或添加第三步中的css樣式即可完成你的設(shè)計(jì)，是不是很酷．．．

補(bǔ)充:很多小伙伴記不住hex color各透明度的值垂涯，或者不是太了解hex color烁焙，請(qǐng)各位小伙伴自行g(shù)oogle吧。我這里給出一個(gè)hex color各透明度的值.耕赘。

參考鏈接：Hex Opacity Values

一個(gè)額外的小栗子

還是先貼效果圖

透明狀態(tài)欄效果

左側(cè)有一個(gè)隱藏的滑動(dòng)菜單骄蝇，在Material Design中，上面的那張圖片一般是延伸到透明的狀態(tài)欄下面的操骡，如果狀態(tài)欄不透明九火，會(huì)很難看，對(duì)設(shè)計(jì)細(xì)節(jié)比較在意的同學(xué)肯定不能忍......

其實(shí)實(shí)現(xiàn)起來也很簡單册招，還是上面的步驟，只是第三步有一些變化是掰，在ion-header外面又套了一層.ion-page.如果你還有點(diǎn)迷糊虑鼎，可以查看項(xiàng)目源碼，一探究竟炫彩。

.platform-android {? .ion-page {? ? ion-header {? ? ? padding-top:$cordova-md-statusbar-padding;? ? ? background-color: color($colors, primary);? ? }? }}

我想讓狀態(tài)欄變色怎么辦杉允？

在上面第三步叔磷，我設(shè)置header的padding并指定了background-color,很容易理解這里的背景顏色深入到狀態(tài)欄下面独旷，提供一種近似于沉浸式的效果封恰，這樣做簡單，對(duì)不了解android的童鞋理解起來很輕松。

第一種方法是覆蓋上文第三步中的cssbackground-color: color($colors, primary);,正確使用選擇器可以實(shí)現(xiàn)不同頁面擁有不同顏色的狀態(tài)欄。

第二種通過編程的方式：可以使用cordova-plugin-statusbar插件懂盐，

在不同視圖加載時(shí)調(diào)用StatusBar.backgroundColorByHexString("#55C0C0C0");（同樣這里的顏色值也是能添加透明度的）來實(shí)現(xiàn)不同頁面不同顏色的狀態(tài)欄．

為什么這么做？

下面是我解決這個(gè)問題所走的彎路可掉的坑尿背，如果你有興趣也可以接著讀下去。

其實(shí)呢這一段套路夠深的話坞淮，應(yīng)該是放在前面調(diào)胃口用的....haha...嗯回窘，閑話不扯酒觅，就說說我為什么要這么做呢？其實(shí)我和很多小伙伴一樣不是專門做android開發(fā)的颜凯，我是一名小前端，灌水黨募壕，能力還是比較有限的舱馅。所以很多地方也是有問題的，也請(qǐng)小伙伴們多多指教溶锭。定當(dāng)感激不盡趴捅！

下面是我解決問題的思路和做法 供參考

透明狀態(tài)欄網(wǎng)上能google出一大堆的解決方案膀藐，但大多是針對(duì)原生代碼的解決方案国觉，都不錯(cuò)，但有關(guān)于ionic2的解決方案少之又少筷凤，并且說法不一挪丢，方法各異融柬，不知道誰對(duì)誰錯(cuò)，滿滿的都是淚。并且在googleionic2 statusbar transparent時(shí)結(jié)果的第一條答案還是有偏差的类垦，標(biāo)題是How can I make a transparent toolbar? - ionic 2 - Ionic注意是toolbar而不是statusbar官地，很多同學(xué)把這兩個(gè)東西混在了一起亏较，導(dǎo)致很多童鞋云里霧里的傻傻分不清.....

在那個(gè)帖子中，大家討論的是toolbar的透明舍哄，其實(shí)在Ionic 2 Beta 10中已經(jīng)解決這個(gè)問題了．可以參考里面的做法．我這里就不說了．

好吧，接著google劫窒，接著從各種信息中篩選我想要的結(jié)果欠动，未果.....大概是一天之后慌随，偶然發(fā)現(xiàn)了這個(gè)帖子首先要感謝＠peterbetos．

我按照peterbetos提供的方法剃袍，但是遇到很多編譯錯(cuò)誤黄刚，尤其是下面這句，ContextCompat依賴android.support.v4.content.ContextCompat民效，各種嘗試各種錯(cuò)誤憔维，是有點(diǎn)麻煩嘛涛救！又試了試，搜了搜业扒，還是有問題检吆。

getWindow().setStatusBarColor(ContextCompat.getColor(this,R.color.status_bar_transparet));

既然上面一小段代碼問題這么多，干脆不要程储，于是就有了上面那三步．我能通過第二步的hex color實(shí)現(xiàn)透明咧栗，就不用這么麻煩了，理解起來也更簡單......于是簡單起見虱肄，決定根據(jù)現(xiàn)有代碼致板，按照自己的思路實(shí)現(xiàn)一下，說干就干......

最后

ionic正在快速迭代咏窿，前兩天剛發(fā)布2.2.0．很多東西在開發(fā)和完善中斟或，就透明狀態(tài)欄來講，ionic官方給出的方案是使用cordova-plugin-statusbar插件集嵌，但是目前這個(gè)插件透明狀態(tài)欄在android下不支持萝挤，這就尷尬了不是，好消息是已經(jīng)有人PR,壞消息是,一年了還沒有合并.....從兼容性和技術(shù)上講是有一定的難度的根欧，需要考慮的東西也很多怜珍。

目前ionic團(tuán)隊(duì)正在做重要的事，而cordova-plugin-statusbar插件也不知何時(shí)解決這個(gè)問題凤粗，也許是明天酥泛，也許是很久，誰知道呢嫌拣？所以你若是覺得這個(gè)方案還可以接受柔袁，用以

作者：jeneser

鏈接：http://www.reibang.com/p/4c283e37294f

來源：簡書

簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處异逐。