1. 程式人生 > >Android 沉浸式狀態列與隱藏導航欄

Android 沉浸式狀態列與隱藏導航欄

1 前言

一般我們在Android的APP開發中,APP的介面如下: 
這裡寫圖片描述 
可以看到,有狀態列、ActionBar(ToolBar)、導航欄等,一般來說,APP實現沉浸式有三種需求:沉浸式狀態列,隱藏導航欄,APP全屏 
沉浸式狀態列是指狀態列與ActionBar顏色相匹配, 
隱藏導航欄不用多說,就是將導航欄隱藏,去掉下面的黑條。 
APP全屏是指將狀態列與導航欄都隱藏,例如很多遊戲介面,都是APP全屏。 
所以,在做這一步時,關鍵要問清楚產品狗的需求,免得白費功夫。 
下面,分別來介紹這三種方式的實現。

2 沉浸式狀態列

沉浸式狀態列效果一般如下: 
順便在網上找的圖 
這裡寫圖片描述 
關於沉浸式狀態列網上的方案很多,比如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);
        }
    }

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);
        }

    }

效果如下: 
這裡寫圖片描述

這裡先呼叫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);
        }
    }

效果如下: 
這裡寫圖片描述

可以看到,介面預設情況下是全屏的,狀態列和導航欄都不會顯示。而當我們需要用到狀態列或導航欄時,只需要在螢幕頂部向下拉,或者在螢幕右側向左拉,狀態列和導航欄就會顯示出來,此時介面上任何元素的顯示或大小都不會受影響。過一段時間後如果沒有任何操作,狀態列和導航欄又會自動隱藏起來,重新回到全屏狀態。

透明狀態列,導航欄: 
另外,通過設定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();
    }

效果如下: 
這裡寫圖片描述