Cordova 實現(xiàn)沉浸式(透明)狀態(tài)欄效果

沉浸式狀態(tài)欄(Immersive Mode)和透明狀態(tài)欄(Translucent Bar)。

這兩個概念很多地方的解釋都不是很清晰,所以導(dǎo)致很多人都各有各的認(rèn)識。所以這里我也有一個自己的認(rèn)識,筆者認(rèn)為沉浸式狀態(tài)欄也可以說是全屏模式,即隱藏狀態(tài)欄與導(dǎo)航欄。 而透明狀態(tài)欄是不隱藏狀態(tài)欄但是它所呈現(xiàn)的是透明的。因為默認(rèn)情況下狀態(tài)欄都是黑底白字。而我們現(xiàn)在要實現(xiàn)的就是透明狀態(tài)欄下的全屏模式。話不多說,看效果:

1.png
2.png

對比這兩張圖的狀態(tài)欄效果可以看出。第一張圖效果對界面來說不是很美觀,但是第二個效果就非常美觀了。下面我們就來實現(xiàn)。

使用cordova實現(xiàn)就需要cordova-plugin-statusbar這個插件,我們需要對此插件進行一些修改即可實現(xiàn)我們想要的效果。

在項目路徑->platforms->android->src->org->apache->cordova->statusbar中找到StatusBar.java文件。
然后修改run方法即可:

            public void run() {
                // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
                // by the Cordova.
                Window window = cordova.getActivity().getWindow();

//添加代碼start         
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);      window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
window.setNavigationBarColor(Color.TRANSPARENT);
//添加代碼end
                 window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

                // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
                //注釋原有設(shè)置背景色的方法
             //setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));
            }
最后編輯于
?著作權(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)容

  • 關(guān)于沉浸式狀態(tài)欄一詞的說法從何而來我們無從考證。但這確實是個錯誤的說法先引用官方的一段話。 Immersive f...
    ifjgm閱讀 9,479評論 3 46
  • 目錄 如何實現(xiàn)? 集成DEMO 簡短的分析 一個額外的小栗子 我想讓狀態(tài)欄變色怎么辦? 為什么這么做? 總結(jié) 效果...
    jeneser閱讀 15,955評論 17 23
  • 最近項目需求中需要對statusBar做透明穿透處理,剛開始沒想太多,隨著開發(fā)進行,發(fā)現(xiàn)坑位那絕對是滿滿的,主要就...
    浪夠_閱讀 701評論 0 1
  • 前言 首先請大家看幾張圖: 以上的效果,一般我們統(tǒng)稱為沉浸式狀態(tài)欄。其實,這種叫法不是很準(zhǔn)確,而且也沒有沉浸式狀態(tài)...
    宇是我閱讀 4,194評論 2 28
  • 好吧,從這里開始事情即將變得激烈有趣起來哦! 在過去的四篇文章里,你奠定了基礎(chǔ),學(xué)習(xí)了清醒夢(夢想回憶和意識)的基...
    JoshuaChou閱讀 1,995評論 0 1

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