Cordova 實現沉浸式(透明)狀態列效果
阿新 • • 發佈:2018-11-06
沉浸式狀態列(Immersive Mode)和透明狀態列(Translucent Bar)。
這兩個概念很多地方的解釋都不是很清晰,所以導致很多人都各有各的認識。所以這裡我也有一個自己的認識,筆者認為沉浸式狀態列也可以說是全屏模式,即隱藏狀態列與導航欄。 而透明狀態列是不隱藏狀態列但是它所呈現的是透明的。因為預設情況下狀態列都是黑底白字。而我們現在要實現的就是透明狀態列下的全屏模式。話不多說,看效果:
對比這兩張圖的狀態列效果可以看出。第一張圖效果對介面來說不是很美觀,但是第二個效果就非常美觀了。下面我們就來實現。
使用cordova實現就需要cordova-plugin-statusbar這個外掛,我們需要對此外掛進行一些修改即可實現我們想要的效果。
在專案路徑->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.
//註釋預設的設定背景色的方法 //setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));