如何使用Toolbar(Actionbar)+DrawerLayout

情境

Actionbar是一個很常用的工具, 幾乎每個app都會使用它
Actionbar早期也有很多第三方可以支援, 但是一樣過於複雜
Android也經歷過幾次Actionbar改版, 最後開發出一個元件-Toolbar
用來取代Actionbar
前面寫過如何使用DrawerLayout
一般來說都會搭配DrawerLayout來使用

程式碼說明

首先把DrawerLayout的xml改成下面這樣。

<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:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="#fff000"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize" />
    </RelativeLayout>
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#99999999"/>
</android.support.v4.widget.DrawerLayout>

我們在主畫面區塊的內部加入了一Toolbar的元件,
為了方便顯示因此讓它以黃色呈現,

Android api v22以後, 以用AppCompatActivity來取代Actionbaractivity,
讓你toolbar使用上更方便。

public class MainActivity extends AppCompatActivity 

Gradle記得import

compile 'com.android.support:appcompat-v7:22.2.0'

由於是要把toolbar塞進actionbar
所以要把actionbar取消掉,在style那邊改成

        <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

onCreate部分

toolbar = (Toolbar) findViewById(R.id.toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // Handle the menu item
            return true;
        }
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.menu_main);
setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

畫面長這樣

還可以使用menu

接下來我們要把DrawerLayout跟Toolbar綁在一起

DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
        @Override
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);

    }
    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
    }
};
mActionBarDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

可以看到我們在DrawerLayout內設定了一個事件, 並且把他跟toolbar的物件綁起來,
這樣一來只要按左上角的home鍵, 就可以把DrawerLayout打開或關閉了。

發現綁定以後home的”箭頭”就變成了”三”

為了可以看到home的動畫, 我們將DrawerLayout背景設為半透明,
按下home鍵。

慢慢地旋轉。

快變成箭頭了。

成功打開了DrawerLayout。

這樣就簡單完成了我們的toolbar了。

補充:
如果要改變toolbar的文字可以加上一行

getSupportActionBar().setTitle("aaa");

如果想在home button旁邊加上icon則加入

getSupportActionBar().setLogo(R.drawable.abc_ab_share_pack_mtrl_alpha);

效果如下

程式碼