摘要：抽時(shí)間寫了個(gè)，你想要的都在這里了。你可以狠狠的點(diǎn)擊下面的鏈接去往倉庫地址，一探究竟。你可以直接下來，直接運(yùn)行。

目錄

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

集成DEMO（2017/4/1更新）

簡(jiǎn)短的分析

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

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

為什么這么做？

總結(jié)

以下是我的方案，不繞彎子，直接上實(shí)現(xiàn)過程．
首先貼效果圖，來張gif（2017/4/1更新）

第一步: 在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)入依賴包:

import android.os.Build;
import android.view.View;

第二步:在項(xiàng)目根目錄的config.xml文件中添加下面配置，這里需要注意
顏色的設(shè)置至關(guān)重要，此處是八位hex color，前兩位是透明度，后六位是rgb顏色值．so根據(jù)自己的需要配置．

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

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

ok!你現(xiàn)在有一個(gè)透明的狀態(tài)欄了．

（2017/4/1更新）
還是有點(diǎn)麻煩，我按照你的方法怎么都實(shí)現(xiàn)不了，能不能來點(diǎn)刺激的...
ok！你的要求我盡量滿足。
抽時(shí)間寫了個(gè)DEMO，你想要的都在這里了。你可以狠狠的點(diǎn)擊下面的鏈接去往倉庫地址，一探究竟。你可以直接clone下來，直接運(yùn)行。

項(xiàng)目地址:ionic2-super-bar https://github.com/jeneser/io...

第一步，將視口設(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)然這里你可以自由發(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各透明度的值，請(qǐng)參考Hex Opacity Values或者自行g(shù)oogle我就不復(fù)制粘貼了．

還是先貼效果圖

左側(cè)有一個(gè)隱藏的滑動(dòng)菜單，在Material Design中，上面的那張圖片一般是延伸到透明的狀態(tài)欄下面的，如果狀態(tài)欄不透明，會(huì)很難看，對(duì)設(shè)計(jì)有潔癖的，肯定不能容忍．．．
其實(shí)實(shí)現(xiàn)起來也很簡(jiǎn)單，還是上面的步驟，只是第三步有一些變化，在ion-header外面又套了一層.ion-page．

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

在上面第三步，我設(shè)置header的padding并指定了background-color,很容易理解這里的背景顏色深入到狀態(tài)欄下面，提供一種近似于沉浸式的效果，這樣做簡(jiǎn)單，對(duì)不了解android的童鞋理解起來很輕松，當(dāng)然再添加一些原生代碼，能自動(dòng)實(shí)現(xiàn)沉浸效果，文章后面我會(huì)說為什么沒有這么做．

回到正題，想讓狀態(tài)欄變色可以使用cordova-plugin-statusbar插件，
在不同視圖加載時(shí)調(diào)用StatusBar.backgroundColorByHexString("#55C0C0C0");（同樣這里的顏色值也是能添加透明度的）來實(shí)現(xiàn)不同頁面不同顏色的狀態(tài)欄．

其實(shí)這一段套路夠深的話，應(yīng)該是放在前面調(diào)胃口用的．．．

我為什么要這么做呢？
其實(shí)是我不會(huì)android的開發(fā)，我是前端，能力有限．．．大神勿噴．．．

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

透明狀態(tài)欄網(wǎng)上能google出一大堆的解決方案，但大多是針對(duì)原生代碼的解決方案(我只能呵呵)，有關(guān)于ionic２的解決方案少之又少，并且在google ionic2 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ò)誤，哪位大神若是解決了，可以分享出來．

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

這就是不能實(shí)現(xiàn)沉浸效果的原因，能力有限，還請(qǐng)路過的大神賜教．．

既然上面一小段代碼問題這么多，干脆不要，于是就有了上面那三步．我能通過第二步的hex color實(shí)現(xiàn)透明，就不用這么麻煩了，理解起來也更簡(jiǎn)單．．．

ionic2正在快速迭代，前兩天剛發(fā)布2.2.0．很多東西在開發(fā)和完善中，就透明狀態(tài)欄來講，ionic官方給出的方案是使用cordova-plugin-statusbar插件，但是目前這個(gè)插件透明狀態(tài)欄在android下不支持，這就尷尬了，好消息是已經(jīng)有人PR,壞消息是,一年了還沒有合并．．．
目前ionic2正在做他認(rèn)為重要的事，像這種問題不知道要排到什么時(shí)候，所以你若是覺得這個(gè)方案可行，用以用也是極好的！

（完結(jié)）

原創(chuàng)文章轉(zhuǎn)載請(qǐng)注明．
作者：jeneser
原文地址:·ionic2實(shí)現(xiàn)透明狀態(tài)欄