Android ToolBar 與 DrawerLayout 實作側邊欄抽屜開合完整教學

Android ToolBar 與 DrawerLayout 實作側邊欄抽屜開合完整教學

在 Android 開發中，側邊欄抽屜是常見的導航模式。本文將詳細介紹如何使用 ToolBar 取代傳統 ActionBar，並結合 DrawerLayout 實現側邊欄的開合動畫與圖標切換效果。

一、主題顏色屬性與樣式配置

首先需要理解 Material Design 的顏色屬性對應關係：colorPrimary 為 ToolBar 背景色、colorPrimaryDark 為狀態欄顏色、textColorPrimary 為標題文字顏色、navigationBarColor 為導航欄顏色。這些屬性需在 res/values/styles.xml 中定義，並確保父主題選用 Theme.AppCompat.Light.NoActionBar，以便使用 ToolBar 替代系統 ActionBar。

在 AndroidManifest.xml 中將 Application 或 Activity 的 theme 設為自定義的 AppTheme。

二、ToolBar 宣告與綁定

在 activity_main.xml 中引入 v7 版 ToolBar：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" />

在 MainActivity 中綁定：

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

三、ToolBar 選單項目配置

在 res/menu/ 建立 menu.xml 定義選單項目，需在根節點加入 xmlns:app="https://schemas.android.com/apk/res-auto" 以使用 app:showAsAction 屬性控制圖標顯示方式（always 常駐顯示、never 收進溢位選單）。

透過重寫 onCreateOptionsMenu() 載入選單：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

四、DrawerLayout 側邊欄佈局

建立 custom_drawerlayout.xml，DrawerLayout 至少包含兩個子佈局：第一個為主內容區，第二個為側邊欄（通常用 ListView），並設定 android:layout_gravity="start" 實現從左側滑出。

<android.support.v4.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主內容區 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World"/>
    </LinearLayout>

    <!-- 側邊欄佈局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:layout_gravity="start">
        <ListView
            android:id="@+id/lv_left_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

在 activity_main.xml 中引入：<include layout="@layout/custom_drawerlayout"/>

五、ActionBarDrawerToggle 實現開合動畫與圖標切換

使用 ActionBarDrawerToggle 同步 ToolBar 左上角的「漢堡選單」與「返回箭頭」圖標，並監聽抽屜開合狀態。

核心四步驟：

// 1. 啟用左上角返回圖標
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

// 2. 建立 ActionBarDrawerToggle 實例
mDrawerToggle = new ActionBarDrawerToggle(
    this, mDrawerLayout, toolbar,
    R.string.drawer_open, R.string.drawer_close);

// 3. 同步狀態（實現圖標切換與抽屜開合同步）
mDrawerToggle.syncState();

// 4. 設定抽屜監聽器
mDrawerLayout.setDrawerListener(mDrawerToggle);

若需在開合時動態修改 ToolBar 標題，可覆寫 onDrawerOpened() 與 onDrawerClosed()：

mDrawerToggle = new ActionBarDrawerToggle(...) {
    @Override
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
        getSupportActionBar().setTitle("選單開啟");
        invalidateOptionsMenu();
    }
    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
        getSupportActionBar().setTitle(mTitle);
        invalidateOptionsMenu();
    }
};

六、處理 ToolBar 選單點擊事件

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.item_search:
            Toast.makeText(this, "搜尋被點擊", Toast.LENGTH_SHORT).show();
            break;
        case R.id.item_share:
            Toast.makeText(this, "分享被點擊", Toast.LENGTH_SHORT).show();
            break;
        case R.id.item_more:
            Toast.makeText(this, "更多被點擊", Toast.LENGTH_SHORT).show();
            break;
    }
    return super.onOptionsItemSelected(item);
}