概念

Google官方文檔4.4APIs_KITKAT

該特性是在Android 4.4 KITKAT版本（API_19）中引入的新特性。

也就是我們說的 透明欄 ，國內一般稱之為 沉浸式頂欄。在 Android 4.4 還是在 Android 5.0 +上, Translucent ｢透明｣ 的特質都能體現得非常清楚.

---

介紹

Android 4.4之前，我們打開手機app，總是能看到系統頂部那條黑乎乎的通知欄，顯得非常不和諧。于是Android 4.4開始，便引入了Translucent System Bar的系特性，用于彌補系統通知欄突兀之處。

我們先來看看 Translucent System Bar 新特性引入后，發生了什么樣的變化。

可以看到系統的通知欄和app界面融為一體。

---

兩種實現方式

---

大致說明

工程目錄：

注意事項

• 主要的操作都在style.xml 和 AndroidManifest.xml 中，Activity里面沒有任何涉及到Translucent System Bar設置的代碼，所以可以忽略不看。
• ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分別用于展示兩種不同實現方式的效果。 其中*2是繼承TranslucentBarActitity2,在父類中設置了setFitsSystemWindows(true)屬性，布局文件中可以省略了。
• 要在Activity中使用 Translucent System Bar 特性，首先需要到AndroidManifest中為指定的Activity設置Theme。但是需要注意的是，我們不能直接在values/style.xml直接去自定義 Translucet System Bar 的Theme，因為改特性僅兼容 Android 4.4 開始的平臺，所以直接在values/style.xml聲明引入，工程會報錯。有些開發者朋友會在代碼中去判斷SDK的版本，然后再用代碼設置Theme。雖然同樣可以實現效果，但個人并不推崇這種做法。我所采取的方法則是建立多個SDK版本的values文件夾，系統會根據SDK的版本選擇合適的Theme進行設置。大家可以看到上面我的工程里面有values、values-v19、values-v21。

---

背景圖片延伸至系統欄

三步設置

第一步：設置不同版本下style.xml

在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

<!--Android 4.4 --><!--ImageTranslucentTheme--><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

<!--Android 5.0以上版本--><!--ImageTranslucentTheme--><style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"><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的錯誤。

第二步：在AndroidManifest.xml中對指定Activity的theme進行設置

<!-- ImageTranslucentBarActivity --><activity android:name=".translucentbar.ImageTranslucentBarActivity"android:label="@string/image_translucent_bar"android:theme="@style/ImageTranslucentTheme" /><!-- 第二種方式,在抽象類中通過代碼的方式fitsSystemWindows=true --><activity android:name=".translucentbar.ImageTranslucentBarActivity2"android:label="@string/image_translucent_bar"android:theme="@style/ImageTranslucentTheme" />

第三步：在Activity的布局文件中設置背景圖片，同時，需要把android:fitsSystemWindows設置為true

<?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/img"android:fitsSystemWindows="true"><TextView android:layout_width="match_parent"android:layout_height="wrap_content"android:text="第一種方式繼承父類BaseActivity的實現方式，布局文件根目錄下需要設置fitsSystemWindows=true "android:textColor="@color/color_red"android:layout_margin="10dp"android:textSize="20sp" /></RelativeLayout>

到此，第一種實現方式完成，系統欄會被背景圖填充了。效果如下：

---

APP的Tab欄和系統導航欄分開來設置。

由于它的TAB欄是純色的，所以只要把系統通知欄的顏色設置成和TAB欄一樣的即可，實現方式上比第一種要簡單的多。同樣需要在不同SDK版本的values下，創建一個同名的Theme。

第一步 在不同SDK版本中的style.xml創建主題

values/style.xml

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

values-v19/style.xml

<!--Android 4.4 --><!--ColorTranslucentTheme--><style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"><item name="android:windowTranslucentStatus">true</item><item name="android:windowTranslucentNavigation">true</item></style>

values-v21/style.xml

<!--Android 5.0以上版本--><!--ColorTranslucentTheme--><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>

values-v21/style.xml中的android:statusBarColor，設置成透明色也可以實現相同的效果

<item name="android:statusBarColor">@android:color/transparent</item>

第二步： 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>

說明： 上述設置話，會在真機上出現頂部變成黑白漸變的bug，建議采用下面的方式：

第一步：去到 ColorTranslucentBarActivity 的布局文件中，將布局劃分成為標題布局和內容布局兩部分；

第二步：將 ColorTranslucentBarActivity 的根布局顏色設置與標題布局的顏色一致，并將內容布局設置為白色；

<?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"><!--標題布局--><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 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>

第三步：Manifest.xml中為Activity設置主題

<!-- ColorTranslucentBarActivity --><activity android:name=".translucentbar.ColorTranslucentBarActivity"android:label="@string/color_translucent_bar"android:theme="@style/ColorTranslucentTheme" />

至此，第二種的方式所有的操作步驟已經完成，效果如下：

---

注意事項

android:fitsSystemWindows說明

設置布局調整時是否考慮系統窗口（如狀態欄）

通過前面的兩種方式，大家估計會留意到一個地方，就是所有實現 Translucent System Bar 效果的Activity，都需要在根布局里設置 android:fitsSystemWindows=”true” 。設置了該屬性的作用在于，不會讓系統導航欄和我們app的UI重疊，導致交互問題。

設置的效果：

不設置的效果：

想必區別就不用多說了吧。

避免重復設置android:fitsSystemWindows

上述寫法，如果有多個Activity要實現這種效果，就要在每一個布局文件中設置fitSsytemWindows屬性，非常繁瑣切容易忘記。

嘗試方案：
一 ：在theme中加上如下的android:fitsSystemWindows設置：

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

雖然效果上可以實現。但是在布局文件中設置是對View生效，而到了theme進行設置則是對Window生效，會影響到其他組件的位置，比如Toast中的文字會上移等等，所以這種方法不可取。

第二種嘗試： 在代碼中設置。

避免在每個布局文件中都要寫上 android:fitsSystemWindows=”true”，可以在抽象父類中設置即可。

import android.os.Build; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View; import android.view.ViewGroup; import android.view.Window;/*** MyApp** @author Mr.Yang on 2016-02-26 09:32.* @version 1.0* @desc TranslucentBarBaseActivity 抽象類 ，* 繼承此類，可以避免在每個布局文件中寫 android:fitsSystemWindows="true"*/ public abstract class TranslucentBarBaseActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 取消標題supportRequestWindowFeature(Window.FEATURE_NO_TITLE);// 將設置布局文件的操作交給繼承的子類setContentView(getLayoutResId());// 設置android:fitsSystemWindows="true"屬性ViewGroup contentFrameLayout = (ViewGroup) findViewById(Window.ID_ANDROID_CONTENT);View parentView = contentFrameLayout.getChildAt(0);if (parentView != null && Build.VERSION.SDK_INT >= 19) {Log.d("TBBActivity", "SDK_INT:" + Build.VERSION.SDK_INT);parentView.setFitsSystemWindows(true);}}/*** 定義成抽象方法,子類繼承此父類抽象類，必須重寫** @return*/protected abstract int getLayoutResId();}

所有需要實現效果的界面繼承TranslucentBarBaseActivity 父類，并實現 getLayoutResId 抽象方法即可，就可以不用在布局文件中不斷做重復操作了。

總結

• 方式一適用于app中沒有導航欄，且整體的背景是一張圖片的界面；
• 方式二適用于app中導航欄顏色為純色的界面；
• android:fitsSystemWindows設置要在布局文件中，不要到theme中設置,或者在抽象類中設置，子類繼承抽象類即可。

---

參考文章：
http://www.jianshu.com/p/0acc12c29c1b#
感謝D_clock

總結

以上是生活随笔為你收集整理的Translucent System Bars-4.4新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。