Android 沉浸式狀態欄實踐

時間 2019-11-12

原文原文鏈接

首先明確一下沉浸式狀態欄的概念有兩種類型android

頂部是ImageView這種須要將其填充到狀態欄git
頂部是ActionBar這種不須要填充到狀態欄github

而上面的第二種狀況覆蓋了絕大部分頁面，因此下面的思路也是基於這點來實現。ide

第一步：
在BaseActivity裏面實現以下代碼佈局

public abstract class BaseActivity extends AppCompatActivity  {

    @Override
    protected final void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStatusBar();
    }

    protected void setStatusBar() {
        //這裏作了兩件事情，1.使狀態欄透明並使contentView填充到狀態欄 2.預留出狀態欄的位置，防止界面上的控件離頂部靠的太近。這樣就能夠實現開頭說的第二種狀況的沉浸式狀態欄了 
        StatusBarUtil.setTransparent(this);
    }
}

看下StatusBarUtil.setTransparent(this)具體的實現ui

/**
     * 設置狀態欄全透明
     *
     * @param activity 須要設置的activity
     */
    public static void setTransparent(Activity activity) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        transparentStatusBar(activity);
        setRootView(activity);
    }

    /**
     * 使狀態欄透明
     */
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private static void transparentStatusBar(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //須要設置這個flag contentView才能延伸到狀態欄
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            //狀態欄覆蓋在contentView上面，設置透明使contentView的背景透出來
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else {
            //讓contentView延伸到狀態欄而且設置狀態欄顏色透明
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

   /**
     * 設置根佈局參數
     */
    private static void setRootView(Activity activity) {
        ViewGroup parent = (ViewGroup) activity.findViewById(android.R.id.content);
        for (int i = 0, count = parent.getChildCount(); i < count; i++) {
            View childView = parent.getChildAt(i);
            if (childView instanceof ViewGroup) {
                childView.setFitsSystemWindows(true);
                ((ViewGroup) childView).setClipToPadding(true);
            }
        }
    }

通過這樣的設置基本上大部分界面都適配了沉浸式狀態欄了，針對須要適配imageView填充到狀態欄或者須要單獨設置狀態欄顏色和透明度的咱們能夠在BaseActivity 的子類重寫setStatusBar方法來單獨適配。this

第二步：spa

先說簡單的，單獨設置狀態欄顏色和透明度這種狀況

//重寫這個方法
    protected void setStatusBar() {
        StatusBarUtil.setColor(...);
    }

    /**
     * 設置狀態欄顏色
     *
     * @param activity       須要設置的activity
     * @param color          狀態欄顏色值
     * @param statusBarAlpha 狀態欄透明度
     */

    public static void setColor(Activity activity, @ColorInt int color, @IntRange(from = 0, to = 255) int statusBarAlpha) {
        //5.0以上版本直接設置狀態欄顏色透明度
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().setStatusBarColor(calculateStatusColor(color, statusBarAlpha));
        //4.4-5.0版本經過假裝一個狀態欄來設置顏色和透明度
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
            View fakeStatusBarView = decorView.findViewById(FAKE_STATUS_BAR_VIEW_ID);
            if (fakeStatusBarView != null) {
                if (fakeStatusBarView.getVisibility() == View.GONE) {
                    fakeStatusBarView.setVisibility(View.VISIBLE);
                }
                fakeStatusBarView.setBackgroundColor(calculateStatusColor(color, statusBarAlpha));
            } else {
                decorView.addView(createStatusBarView(activity, color, statusBarAlpha));
            }
            setRootView(activity);
        }
    }

    /**
     * 計算狀態欄顏色
     *
     * @param color color值
     * @param alpha alpha值
     * @return 最終的狀態欄顏色
     */
    private static int calculateStatusColor(@ColorInt int color, int alpha) {
        if (alpha == 0) {
            return color;
        }
        float a = 1 - alpha / 255f;
        int red = color >> 16 & 0xff;
        int green = color >> 8 & 0xff;
        int blue = color & 0xff;
        red = (int) (red * a + 0.5);
        green = (int) (green * a + 0.5);
        blue = (int) (blue * a + 0.5);
        return 0xff << 24 | red << 16 | green << 8 | blue;
    }

    /**
     * 生成一個和狀態欄大小相同的半透明矩形條
     *
     * @param activity 須要設置的activity
     * @param color    狀態欄顏色值
     * @param alpha    透明值
     * @return 狀態欄矩形條
     */
    private static View createStatusBarView(Activity activity, @ColorInt int color, int alpha) {
        // 繪製一個和狀態欄同樣高的矩形
        View statusBarView = new View(activity);
        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
        statusBarView.setLayoutParams(params);
        statusBarView.setBackgroundColor(calculateStatusColor(color, alpha));
        statusBarView.setId(FAKE_STATUS_BAR_VIEW_ID);
        return statusBarView;
    }

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

imageView這種須要填充到狀態欄的狀況

//重寫這個方法
    protected void setStatusBar() {
        StatusBarUtil.setTransparentForImageView(...);
    }

    /**
     * 爲頭部是 ImageView 的界面設置狀態欄全透明
     *
     * @param activity       須要設置的activity
     * @param needOffsetView 須要向下偏移的 View
     */
    public static void setTransparentForImageView(Activity activity, View needOffsetView) {
        setTranslucentForImageView(activity, 0, needOffsetView);
    }

   /**
     * 爲頭部是 ImageView 的界面設置狀態欄透明
     *
     * @param activity       須要設置的activity
     * @param statusBarAlpha 狀態欄透明度
     * @param needOffsetView 須要向下偏移的 View
     */
    public static void setTranslucentForImageView(Activity activity, @IntRange(from = 0, to = 255) int statusBarAlpha,
                                                  View needOffsetView) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        setTransparentForWindow(activity);
        addTranslucentView(activity, statusBarAlpha);
        //雖然imageView須要填充到狀態欄，可是上面的文字按鈕等控件並不須要填充到狀態欄，因此須要設置偏移
        if (needOffsetView != null) {
            Object haveSetOffset = needOffsetView.getTag(TAG_KEY_HAVE_SET_OFFSET);
            if (haveSetOffset != null && (Boolean) haveSetOffset) {
                return;
            }
            ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) needOffsetView.getLayoutParams();
            layoutParams.setMargins(layoutParams.leftMargin, layoutParams.topMargin + getStatusBarHeight(activity),
                    layoutParams.rightMargin, layoutParams.bottomMargin);
            needOffsetView.setTag(TAG_KEY_HAVE_SET_OFFSET, true);
        }
    }

    /**
     * 設置透明
     */
    private static void setTransparentForWindow(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
            activity.getWindow()
                    .getDecorView()
                      //兩個 flag 要結合使用，表示讓應用的主體內容佔用系統狀態欄的空間
                    .setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            activity.getWindow()
                    .setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

    /**
     * 添加半透明矩形條
     *
     * @param activity       須要設置的 activity
     * @param statusBarAlpha 透明值
     */
    private static void addTranslucentView(Activity activity, @IntRange(from = 0, to = 255) int statusBarAlpha) {
        ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
        View fakeTranslucentView = contentView.findViewById(FAKE_TRANSLUCENT_VIEW_ID);
        if (fakeTranslucentView != null) {
            if (fakeTranslucentView.getVisibility() == View.GONE) {
                fakeTranslucentView.setVisibility(View.VISIBLE);
            }
            fakeTranslucentView.setBackgroundColor(Color.argb(statusBarAlpha, 0, 0, 0));
        } else {
            contentView.addView(createTranslucentStatusBarView(activity, statusBarAlpha));
        }
    }

    /**
     * 建立半透明矩形 View
     *
     * @param alpha 透明值
     * @return 半透明 View
     */
    private static View createTranslucentStatusBarView(Activity activity, int alpha) {
        // 繪製一個和狀態欄同樣高的矩形
        View statusBarView = new View(activity);
        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight(activity));
        statusBarView.setLayoutParams(params);
        statusBarView.setBackgroundColor(Color.argb(alpha, 0, 0, 0));
        statusBarView.setId(FAKE_TRANSLUCENT_VIEW_ID);
        return statusBarView;
    }

最後小結一下思路：code

首先在基類設置狀態欄透明，讓contentView填充到狀態欄，利用contentView的背景做爲狀態欄背景直接實現沉浸的效果，而後利用setFitsSystemWindows(true)和setClipToPadding(true)對控件預留出狀態欄的位置。blog

若是須要單獨設置狀態欄顏色或者透明度，好比contentView的背景色和ActionBar背景不一致的狀況，5.0以上經過設置setStatusBarColor實現，4.4-5.0經過假裝狀態欄實現。

最後若是須要實現相似圖片這種須要填充到狀態欄的狀況，經過setTransparentForWindow實現，而後對其餘控件重設MarginLayoutParams來實現預留出狀態欄位置的效果。

通過上面的一些設置已經覆蓋了絕大部分狀況，對於Fragment，DrawerLayout，CoordinatorLayout等可能須要特殊處理的這裏貼上gitgub地址。ps：做者不是我，我只是個搬磚的。
https://github.com/laobie/StatusBarUtil

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。