前言

地上斷了翅的蝶，霧散之後的滿月，原來愛跟心碎，都可以很細節。

簡介

這兩天時間比較充裕，所以實現了專案裡的沉浸式狀態列效果，這樣可以使得我們的app主題顯得更加統一。所以今天就帶領大家實現下不同情況下的狀態列效果顯示。

一 狀態列顏色改變

1. SystemBarTint的使用

對於狀態列顏色改變的實現，github上有一個開源的專案SystemBarTint可以幫我們很容易實現狀態列顏色的改變，我們直接在專案中新增依賴：

dependencies {
    compile 'com.readystatesoftware.systembartint:systembartint:1.0.3'
 

}

2. 主佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context
 
="com.asiatravel.atstaybar.MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:text="主佈局"
        android:textSize="20sp" />
</RelativeLayout>

3. MainActivity中新增程式碼

private void setStatusColor() {
        if (Build.VERSION
 
.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            SystemBarTintManager tintManager = new SystemBarTintManager(this);
            tintManager.setStatusBarTintColor(getResources().getColor(R.color.colorGreen));
            tintManager.setStatusBarTintEnabled(true);
        }
    }

由於這裡狀態列的改變只限於api版本19及以上，所以我們需要判斷當前手機的系統版本號。

4. 執行效果圖

這裡很明顯，佈局被擠到狀態列上了，所以我們需要給activity的style加上一個屬性android:fitsSystemWindows設定為true

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:fitsSystemWindows">true</item>
</style>

再來看效果圖：

二 背景圖片全屏顯示

對於背景圖片全屏顯示的應用場景也很多，比如登陸註冊頁面我們喜歡給頁面一個背景圖片顯得更為美觀，這時我們就不應該設定狀態列的顏色改變來實現其效果了。

1. 主佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:background="@drawable/login_image"
    android:layout_height="match_parent"
    tools:context="com.asiatravel.atstaybar.MainActivity">

</RelativeLayout>

這裡我們只給最外層佈局設定了一張背景圖片login_image。

2. MainActivity程式碼

public void setOuterLayoutFullScreen() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            ViewGroup rootView = (ViewGroup) ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0);
            rootView.setFitsSystemWindows(true);
            rootView.setClipToPadding(true);
        }
    }

3. 效果圖

三 裡層佈局全屏顯示

這種場景多用於首頁介面，比如上面是banner輪播圖，下面是我們的一些功能入口，這時我們就需要裡層佈局全屏顯示。

1. 主佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.asiatravel.atstaybar.MainActivity">

    <ImageView
        android:id="@+id/login_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@drawable/login_image" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_image"
        android:layout_marginTop="20dp"
        android:background="@color/colorGreen"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Tab1" />

           省略重複程式碼...
    </LinearLayout>
</RelativeLayout>

這裡我們省略了一些重複程式碼。

2. MainActivity實現

private void setInnerLayoutFullScreen() {
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

3. 效果圖

好像效果並不像我們預期的那樣，是因為我們之前給它的style設定了android:fitsSystemWindows屬性為true，這裡我們改為false或者是直接刪掉這行程式碼。

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:fitsSystemWindows">false</item>
 </style>

再來看效果圖

這才是我們所期望看到的結果。

總結

這就是我們今天所講的沉浸式狀態列的全部內容，有哪裡不理解的童鞋可以在下面留言或者發郵件給我，定會及時回覆。另外有需要專案原始碼的童鞋可以去https://github.com/kuangxiaoguo0123/ATStayBar 下載。