摘要：抽時間寫了個，你想要的都在這里了。你可以狠狠的點擊下面的鏈接去往倉庫地址，一探究竟。你可以直接下來，直接運行。

目錄

如何實現(xiàn)？

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

簡短的分析

一個額外的小栗子

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

為什么這么做？

總結(jié)

以下是我的方案，不繞彎子，直接上實現(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 中導入依賴包:

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

第二步:在項目根目錄的config.xml文件中添加下面配置，這里需要注意
顏色的設置至關重要，此處是八位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)在有一個透明的狀態(tài)欄了．

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

項目地址:ionic2-super-bar https://github.com/jeneser/io...

第一步，將視口設置全屏將狀態(tài)欄固定在視圖之上，第二步，配置狀態(tài)欄顏色，這一步有一個概念需要清楚，hex color是能定義透明度的，我們平常所見的類似#ffffff是六位的RGB顏色，這里在前面再加兩位便是能定義透明度的ARGB，也就是RGB色彩模式附加上Alpha（透明度）通道．所以可以根據(jù)自己的需要進行設置．第三步，由于我們將視口擴大至了整個屏幕，自然我們的頁面會被覆蓋在狀態(tài)欄下面，我的做法是給ion-header加一個內(nèi)邊距，并且指定一個背景顏色，當然這里你可以自由發(fā)揮，你只要記著現(xiàn)在你寫的頁面已經(jīng)在透明的狀態(tài)欄下面了，你要做的就是讓頁面下移狀態(tài)欄的高度，騰出位置避免覆蓋．
此時，你可能已經(jīng)意識到，這個方案是比較靈活的，你可以自由的控制你的頁面和狀態(tài)欄的位置．很多同學想要這樣一種效果：圖片深入到透明的狀態(tài)欄下面．想一想是不是很容易實現(xiàn)呢？你只需要需改或添加第三步中的css樣式即可完成你的設計，是不是很酷．．．

補充:很多小伙伴記不住hex color各透明度的值，請參考Hex Opacity Values或者自行google我就不復制粘貼了．

還是先貼效果圖

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

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

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

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

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

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

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

透明狀態(tài)欄網(wǎng)上能google出一大堆的解決方案，但大多是針對原生代碼的解決方案(我只能呵呵)，有關于ionic２的解決方案少之又少，并且在google ionic2 statusbar transparent時結(jié)果的第一條答案還是有偏差的，它的標題是How can I make a transparent toolbar? - ionic 2 - Ionic注意是toolbar而不是statusbar，很多同學把這兩個東西混在了一起，導致很多童鞋云里霧里的傻傻分不清．．．
在那個帖子中，大家討論的是toolbar的透明，其實在Ionic 2 Beta 10中已經(jīng)解決這個問題了．可以參考里面的做法．我這里就不說了．
好吧，接著google，從各種信息中篩選我想要的結(jié)果，未果．．．后來，發(fā)現(xiàn)了這個帖子感謝＠peterbetos．
我按照peterbetos提供的方法，但是遇到很多編譯錯誤，尤其是下面這句，ContextCompat依賴android.support.v4.content.ContextCompat，各種嘗試各種錯誤，哪位大神若是解決了，可以分享出來．

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

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

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

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

（完結(jié)）

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