美文网首页
ionic1开发——APP体验优化之实现沉浸式状态栏

ionic1开发——APP体验优化之实现沉浸式状态栏

作者: hhjjj1010 | 来源:发表于2019-10-09 14:55 被阅读0次

    什么是沉浸式状态栏

    说得通俗一点,沉浸式状态栏也就是透明的状态栏(电池栏),同时也会显示状态栏上的内容,比如电量,时间等。
    这样,view的显示区域就是整个屏幕,不再需要除去电池栏的区域。

    在iOS上,ionic1本身就是支持透明的状态栏的。
    在Android上,ionic1自身是不支持的,所以需要我们自己来实现。

    怎么实现

    目前这个方法需要修改Android原生的代码,无法通过cordova插件的来实现。
    这也是这个方法的缺点,每次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是否已经显示
         *
         * @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;
        }
    
        /**
         * 处理虚拟键手机遮挡底部导航栏并与透明状态栏冲突问题
         */
        public void dealSoftKeys() {
            if (hasSoftKeys(getWindowManager())) {
                //有虚拟键的取消状态栏渲染防止底部导航栏被虚拟键遮挡
                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实现全屏
                    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设置颜色
                    getWindow().setStatusBarColor(Color.TRANSPARENT);
                    getWindow().setNavigationBarColor(Color.TRANSPARENT);
                } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    //4.4实现全屏
                    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) {
                // 设置状态栏黑色字体
                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沉浸式体验样式   *******/
    
    

    相关文章

      网友评论

          本文标题:ionic1开发——APP体验优化之实现沉浸式状态栏

          本文链接:https://www.haomeiwen.com/subject/cuhgpctx.html