第一種方式

第一種方式，需要做下面三步設定

1、在values、values-v19、values-v21的style.xml都設定一個 Translucent System Bar 風格的Theme

values/style.xml

<style name="ImageTranslucentTheme" parent="AppTheme">
    <!--在Android 4.4之前的版本上執行，直接跟隨系統主題-->
</style>

values-v19/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>
 

values-v21/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <!--Android 5.x開始需要把顏色設定透明，否則導航欄會呈現系統預設的淺灰色-->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>
 

上面需要注意的地方是，無論你在哪個SDK版本的values目錄下，設定了主題，都應該在最基本的values下設定一個同名的主題。這樣才能確保你的app能夠正常執行在 Android 4.4 以下的裝置。否則，肯定會報找不到Theme的錯誤。

2、在AndroidManifest.xml中對指定Activity的theme進行設定

<activity
    android:name=".ui.ImageTranslucentBarActivity"
    android:label="@string/image_translucent_bar"
    android:theme="@style/ImageTranslucentTheme" />
 

3、在Activity的佈局檔案中設定背景圖片，同時，需要把android:fitsSystemWindows設定為true

activity_image_translucent_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/env_bg"
    android:fitsSystemWindows="true">

</RelativeLayout>

到此，第一種實現方式完成，大家可以看看下面的效果

就跟中華萬年曆的天氣預報效果介面一樣，系統的整個導航欄都融入了app的介面中，背景圖片填滿了整個螢幕，看起來舒服很多。這裡還有一個android:fitsSystemWindows設定需要注意的地方，後面會在細講。接下來看第二種實現。

方式二

相比中華萬年曆，QQ音樂採用的是另外一種實現的方式，它將app的Tab欄和系統導航欄分開來設定。

由於它的Tab欄是純色的，所以只要把系統通知欄的顏色設定和Tab欄的顏色一致即可，實現上相比方法一要簡單很多。同樣要到不同SDK版本的values下，建立一個同名的theme，在values-v21下，需要設定系統導航欄的顏色：

values-v21/style.xml

<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">@color/color_31c27c</item>
</style>

再到ColorTranslucentBarActivity的佈局檔案activity_color_translucent_bar.xml中設定Tab欄的顏色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/color_31c27c">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="QQ Music"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

    </RelativeLayout>
</LinearLayout>

到此，我們就可以得到和QQ音樂主介面一樣的效果了。

到此，就大體介紹完了 Translucent System Bar 的兩種實現方式了。

android:fitsSystemWindows的“踩坑”

通過前面的兩種方式，大家估計會留意到一個地方，就是所有實現 Translucent System Bar 效果的Activity，都需要在根佈局裡設定 android:fitsSystemWindows="true" 。設定了該屬性的作用在於，不會讓系統導航欄和我們app的UI重疊，導致互動問題。這樣說可能比較抽象，看看下面兩個效果圖的對比就知道了。