[譯] 5 分鐘讓 Drawer 在狀態列下可見

donghuan1發表於2019-05-07

你也許聽過谷歌最新的設計理念 Material Design （“質感設計”）規範，可以讓你的抽屜式導航欄跨越整個螢幕，包括狀態列，並且讓抽屜後的所有控制元件以灰暗的網格形式可見。

然而，許多應用開啟抽屜式導航欄時看來是這樣的

[譯] 5 分鐘讓 Drawer 在狀態列下可見

這裡將示範如何把這些元素改造成上面說到的規範。

擴充套件你的主題

你可能已經給包含抽屜的 Activity 定義了一個樣式。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>  
複製程式碼

第一步,建立一個擴充套件自AppTheme的新Theme

vaules/styles.xml

<style name="AppTheme.NoActionBar">  
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
複製程式碼

v21/styles.xml

<style name="AppTheme.NoActionBar">  
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>  
複製程式碼

並且確保你的 Activity 指定使用了這個 theme，比如

<activity  
    android:name="MyDrawerNavActivity"
    android:theme="@style/AppTheme.NoActionBar"
複製程式碼

配置 DrawerLayout 控制元件

第二步，到你定義DrawerLayout控制元件的地方，設定insetForegroundColor (如果你不想控制 ScrimInsetLayout的顏色，你也可以不設定)。並設定好 fitsSystemWindow 屬性值

<android.support.v4.widget.DrawerLayout  
    ...
    android:fitsSystemWindows="true"
    app:insetForeground="@color/inset_color"
    >
複製程式碼

看起來這樣

[譯] 5 分鐘讓 Drawer 在狀態列下可見

當然，如果一會你想在程式碼裡改變狀態列的顏色或ScrimInsetLayout的顏色，你可以在DrawerLayout中通過setters方法來獲取並改變。

drawerLayout.setStatusBarBackgroundColor(ContextCompat.getColor(this, R.color.wierd_green));  

drawerLayout.setScrimColor(ContextCompat.getColor(this, R.color.wierd_transparent_orange));  
複製程式碼

感謝你的閱讀，如果在我分享的內容裡，你有更好的方法來實現，那麼在評論裡更正，感激不盡。

* 以下新增於 6月5, 2016*

如果你繼承 DrawerLayout

Android Support 相容包(AppCompat) 會在 DrawerLayout 里加入一個 android.support.design.internal.ScrimInsetsFrameLayout, 但如果你使用繼承自 DrawerLayout 的自定義控制元件則不會這麼做。

如果你繼承了DrawerLayout 但是沒有加入ScrimInsetsFrameLayout，你需要這麼做：

activity_with_drawer_layout.xml

<com.myproject.views.MyDrawerLayout  
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <fragment
        android:id="@+id/left_drawer"
        android:name="com.myproject.fragments.NavigationFragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
         />

</com.myproject.views.MyDrawerLayout>  
複製程式碼

在你的抽屜佈局檔案中加入一個 ScrimInsetsFrameLayout，如：

navigation_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>  
<android.support.design.internal.ScrimInsetsFrameLayout  
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    >

    <!--- content of drawer here --->

</android.support.design.internal.ScrimInsetsFrameLayout>複製程式碼

相關文章