android 自定義狀態欄和導航欄分析與實現

King14T 7年前發布 | 15K 次閱讀安卓開發 Android開發移動開發

效果

android 4.4之后，系統是支持自定義狀態欄和導航欄的，舉個最典型的例子就是bilibili客戶端了（iOS版本和android版本能用兩套完全不一樣符合各自系統的設計ui，良心啊～），頂部狀態欄為粉色，底部導航欄為半透明色：

接著QQ最新的版本6.2也使用了狀態欄透明風格，但是出來的效果在不同版本，不同手機上，顯示的效果真是差異很大（4.3版本是無法使用狀態欄透明風格的，只是放出來做個對比）：

更新，QQ的6.2.1版本已經重新換成藍色的bar了。

這個我也不知道到底是怎么適配的，希望有人給解答一下。

實現與分析

API 19~20

接下來分析一下怎么自定義狀態欄和導航欄，這個在21版本之前和之后可以使用不同的方式來實現，先看看19~20版本的適配，狀態欄和導航欄透明：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Activity_translucent_status_bar" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
    <style name="Activity_translucent_navigation_bar" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

從代碼看到，狀態欄透明主要是使用android:windowTranslucentStatus屬性，導航欄透明主要是使用android:windowTranslucentNavigation屬性。當這個屬性設置為true之后，系統欄會變成半透明，并且應用的內容區域也會擴充到系統欄中：

這樣目的是達到了，但是效果肯定是不行的，怎么解決呢？來學習一下bilibili和QQ的布局就了解了：

bilibili

從圖片中可以很清楚的看到bilibili和QQ都是在頂部放置了一個和status bar一樣高度，自定義顏色的view，status bar高度的獲取方式：

int id = getResources().getIdentifier("status_bar_height", "dimen", "android");
int height = getResources().getDimensionPixelOffset(id);

這樣思路就很清楚了，所有的activity繼承自一個基類activity，基類activity的布局文件進行類似的處理，最后也是能夠達到和bilibili客戶端一樣的效果（吐槽一下華為p6的狀態欄黑色陰影真心難看）：

github上也有相關庫可以實現一樣的效果，但是原理都差不多。

API 21~++

21版本和21版本之后，系統增加了更多的選項用來提供用戶修改顏色：

所以可以通過android:colorPrimaryDark屬性來使狀態欄變成所需的顏色，android:navigationBarColor屬性來改變導航欄所需要的顏色：

<item name="android:colorPrimaryDark">@color/bar_color</item>
<item name="android:navigationBarColor">@color/half_black_transparent</item>

最后效果：

貌似這個導航欄是無法使用透明顏色的，那么導航欄透明的方案這么做是行不通的，只能繼續使用19版本的方案了：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Activity_translucent_status_bar" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimaryDark">@color/bar_color</item>
    </style>
    <style name="Activity_translucent_navigation_bar" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

最后也當然需要在頂部添加一個status bar高度的自定義view了，最后不同版本，不同機型適配效果：