如何使用DrawerLayout

如何使用DrawerLayout

如果要使用左側選單，早期必須掛上第三方才可以使用，版本多又雜，遇到要客製化可能還需要改大段程式碼，Google 推出了DrawerLayout 可以讓你很方便建立左側選單。

完整程式碼

你可以到 GitHub 上面觀看或下載完整的程式碼。

程式碼說明

如果你想要使用一個 DrawerLayout，可以透過 xml 進行宣告，可以看到 DrawerLayout 分成兩個區塊，一塊是我們的主畫面，另外一塊就是從左側拉出來的畫面，為了方便辨識，我們將主畫面宣告成為淡藍色，而左側拉出來的畫面宣告成為綠色。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <RelativeLayout
        android:background="#d3f5f6"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <RelativeLayout
        android:background="#84b102"
        android:layout_width="200dp"
        android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>





這樣就可以看到我們的 APP 可以從左側拉出 DrawerLayout 了，但是很奇怪的是竟然是綠色的畫面，原來我們左側要設定一個參數為android:layout_gravity="start"才可以讓 DrawerLayout 從最左邊跑出來。






你會好奇，那麼這個參數還可以進行什麼設定，我們試著調整成android:layout_gravity="right"，結果不意外的它從右側拉出來。





那麼你又會好奇，這個參數可以有哪些設定，根據官方文件顯示，一共有兩種模式，不是左邊就是右邊拉出來，但是卻有四種設定方式，分別為:

從左邊出來

  • android:layout_gravity="left"
  • android:layout_gravity="start"

從右邊出來

  • android:layout_gravity="right"
  • android:layout_gravity="end"

這時候你會疑惑，為什麼 DrawerLayout 會被蓋在 Toolbar 下方，能不能直接蓋在 Toolbar 上面呢？答案是可以的，因為早期 Google 是使用 ActionBar 的方式來處理，但是後來提供了 Toolbar 讓人使用，所以如果你想要搭配 DrawerLayout，則必須先將 Activity theme 上面的 ActionBar 設定取消，我們打開 AndroidManifest.xml 這個檔案，可以看到以下的程式碼。

<application
    //...
    android:theme="@style/AppTheme">

</application>

將其中的 AppTheme 改成 Theme.AppCompat.Light.NoActionBar 。

<application
    //...   android:theme="@style/Theme.AppCompat.Light.NoActionBar">

</application>

接著回到我們的 main_activity.xml 裡面，將裡面的佈局加入 Toolbar 這個元件。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <RelativeLayout
        android:background="#d3f5f6"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:layout_alignParentTop="true"
            android:id="@+id/toolbar"
            android:background="#4076be"
            android:layout_height="60dp"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize" />
    </RelativeLayout>
    <!-- The navigation drawer -->
    <RelativeLayout
        android:layout_gravity="end"
        android:background="#84b102"
        android:layout_width="200dp"
        android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>

接下來執行看看效果如何？結果出現奇怪的畫面了，變成 ActionBar 跟 Toolbar 並存了。






所以回到我們的主程式 MainActivtiy.java 這邊，加入了兩行程式碼，就可以看到 Toolbar 將 ActionBar 取代掉了。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);






結果發現字的顏色是黑的有點醜，想改成白色的，只要再多加一行程式碼就可以改成白色的了。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      toolbar.setTitleTextColor(Color.parseColor("#ffffff"));
setSupportActionBar(toolbar);






那如果我們想要突破天際，讓 DrawerLayout 蓋到更高的 StatusBar呢？其實只需要設好簡單的參數就可以達到這個效果了，首先，我們打開 style.xml 增加一個自定義的 Theme ，接著設定好下面兩行程式碼就可以了。

<style name="DrawerStyle" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:fitsSystemWindows">true</item>
</style>

接著打開 AndroidMenifest.xml 將我們剛剛改的 Theme 替換成這個自定義的 Theme 就大功告成了。

<application
    //...
    android:theme="@style/DrawerStyle">

</application>





這樣就是一個簡單的 DrawerLayout 範例了。