什么是沉浸式狀態(tài)欄
說得通俗一點,沉浸式狀態(tài)欄也就是透明的狀態(tài)欄(電池欄)囊拜,同時也會顯示狀態(tài)欄上的內(nèi)容某筐,比如電量,時間等冠跷。
這樣南誊,view的顯示區(qū)域就是整個屏幕,不再需要除去電池欄的區(qū)域蜜托。
在iOS上抄囚,ionic1本身就是支持透明的狀態(tài)欄的。
在Android上橄务,ionic1自身是不支持的幔托,所以需要我們自己來實現(xiàn)。
怎么實現(xiàn)
目前這個方法需要修改Android原生的代碼蜂挪,無法通過cordova插件的來實現(xiàn)重挑。
這也是這個方法的缺點,每次remove android platform再重新add后棠涮,都需要再次去修改原生代碼谬哀。
第一步,修改MainActivity.java
import android.annotation.TargetApi;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Rect;
import android.os.Build;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.FrameLayout;
import org.apache.cordova.*;
import java.lang.reflect.Field;
import java.lang.reflect.Method;
public class MainActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// enable Cordova apps to be started in the background
Bundle extras = getIntent().getExtras();
if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
moveTaskToBack(true);
}
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
dealSoftKeys();
}
/**
* 判斷底部navigator是否已經(jīng)顯示
*
* @return
* @paramwindowManager
*/
@TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
public static boolean hasSoftKeys(WindowManager windowManager) {
Display d = windowManager.getDefaultDisplay();
DisplayMetrics realDisplayMetrics = new DisplayMetrics();
d.getRealMetrics(realDisplayMetrics);
int realHeight = realDisplayMetrics.heightPixels;
int realWidth = realDisplayMetrics.widthPixels;
DisplayMetrics displayMetrics = new DisplayMetrics();
d.getMetrics(displayMetrics);
int displayHeight = displayMetrics.heightPixels;
int displayWidth = displayMetrics.widthPixels;
return (realWidth - displayWidth) > 0 || (realHeight - displayHeight) > 0;
}
/**
* 處理虛擬鍵手機遮擋底部導(dǎo)航欄并與透明狀態(tài)欄沖突問題
*/
public void dealSoftKeys() {
if (hasSoftKeys(getWindowManager())) {
//有虛擬鍵的取消狀態(tài)欄渲染防止底部導(dǎo)航欄被虛擬鍵遮擋
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
} else {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//5.0實現(xiàn)全屏
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
| WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
//5.0設(shè)置顏色
getWindow().setStatusBarColor(Color.TRANSPARENT);
getWindow().setNavigationBarColor(Color.TRANSPARENT);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//4.4實現(xiàn)全屏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
// 設(shè)置狀態(tài)欄黑色字體
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
}
}
第二步故爵,添加css
在ionic1項目中css文件添加Android沉浸式體驗樣式
/******* Android沉浸式體驗樣式 *******/
.platform-android.platform-cordova .bar-header:not(.bar-subheader) {
height: 68px;
}
.platform-android.platform-cordova .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 23px !important;
}
.platform-android.platform-cordova .bar-header:not(.bar-subheader) > * {
margin-top: 24px;
}
.platform-android.platform-cordova .tabs-top > .tabs,
.platform-android.platform-cordova .tabs.tabs-top {
top: 68px;
}
.platform-android.platform-cordova .has-header,
.platform-android.platform-cordova .bar-subheader {
top: 68px;
}
.platform-android.platform-cordova .has-subheader {
top: 112px;
}
.platform-android.platform-cordova .has-header.has-tabs-top {
top: 117px;
}
.platform-android.platform-cordova .has-header.has-subheader.has-tabs-top {
top: 161px;
}
/******* Android沉浸式體驗樣式 *******/