Android開發：Translucent System Bar 的最佳實踐

abafomeomn 8年前發布 | 25K 次閱讀 安卓開發 Android開發 移動開發

來自： http://www.jianshu.com/p/0acc12c29c1b

Translucent System Bar 的最佳實踐

近幾天準備抽空總結Android一些系統UI的實踐使用，于是開始動手建了一個庫 AndroidSystemUiTraining ，邊擼代碼邊寫總結

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

Android 4.3豌豆莢

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

中華萬年歷

</div>

QQ音樂

</div>

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

工程簡介

先簡單介紹一下工程的結構，核心部分已經圈出，待我逐一講解

工程結構

</div>

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

  • ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分別用于展示兩種不同實現方式的效果

  • 要在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 。

第一種方式

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

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.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開始需要把顏色設置透明，否則導航欄會呈現系統默認的淺灰色-->
    <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="

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


 
   
  
ImageTranslucentTheme效果


 
就跟中華萬年歷的天氣預報效果界面一樣，系統的整個導航欄都融入了app的界面中，背景圖片填滿了整個屏幕，看起來舒服很多。這里還有一個android:fitsSystemWindows設置需要注意的地方，后面會在細講。接下來看第二種實現。
方式二
相比中華萬年歷，QQ音樂采用的是另外一種實現的方式，它將app的Tab欄和系統導航欄分開來設置。
 
   
  

    QQ音樂效果風格 
  
</div>


由于它的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="


<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></pre> 
 
到此，我們就可以得到和QQ音樂主界面一樣的效果了。


 
   
  
QQ音樂界面實現效果


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


 
 
   
  
沒有fitsSystemWindows設置


 
 注：上面的演示效果，是借助了我的另一個開源項目，詳情請戳： AndroidAlbum 
這樣的話，如果我有10個Activity要實現這種效果，就要在10個布局文件中做設置，非常麻煩。所以，想到一種方法，在theme中加上如下的android:fitsSystemWindows設置：
<item name="android:fitsSystemWindows">true</item>
 
 
發現果真可以了。所有要實現 Translucent System Bar 的Activity，只需要設置了這個theme即可,改起來也很方便。可惜，后來出現了一個BUG，讓我還是得老老實實的回去布局文件中設置。


 
   
  

    Toast文字錯位 
  
</div>


Toast打印出來的文字都往上偏移了。這里也是我疏忽的地方，因為在布局文件中設置是對View生效，而到了theme進行設置則是對Window生效了，兩者在實現上就不一樣了。所以，最終只能改回原來的方式去實現。
實踐總結
最后做一下小小的總結：
     
  
  • 方式一適用于app中沒有導航欄，且整體的背景是一張圖片的界面；
    • 

  
  • 方式二適用于app中導航欄顏色為純色的界面；
    • 

  
  • android:fitsSystemWindows設置要在布局文件中，不要到theme中設置；
    • 

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

 </div>

                    

                    

                        
 本文由用戶 abafomeomn 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                

                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔