android透明狀態欄——你要的只是幾個方法

以前寫的項目基本沒有考慮過Android透明狀態欄的,最近項目有用到,便網上搜索一番。搜到的文章要么是講解不全、存在錯誤,要么就是使用一些庫,也不說原理,上來就是給你看效果圖,然后十幾個方法讓你眼花繚亂,看源碼就是越看越復雜。算了,自己寫個簡單能用的就好。所以,本文將通俗易懂地介紹Android透明狀態欄原理,以及幾種常見使用場景的處理方法。

下面是實現的效果:


透明狀態欄.gif

以上效果支持狀態欄和標題欄(ToolBar或者自定義)背景一致且可修改(改變顏色、漸變色、不透明度看你自己怎么改),標題欄位置不被狀態欄遮擋,6.0之上淺色狀態欄背景修改字體顏色為深色。支持DrawerLayout使用、Fragment使用。雖然效果很多,其實原理都是一樣的。

本文會教你如何修改狀態欄的顏色、如何解決狀態欄和標題欄內容重合的問題。

順便說下,這里的透明狀態欄指的是布局內容延伸到狀態欄的效果,網上很多人也叫做沉浸式狀態欄,這里不做辯駁。

原理

透明狀態欄的設置存在兼容性。Android 4.4(API 19)之前不支持透明狀態欄,而Android 5.0(API 21)之后版本對于透明狀態欄則有不同的處理方式。所以,我們要兼容的就是保證4.4之前的版本雖然不支持透明狀態欄,但是UI效果還是要協調,而4.4之后的版本跟根據不同的API版本盡量達成一致的顯示效果。

設置透明狀態欄,最核心的方法就是下面這一個方法:

 public static void makeStatusBarTransparent(Activity activity) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        Window window = activity.getWindow();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            int option = window.getDecorView().getSystemUiVisibility() | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
            window.getDecorView().setSystemUiVisibility(option);
            window.setStatusBarColor(Color.TRANSPARENT);
        } else {
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

你應該在網上找到了很多版本,類似的代碼。歸根到底,就這一個方法對Activity進行設置即可實現透明狀態欄。這個方法調用后,頁面布局內容就會延伸至狀態欄,狀態欄即為透明色。


image.png

但是,這里要注意下,其帶來了一個問題是頁面布局會延伸至狀態欄,你布局中的標題欄和狀態欄重合了,這顯示不是我們想要的效果。我們想要的是原有標題欄還是在原來標題欄的位置,只不過狀態欄的顏色和標題欄一致。接下來,我們將要解決的就是標題欄和狀態欄重合的問題。這個問題,也是你看到的所有第三方庫想要幫你解決的問題。第三方庫為了滿足廣大開發者的需求,也是為了適配各種情況,通常會增加N多種接口或者方式來處理這個問題,但隨之而來帶來的就是復雜性,不易理解。接口方法太多了,通常都要組合搭配調用才能生效,不看源碼,光看接口估計會很懵逼。

好勒,接下來,我們就介紹幾種方式來解決標題欄和狀態欄重合問題。

標題欄和狀態欄重合問題

解決狀態欄和標題欄重疊的幾種方法原理都是一致的:讓布局中的標題欄有一個狀態欄高度的marginTop或者paddingTop即可。但因為4.4之前是不存在狀態欄重合這種問題,所以也就不需要有一個狀態欄高度的marginTop或者paddingTop,所以要考慮一個兼容性問題。

幾種解決辦法:

  • 使用系統提供的fitSystemWindows屬性
  • 給標題控件動態增加paddingTop
  • 在DecorView中動態創建一個狀態欄高度的View,然后更改View背景為想要的顏色,然后設置標題欄marginTop為狀態欄高度
  • 在布局中定義一個假的用來充當狀態欄的View,動態設置其高度或者可見性

不同方式都有各自的優劣,建議根據不同的場景來靈活應用。

方式一:系統提供的fitSystemWindows屬性

fitsSystemWindows屬性:

  • 在透明狀態欄或者全屏時候生效。(4.4之前添加了這個屬性也沒有任何效果的,滿足兼容性)
  • 如果將某個View的該屬性設置為true,則系統會為該View添加一個paddingTop,值為狀態欄的高度。
  • 如果多個View同時設置該屬性為true,則只有第一個會起作用。此為一般情況。
  • 默認系統只處理第一個fitsSystemWindows,但每個控件自己可以單獨處理fitsSystemWindows。

fitsSystemWindows屬性為true的時候,在透明狀態欄模式下,4.4(含)之后的版本控件,系統會針對掃描到的該屬性設置為true的第一個控件設置一個狀態欄高度的paddingTop(原有View的paddingTop將會失效)。

注意:上面這段話是我的個人理解,并不嚴謹。

知道上面的原理后,我們可以根據需要來為哪個控件設置fitsSystemWindows屬性為true。

因為是設定paddingTop,如果你的標題欄是一個固定高度比如50dp,那么設置后是不會有效的,畢竟高度寫死了的。所以呢通常設置這個屬性的View高度是一個wrap_content,如果不是的話呢,那么你就在外面包一個FrameLayout或者LinearLayout,然后將原來View的背景設置到外面的包裝Layout上。

比如下面的在原來標題欄RelativeLayout布局外面包裝一個LinearLayout,然后給LinearLayout添加一個fitsSystemWindows屬性,并且修改LinearLayout的背景為標題欄背景色。


image.png

對了,我試過fitsSystemWindows如果在Fragment中使用貌似是不生效的。

方式二:給標題欄控件動態增加paddingTop

4.4之前的話就不加了??梢杂么a來動態增加,或者適用的話也可以放到values文件中。代碼獲取狀態欄高度:

 public static int getStatusBarHeight() {
        Resources resources = Resources.getSystem();
        int resourceId = resources.getIdentifier("status_bar_height", "dimen", "android");
        return resources.getDimensionPixelSize(resourceId);
    }

給標題欄控件動態增加高度的方法:

public static void fitTitleBar(Activity activity, final View titleBar) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
            return;
        }
        makeStatusBarTransparent(activity);
        final ViewGroup.LayoutParams layoutParams = titleBar.getLayoutParams();
        assert layoutParams != null;
        if (layoutParams.height == ViewGroup.LayoutParams.WRAP_CONTENT ||
                layoutParams.height == ViewGroup.LayoutParams.MATCH_PARENT) {
            titleBar.post(new Runnable() {
                @Override
                public void run() {
                    layoutParams.height = titleBar.getHeight() + getStatusBarHeight();
                    titleBar.setPadding(titleBar.getPaddingLeft(),
                            titleBar.getPaddingTop() + getStatusBarHeight(),
                            titleBar.getPaddingRight(),
                            titleBar.getPaddingBottom());
                }
            });
        } else {
            layoutParams.height += getStatusBarHeight();
            titleBar.setPadding(titleBar.getPaddingLeft(),
                    titleBar.getPaddingTop() + getStatusBarHeight(),
                    titleBar.getPaddingRight(),
                    titleBar.getPaddingBottom());
        }
    }

如果不是固定高度的控件,那么直接增加一個狀態欄高度的paddingTop,如果是寫死高度的控件,則需要同時給高度增加一個狀態欄高度。

在應用此方法的時候要注意,這個titleBar控件增加了paddingTop或者高度后,其內部布局要非常協調,不要影響到美觀了。如果你的標題欄用RelativeLayout寫的,然后里面文本居中那么使用此方法后顯示效果會很丑陋,可以參考第一種方式在外面包裝一層。

除了代碼控制,還可以根據API版本不同配置不同像素高度的status_bar_offset,然后設置到布局中。通常,狀態欄高度是24或者25dp。在4.4(API 19)之前不需要處理重疊問題所以設置status_bar_offset為0dp,在values-v19中設置status_bar_offset為25dp,然后根據布局的不同動態增加padding。

比如:
values/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="status_bar_offset">0dp</dimen>
</resources>

values-v19/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="status_bar_offset">25dp</dimen>
</resources>

布局文件

<LinearLayout android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:paddingTop="@dimen/status_bar_offset"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <TextView android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textColor="@color/white"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </LinearLayout>

除了上面這種寫法,還有很多種寫法,發揮你的想象力!

根據版本不同處理不同的padding這種,個人還是比較推崇的,不用寫太多代碼,直接布局就寫好了。當然可能是針對一些比較簡單的頁面處理哈。

方式三:動態創建狀態欄高度的View添加到DecorView中,然后設置標題欄的marginTop為狀態欄高度

很多第三方庫都喜歡這種方式。個人不喜歡用,個人鐘愛第二種和第一種哈哈。
這種方式也有局限性,比如對于DrawerLayout的情況,如果采用這種方式將statusBar添加到DecorView上,會導致側邊欄也會被狀態欄所覆蓋。

public static View setStatusBarColor(Activity activity, int color) {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
          return null;
    }
    makeStatusBarTransparent(activity);
    return applyStatusBarColor(activity, color);
}

private static View applyStatusBarColor(Activity activity, int color) {
    View fakeStatusBar = ensureStatusBar(activity);
    fakeStatusBar.setBackgroundColor(color);
    return fakeStatusBar;
}

private static View ensureStatusBar(Activity activity) {
    ViewGroup parent = (ViewGroup) activity.getWindow().getDecorView();
    View fakeStatusBar = parent.findViewWithTag(TAG_FAKE_STATUS_BAR);
    if (fakeStatusBar == null) {
        fakeStatusBar = createStatusBar(activity);
        fakeStatusBar.setTag(TAG_FAKE_STATUS_BAR);
        parent.addView(fakeStatusBar);
    }
    return fakeStatusBar;
}

private static View createStatusBar(Activity activity) {
    View statusBarView = new View(activity);
    ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, getStatusBarHeight());
    statusBarView.setLayoutParams(layoutParams);
    return statusBarView;
}

public static void addMarginTopEqualStatusBarHeight(View view) {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
          return;
    }
    view.setTag(TAG_OFFSET);
    Object haveSetOffset = view.getTag(KEY_OFFSET);
    if (haveSetOffset instanceof Boolean) {
        return;
    }
    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
    layoutParams.setMargins(layoutParams.leftMargin,
              layoutParams.topMargin + getStatusBarHeight(),
              layoutParams.rightMargin,
              layoutParams.bottomMargin);
    view.setTag(KEY_OFFSET, true);
}


  public static void subtractMarginTopEqualStatusBarHeight(View view) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) return;
        Object haveSetOffset = view.getTag(KEY_OFFSET);
        if (haveSetOffset == null || !(Boolean) haveSetOffset) {
            return;
        }
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        layoutParams.setMargins(layoutParams.leftMargin,
                layoutParams.topMargin - getStatusBarHeight(),
                layoutParams.rightMargin,
                layoutParams.bottomMargin);
        view.setTag(KEY_OFFSET, false);
    }

方式四 在布局中定義假的充當狀態欄的View,然后動態設置其高度。

這種方式是為了解決方式三不適用于DrawerLayout的情況,因為DecorView中添加的View是蓋在整個布局上的,所以會遮擋側邊欄。那么將其移動到布局中自己可控就好勒。

具體代碼不提供了,有思路就好。

狀態欄背景顏色為淺色導致狀態字體看不清的問題解決

狀態欄顏色默認為白色,如果你的狀態欄背景為淺色,那么會導致字體看不清楚。Android 6.0之后提供了方法設置為深色字體。

下面設置為light模式,則是讓狀態欄字體顏色變深,反之變淺。

 public static void setStatusBarLightMode(Activity activity, boolean isLightMode) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            Window window = activity.getWindow();
            int option = window.getDecorView().getSystemUiVisibility();
            if (isLightMode) {
                option |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
            } else {
                option &= ~View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
            }
            window.getDecorView().setSystemUiVisibility(option);
        }
    }

綜述

綜上,提供參考代碼地址:https://github.com/luckyshane/TintBar

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容