Android 4.4 以上實現透明導航欄和狀態列 Translucent system bar
第一種方式
第一種方式,需要做下面三步設定
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>
到此,第一種實現方式完成,大家可以看看下面的效果
ImageTranslucentTheme效果
就跟中華萬年曆的天氣預報效果介面一樣,系統的整個導航欄都融入了app的介面中,背景圖片填滿了整個螢幕,看起來舒服很多。這裡還有一個android:fitsSystemWindows設定需要注意的地方,後面會在細講。接下來看第二種實現。
方式二
相比中華萬年曆,QQ音樂採用的是另外一種實現的方式,它將app的Tab欄和系統導航欄分開來設定。
QQ音樂效果風格
由於它的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音樂主介面一樣的效果了。
QQ音樂介面實現效果
到此,就大體介紹完了 Translucent System Bar 的兩種實現方式了。
android:fitsSystemWindows的“踩坑”
通過前面的兩種方式,大家估計會留意到一個地方,就是所有實現 Translucent System Bar 效果的Activity,都需要在根佈局裡設定 android:fitsSystemWindows="true" 。設定了該屬性的作用在於,不會讓系統導航欄和我們app的UI重疊,導致互動問題。這樣說可能比較抽象,看看下面兩個效果圖的對比就知道了。
有fitsSystemWindows設定
沒有fitsSystemWindows設定 還有需要注意用到Translucent system bar時,activity的頂層佈局必須是基本的佈局,比如,如果直接用material design裡面的CoordinatorLayout做頂層佈局時,會出現一些異常問題。