Android 沉浸式状态栏与隐藏导航栏

落日映苍穹つ 2022-05-20 01:41 384阅读 0赞

## 1 前言 ##

一般我们在Android的APP开发中，APP的界面如下：  
![这里写图片描述][SouthEast]  
可以看到，有状态栏、ActionBar(ToolBar)、导航栏等,一般来说，APP实现沉浸式有三种需求：沉浸式状态栏，隐藏导航栏，APP全屏  
沉浸式状态栏是指状态栏与ActionBar颜色相匹配，  
隐藏导航栏不用多说，就是将导航栏隐藏，去掉下面的黑条。  
APP全屏是指将状态栏与导航栏都隐藏，例如很多游戏界面，都是APP全屏。  
所以，在做这一步时，关键要问清楚产品狗的需求，免得白费功夫。  
下面，分别来介绍这三种方式的实现。

## 2 沉浸式状态栏 ##

沉浸式状态栏效果一般如下：  
顺便在网上找的图  
![这里写图片描述][SouthEast 1]  
关于沉浸式状态栏网上的方案很多，比如android 5.0 以上的MD设计，或者修改activiyty的window的setStatusBarColor()方法，设置颜色。需要说明一点的时，沉浸式状态栏只对API19以上有效。  
这里我依然采用的是设置Activity的Window设置setStatusBarColor()的方法。代码如下：

/**
         * 设置状态栏的颜色
         */
        @TargetApi(Build.VERSION_CODES.KITKAT)
        public static void statusBarTintColor(Activity activity, int color) {
            // 代表 5.0 及以上
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                activity.getWindow().setStatusBarColor(color);
                return;
            }
    
            // versionCode > 4.4  and versionCode < 5.0
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                //透明状态栏
                activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
                ViewGroup androidContainer = (ViewGroup) activity.findViewById(android.R.id.content);
                // 留出高度 setFitsSystemWindows  true代表会调整布局，会把状态栏的高度留出来
                View contentView = androidContainer.getChildAt(0);
                if (contentView != null) {
                    contentView.setFitsSystemWindows(true);
                }
                // 在原来的位置上添加一个状态栏
                View statusBarView = createStatusBarView(activity);
                androidContainer.addView(statusBarView, 0);
                statusBarView.setBackgroundColor(color);
            }
        }
    
        /**
         * 创建一个需要填充statusBarView
         */
        private static View createStatusBarView(Activity activity) {
            View statusBarView = new View(activity);
            ViewGroup.LayoutParams statusBarParams = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
            statusBarView.setLayoutParams(statusBarParams);
            return statusBarView;
        }
    
        /**
         * 获取状态栏的高度
         */
        public static int getStatusBarHeight(Context context) {
            int result = 0;
            int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
            if (resourceId > 0) {
                result = context.getResources().getDimensionPixelSize(resourceId);
            }
            return result;
        }

## 3 隐藏导航栏 ##

隐藏导航栏就是使用了UI Flag

/**
         *
         * @param activity
         * @param
         */
        public static void setNavigationBar(Activity activity,int visible){
            View decorView = activity.getWindow().getDecorView();
            //显示NavigationBar
            if (View.GONE == visible){
                int option = SYSTEM_UI_FLAG_HIDE_NAVIGATION;
                decorView.setSystemUiVisibility(option);
            }
        }

*  1

## 4 APP全屏 ##

这里的APP全屏又分为隐藏状态栏与ActionBar，与隐藏导航栏，状态栏。  
隐藏状态栏：

/**
         * 设置Activity的statusBar隐藏
         * @param activity
         */
        public static void statusBarHide(Activity activity){
            // 代表 5.0 及以上
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                View decorView = activity.getWindow().getDecorView();
                int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
                decorView.setSystemUiVisibility(option);
                activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
                ActionBar actionBar = activity.getActionBar();
                actionBar.hide();
                return;
            }
    
            // versionCode > 4.4  and versionCode < 5.0
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            }
    
        }

效果如下：  
![这里写图片描述][SouthEast 2]

这里先调用getWindow().getDecorView()方法获取到了当前界面的DecorView，然后调用它的setSystemUiVisibility()方法来设置系统UI元素的可见性。其中，SYSTEM\_UI\_FLAG\_FULLSCREEN表示全屏的意思，也就是会将状态栏隐藏。另外，根据Android的设计建议，ActionBar是不应该独立于状态栏而单独显示的，因此状态栏如果隐藏了，我们同时也需要调用ActionBar的hide()方法将ActionBar也进行隐藏。

隐藏导航栏，状态栏：  
一般游戏需要这种界面，代码如下：  
在Activity的onWindowFocusChanged（）中去设置界面完全全屏。

/**
         * 导航栏，状态栏隐藏
         * @param activity
         */
        public static void NavigationBarStatusBar(Activity activity,boolean hasFocus){
            if (hasFocus && Build.VERSION.SDK_INT >= 19) {
                View decorView = activity.getWindow().getDecorView();
                decorView.setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                                | View.SYSTEM_UI_FLAG_FULLSCREEN
                                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
            }
        }

效果如下：  
![这里写图片描述][SouthEast 3]

可以看到，界面默认情况下是全屏的，状态栏和导航栏都不会显示。而当我们需要用到状态栏或导航栏时，只需要在屏幕顶部向下拉，或者在屏幕右侧向左拉，状态栏和导航栏就会显示出来，此时界面上任何元素的显示或大小都不会受影响。过一段时间后如果没有任何操作，状态栏和导航栏又会自动隐藏起来，重新回到全屏状态。

透明状态栏,导航栏：  
另外，通过设置UI Flag，可以让导航栏，状态栏都透明化。

/**
         * 导航栏，状态栏透明
         * @param activity
         */
        public static void setNavigationBarStatusBarTranslucent(Activity activity){
            if (Build.VERSION.SDK_INT >= 21) {
                View decorView = activity.getWindow().getDecorView();
                int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
                decorView.setSystemUiVisibility(option);
                activity.getWindow().setNavigationBarColor(Color.TRANSPARENT);
                activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
            }
            ActionBar actionBar = activity.getActionBar();
            actionBar.hide();
        }

效果如下：  
![这里写图片描述][SouthEast 4]

[SouthEast]: /images/20220520/99cb43f83159425aa92d466806a86957.png
[SouthEast 1]: /images/20220520/86a51337ec844b21853c2fdd4b4f85ae.png
[SouthEast 2]: /images/20220520/4bb9ca76b48b4514858a1d1cb818546d.png
[SouthEast 3]: /images/20220520/06b6575d4ad64b8da50b20805650812a.png
[SouthEast 4]: /images/20220520/34dd8e7868b64058be9e32cfd923d0ee.png