Translucent System Bar 的最佳實(shí)踐

近幾天準(zhǔn)備抽空總結(jié)Android一些系統(tǒng)UI的實(shí)踐使用，于是開始動手建了一個庫 AndroidSystemUiTraining ，邊擼代碼邊寫總結(jié)

今天開寫第一篇，對 Translucent System Bar 的實(shí)踐做一些總結(jié)。說起 Translucent System Bar 的特性，可能有些朋友還比較陌生，這里做一下簡單的介紹。

Android 4.3豌豆莢

看上圖，Android 4.4之前，即使我們打開手機(jī)app，我們還總是能看到系統(tǒng)頂部那條黑乎乎的通知欄，這樣會使得app稍顯突兀。于是Android 4.4開始，便引入了Translucent System Bar的系特性，用于彌補(bǔ)系統(tǒng)通知欄突兀之處。（估計也是向ios學(xué)習(xí)，因?yàn)閕os一大早就有這個特性）。我們先來看看 Translucent System Bar 新特性引入后，發(fā)生了什么樣的變化。下面截取了 中華萬年歷的天氣預(yù)報界面 和 QQ音樂主界面 的效果（兩個界面的效果實(shí)現(xiàn) Translucent System Bar 的方式有些區(qū)別，下文會細(xì)講）

中華萬年歷

QQ音樂

可以看到，系統(tǒng)的通知欄和app界面融為一體，媽媽再也不用面對黑乎乎的通知欄了。有關(guān) Translucent System Bar 的特性就暫且介紹到此。

工程簡介

先簡單介紹一下工程的結(jié)構(gòu)，核心部分已經(jīng)圈出，待我逐一講解

工程結(jié)構(gòu)

• 主要的操作都在style.xml 和 AndroidManifest.xml 中，Activity里面沒有任何涉及到Translucent System Bar設(shè)置的代碼，所以可以忽略不看。

• ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分別用于展示兩種不同實(shí)現(xiàn)方式的效果

• 要在Activity中使用 Translucent System Bar 特性，首先需要到AndroidManifest中為指定的Activity設(shè)置Theme。但是需要注意的是，我們不能直接在values/style.xml直接去自定義 Translucet System Bar 的Theme，因?yàn)楦奶匦詢H兼容 Android 4.4 開始的平臺，所以直接在values/style.xml聲明引入，工程會報錯。有些開發(fā)者朋友會在代碼中去判斷SDK的版本，然后再用代碼設(shè)置Theme。雖然同樣可以實(shí)現(xiàn)效果，但個人并不推崇這種做法。我所采取的方法則是建立多個SDK版本的values文件夾，系統(tǒng)會根據(jù)SDK的版本選擇合適的Theme進(jìn)行設(shè)置。大家可以看到上面我的工程里面有values、values-v19、values-v21。

第一種方式

第一種方式，需要做下面三步設(shè)置

1、在values、values-v19、values-v21的style.xml都設(shè)置一個 Translucent System Bar 風(fēng)格的Theme

values/style.xml

<style name="ImageTranslucentTheme" parent="AppTheme">
    <!--在Android 4.4之前的版本上運(yùn)行，直接跟隨系統(tǒng)主題-->
</style>

values-v19/style.xml

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

values-v21/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <!--Android 5.x開始需要把顏色設(shè)置透明，否則導(dǎo)航欄會呈現(xiàn)系統(tǒng)默認(rèn)的淺灰色-->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

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

2、在AndroidManifest.xml中對指定Activity的theme進(jìn)行設(shè)置

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

3、在Activity的布局文件中設(shè)置背景圖片，同時，需要把a(bǔ)ndroid:fitsSystemWindows設(shè)置為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>

到此，第一種實(shí)現(xiàn)方式完成，大家可以看看下面的效果

ImageTranslucentTheme效果

就跟中華萬年歷的天氣預(yù)報效果界面一樣，系統(tǒng)的整個導(dǎo)航欄都融入了app的界面中，背景圖片填滿了整個屏幕，看起來舒服很多。這里還有一個android:fitsSystemWindows設(shè)置需要注意的地方，后面會在細(xì)講。接下來看第二種實(shí)現(xiàn)。

方式二

相比中華萬年歷，QQ音樂采用的是另外一種實(shí)現(xiàn)的方式，它將app的Tab欄和系統(tǒng)導(dǎo)航欄分開來設(shè)置。

QQ音樂效果風(fēng)格

由于它的Tab欄是純色的，所以只要把系統(tǒng)通知欄的顏色設(shè)置和Tab欄的顏色一致即可，實(shí)現(xiàn)上相比方法一要簡單很多。同樣要到不同SDK版本的values下，創(chuàng)建一個同名的theme，在values-v21下，需要設(shè)置系統(tǒng)導(dǎo)航欄的顏色：

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中設(shè)置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音樂主界面一樣的效果了。

QQ音樂界面實(shí)現(xiàn)效果

到此，就大體介紹完了 Translucent System Bar 的兩種實(shí)現(xiàn)方式了。

android:fitsSystemWindows的“踩坑”

通過前面的兩種方式，大家估計會留意到一個地方，就是所有實(shí)現(xiàn) Translucent System Bar 效果的Activity，都需要在根布局里設(shè)置 android:fitsSystemWindows="true" 。設(shè)置了該屬性的作用在于，不會讓系統(tǒng)導(dǎo)航欄和我們app的UI重疊，導(dǎo)致交互問題。這樣說可能比較抽象，看看下面兩個效果圖的對比就知道了。

有fitsSystemWindows設(shè)置

沒有fitsSystemWindows設(shè)置

注：上面的演示效果，是借助了我的另一個開源項(xiàng)目，詳情請戳：AndroidAlbum

這樣的話，如果我有10個Activity要實(shí)現(xiàn)這種效果，就要在10個布局文件中做設(shè)置，非常麻煩。所以，想到一種方法，在theme中加上如下的android:fitsSystemWindows設(shè)置：

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

發(fā)現(xiàn)果真可以了。所有要實(shí)現(xiàn) Translucent System Bar 的Activity，只需要設(shè)置了這個theme即可,改起來也很方便。可惜，后來出現(xiàn)了一個BUG，讓我還是得老老實(shí)實(shí)的回去布局文件中設(shè)置。

Toast文字錯位

Toast打印出來的文字都往上偏移了。這里也是我疏忽的地方，因?yàn)樵诓季治募性O(shè)置是對View生效，而到了theme進(jìn)行設(shè)置則是對Window生效了，兩者在實(shí)現(xiàn)上就不一樣了。所以，最終只能改回原來的方式去實(shí)現(xiàn)。

實(shí)踐總結(jié)

最后做一下小小的總結(jié)：

• 方式一適用于app中沒有導(dǎo)航欄，且整體的背景是一張圖片的界面；
• 方式二適用于app中導(dǎo)航欄顏色為純色的界面；
• android:fitsSystemWindows設(shè)置要在布局文件中，不要到theme中設(shè)置；

怎樣，介紹到這里，你會使用 Translucent System Bar 了嗎？趕快到你的app中引入吧！

補(bǔ)充更新（2016-02-19）

一些熱心的網(wǎng)友反饋，在Android 4.4平臺上使用第二種方法失效。我立馬跑到Android4.4的真機(jī)運(yùn)行一遍，果真出現(xiàn)下面的bug，頂部變成黑白漸變了。

4.4平臺上第二種方案出現(xiàn)的BUG

在此，先為自己的疏忽向廣大讀者說聲抱歉。以后會最大程度的避免這種低級錯誤的產(chǎn)生。下面給出此Bug的修復(fù)方案：

第一步：去到 ColorTranslucentBarActivity 的布局文件中，將布局劃分成為標(biāo)題布局和內(nèi)容布局兩部分；

第二步：將 ColorTranslucentBarActivity 的根布局顏色設(shè)置與標(biāo)題布局的顏色一致，并將內(nèi)容布局設(shè)置為白色；

<?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:background="@color/color_31c27c"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <!--標(biāo)題布局-->
    <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>

    <!--內(nèi)容布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_show_toast"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Show a toast" />
    </LinearLayout>

</LinearLayout>

經(jīng)過以上兩步，即可在 4.4 平臺上實(shí)現(xiàn) Translucent System Bar 的效果 。最后附上修復(fù)bug后的效果圖一張。

Android 4.4平臺bug修復(fù)后的效果圖

補(bǔ)充更新（2016-02-22）

很多童鞋反應(yīng)，在每個布局文件中都要寫上 android:fitsSystemWindows="true" ,有沒有更佳方便的方法，本人當(dāng)時沒有思路。今天收到coder_sharp 童鞋反饋的一種更為簡便的思路

coder_sharp童鞋提供的新思路

個人把他的思路，整理成代碼，如下：

public abstract class TranslucentBarBaseActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(getLayoutResId());//把設(shè)置布局文件的操作交給繼承的子類

        ViewGroup contentFrameLayout = (ViewGroup) findViewById(Window.ID_ANDROID_CONTENT);
        View parentView = contentFrameLayout.getChildAt(0);
        if (parentView != null && Build.VERSION.SDK_INT >= 14) {
            parentView.setFitsSystemWindows(true);
        }
    }

    /**
     * 返回當(dāng)前Activity布局文件的id
     *
     * @return
     */
    abstract protected int getLayoutResId();
}

所有需要實(shí)現(xiàn)效果的界面繼承以上的父類，并實(shí)現(xiàn) getLayoutResId 抽象方法即可，就可以不用在布局文件中不斷做重復(fù)操作了，具體代碼詳見工程中的 TranslucentBarBaseActivity 和 BestTranslucentBarActivity。

補(bǔ)充更新（2016-02-25）

近幾天在琢磨 Material Design 的一些新控件效果，意外的發(fā)現(xiàn)上面提到的第二種方式，在將原 values-v21/style.xml

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

</style>

換成

<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ....
    .... 
    <item name="android:statusBarColor">@android:color/transparent</item>

</style>

之后，依舊可以實(shí)現(xiàn)同樣的效果。那么，到了這里你就可以發(fā)現(xiàn)，上面提到的兩種方式從本質(zhì)上其實(shí)是殊途同歸（最終總結(jié)得到的就是一種方式）！

我是熱愛技術(shù)，喜歡開源和分享的Clock，很享受寫文和其他開發(fā)者們探討問題的樂趣，其中很多bug都是其他細(xì)心的開發(fā)者發(fā)現(xiàn)的。如果你對我寫的內(nèi)容感興趣，歡迎關(guān)注我的簡書，我很樂意把我開發(fā)中一些有趣的東西分享到簡書中來（雖然目前僅僅是Android，但相信以后肯定會有其他內(nèi)容的），希望與其他開發(fā)者共同探討，共同進(jìn)步！

分享即美德，最后附上源代碼地址：
https://github.com/D-clock/AndroidSystemUiTraining

歡迎關(guān)注我的簡書，以及：

• 知乎：https://www.zhihu.com/people/d_clock
• 知乎專欄（技術(shù)視界）：https://zhuanlan.zhihu.com/coderclock
• 知乎專欄（閱讀視界）：https://zhuanlan.zhihu.com/readerclock
• 個人博客：http://blog.coderclock.com/

• 微信公眾號：