ionic1--沉浸式状态栏

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

第一步,修改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沉浸式体验样式   *******/



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值