ionic2實現透明狀態欄和透明工具欄

ionic2實現透明狀態欄和透明工具欄

目錄

1. 如何實現？

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

3. 簡短的分析

4. 一個額外的小栗子

5. 我想讓狀態欄變色怎麼辦？

6. 爲何這麼作？

7. 總結

如下是個人方案，不繞彎子，直接上實現過程．
首先貼效果圖，來張gif（2017/4/1更新）

如何實現？

第一步: 在MainActivity.java 中的super.onCreate() 函數後添加以下代碼:

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根據本身的須要配置．
<preference name="StatusBarBackgroundColor" value="#551b1d23" />

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

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

ok!你如今有一個透明的狀態欄了．

集成DEMO

（2017/4/1更新）
仍是有點麻煩，我按照你的方法怎麼都實現不了，能不能來點刺激的...
ok！你的要求我儘可能知足。
抽時間寫了個DEMO，你想要的都在這裏了。你能夠狠狠的點擊下面的連接去往倉庫地址，一探究竟。你能夠直接clone下來，直接運行。

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

簡短的分析

第一步，將視口設置全屏將狀態欄固定在視圖之上，第二步，配置狀態欄顏色，這一步有一個概念須要清楚，hex color是能定義透明度的，咱們日常所見的相似#ffffff是六位的RGB顏色，這裏在前面再加兩位即是能定義透明度的ARGB，也就是RGB色彩模式附加上Alpha（透明度）通道．因此能夠根據本身的須要進行設置．第三步，因爲咱們將視口擴大至了整個屏幕，天然咱們的頁面會被覆蓋在狀態欄下面，個人作法是給ion-header加一個內邊距，而且指定一個背景顏色，固然這裏你能夠自由發揮，你只要記着如今你寫的頁面已經在透明的狀態欄下面了，你要作的就是讓頁面下移狀態欄的高度，騰出位置避免覆蓋．
此時，你可能已經意識到，這個方案是比較靈活的，你能夠自由的控制你的頁面和狀態欄的位置．不少同窗想要這樣一種效果：圖片深刻到透明的狀態欄下面．想想是否是很容易實現呢？你只須要需改或添加第三步中的css樣式便可完成你的設計，是否是很酷．．．

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

一個額外的小栗子

仍是先貼效果圖

左側有一個隱藏的滑動菜單，在Material Design中，上面的那張圖片通常是延伸到透明的狀態欄下面的，若是狀態欄不透明，會很難看，對設計有潔癖的，確定不能容忍．．．
其實實現起來也很簡單，仍是上面的步驟，只是第三步有一些變化，在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,很容易理解這裏的背景顏色深刻到狀態欄下面，提供一種近似於沉浸式的效果，這樣作簡單，對不瞭解android的童鞋理解起來很輕鬆，固然再添加一些原生代碼，能自動實現沉浸效果，文章後面我會說爲何沒有這麼作．

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

爲何這麼作？

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

我爲何要這麼作呢？
實際上是我不會android的開發，我是前端，能力有限．．．大神勿噴．．．

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

透明狀態欄網上能google出一大堆的解決方案，但大可能是針對原生代碼的解決方案(我只能呵呵)，有關於ionic２的解決方案少之又少，而且在google ionic2 statusbar transparent時結果的第一條答案仍是有誤差的，它的標題是How can I make a transparent toolbar? - ionic 2 - Ionic注意是toolbar而不是statusbar，不少同窗把這兩個東西混在了一塊兒，致使不少童鞋雲裏霧裏的傻傻分不清．．．
在那個帖子中，你們討論的是toolbar的透明，其實在Ionic 2 Beta 10中已經解決這個問題了．能夠參考裏面的作法．我這裏就不說了．
好吧，接着google，從各類信息中篩選我想要的結果，未果．．．後來，發現了這個帖子感謝＠peterbetos．
我按照peterbetos提供的方法，可是遇到不少編譯錯誤，尤爲是下面這句，ContextCompat依賴android.support.v4.content.ContextCompat，各類嘗試各類錯誤，哪位大神如果解決了，能夠分享出來．

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

這就是不能實現沉浸效果的緣由，能力有限，還請路過的大神賜教．．

既然上面一小段代碼問題這麼多，乾脆不要，因而就有了上面那三步．我能經過第二步的hex color實現透明，就不用這麼麻煩了，理解起來也更簡單．．．

最後

ionic2正在快速迭代，前兩天剛發佈2.2.0．不少東西在開發和完善中，就透明狀態欄來說，ionic官方給出的方案是使用cordova-plugin-statusbar插件，可是目前這個插件透明狀態欄在android下不支持，這就尷尬了，好消息是已經有人PR,壞消息是,一年了尚未合併．．．
目前ionic2正在作他認爲重要的事，像這種問題不知道要排到何時，因此你如果以爲這個方案可行，用以用也是極好的！

（完結）

原創文章轉載請註明．
做者：jeneser
原文地址:·ionic2實現透明狀態欄