Android UI體驗之全屏沉浸式透明狀態欄效果

時間 2019-11-21

原文原文鏈接

前言：java

Android 4.4以後谷歌提供了沉浸式全屏體驗，在沉浸式全屏模式下，狀態欄、虛擬按鍵動態隱藏，應用可使用完整的屏幕空間，按照 Google 的說法，給用戶一種身臨其境的體驗。而Android 5.0以後谷歌又提出了 ColorPalette 的概念，讓開發者能夠本身設定系統區域的顏色，使整個 App 的顏色風格和系統的顏色風格保持統一。今天學習總結一下如何實現Android 4.4以上全屏沉浸式透明狀態欄效果。先看下預期效果：android

首先現分清楚哪部分是狀態欄，哪部分是導航欄api

狀態欄StatusBar以下app

導航欄NavigationBar以下函數

如何實現？

1.）首先實現全屏

第一種：繼承主題特定主題佈局

在Android API 19以上可使用****.TranslucentDecor***有關的主題，自帶相應半透明效果，Theme.Holo.NoActionBar.TranslucentDecor和Theme.Holo.Light.NoActionBar.TranslucentDecor兩種主題爲新增長的，因此要新建values-v19文件夾並建立styles文件添加以下代碼post

   <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor">
        <!-- Customize your theme here. -->
  </style>

第二種：在activity中採用代碼的方式學習

Android 4.4以上能夠添加以下代碼ui

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//透明狀態欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明導航欄
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}

Android 5.0 以上也可使用下面的代碼實現全屏this

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
}

全屏效果

不難發現此時狀態欄佔有的位置消失，和app的佈局疊在一塊兒了，接下來解決這個問題

2.）解決狀態欄佔位問題

第一種：主題添加以下設置

<item name="android:fitsSystemWindows">true</item>

第二種：activity layout根目錄添加下面代碼

android:fitsSystemWindows="true"

第三種：經過Java代碼設置

rootview.setFitsSystemWindows(true);

fitsSystemWindows只做用在sdk>=19的系統上就是高於4.4的系統，這個屬性能夠給任何view設置,只要設置了這個屬性此view的全部padding屬性失效.只有在設置了透明狀態欄(StatusBar)或者導航欄(NavigationBar)此屬性纔會生效，

若是上述設置了狀態欄和導航欄爲透明的話，至關於對該View自動添加一個值等於狀態欄高度的paddingTop，和等於導航欄高度的paddingBottom，效果以下

3.）狀態欄導航欄設置背景色

4.4以上的能夠採用修改contentView的背景色，或者動態添加一個view到contentView上

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明狀態欄
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明導航欄
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //設置contentview爲fitsSystemWindows
            ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
            //給statusbar着色
            View view = new View(this);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
            view.setBackgroundColor(color);
            contentView.addView(view);
        }

動態獲取StatusBarHeight函數以下

    /**
     * 獲取狀態欄高度
     *
     * @param context context
     * @return 狀態欄高度
     */
    private static int getStatusBarHeight(Context context) {
        // 得到狀態欄高度
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }

動態獲取NavigationBarHeight函數以下

    /**
     * 獲取導航欄高度
     *
     * @param context context
     * @return 導航欄高度
     */
    public static int getNavigationBarHeight(Context context) {
        int resourceId = context.getResources().getIdentifier("navigation_bar_height", "dimen", "android");
        return context.getResources().getDimensionPixelSize(resourceId);
    }

而後Android5.0以上谷歌提供了新的api能夠更新狀態欄和導航欄的背景色

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //設置狀態欄顏色
            window.setStatusBarColor(color);
            //設置導航欄顏色
            window.setNavigationBarColor(color);
            ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
//            contentView.setPadding(0, getStatusBarHeight(this), 0, 0);
        }

這樣整體效果就實現了

4.）貼出總體java代碼實現方式

    private void initWindows() {
        Window window = getWindow();
        int color = getResources().getColor(android.R.color.holo_blue_light);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            //設置狀態欄顏色
            window.setStatusBarColor(color);
            //設置導航欄顏色
            window.setNavigationBarColor(color);
            ViewGroup contentView = ((ViewGroup) findViewById(android.R.id.content));
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明狀態欄
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明導航欄
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //設置contentview爲fitsSystemWindows
            ViewGroup contentView = (ViewGroup) findViewById(android.R.id.content);
            View childAt = contentView.getChildAt(0);
            if (childAt != null) {
                childAt.setFitsSystemWindows(true);
            }
            //給statusbar着色
            View view = new View(this);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(this)));
            view.setBackgroundColor(color);
            contentView.addView(view);
        }
    }