Material Design-UI之Toolbar+DrawerLayout

一、關於側滑菜單

以前做過的側滑菜單就是通過第三方，slidingmenu可以是實現類似於QQ的側滑效果，但是還是有些bug沒修復好，Material Design提供的toolbar與drawerlayout相結合便有了動畫效果比較好的菜單按鈕動畫，加上Material Design提供的圖片，使得界面有了很大的提升，我們來看看如何實現這樣的效果

二、toolbar的簡單使用

使用include讓佈局看起來簡潔

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--Toolbar-->
    <include layout="@layout/custom_toolbar" />
    <!--DrawerLayout-->
    <include layout="@layout/custom_drawerlayout" />

</LinearLayout>

toolbar的佈局設置

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tl_custom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ToolbarPopupTheme">

</android.support.v7.widget.Toolbar>

toolbar的主題設置popupTheme,避免點擊菜單時彈出的pop window遮擋住菜單而自己定義樣式

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
    <!--<item name="android:colorBackground">#000000</item> 也可以設置背景色以及menu中的其他屬性-->
    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <item name="overlapAnchor">false</item>  <!--設置不覆蓋錨點-->
</style>

drawerLayout的佈局設置

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://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">

        <include layout="@layout/activity_threelist"/>

    </LinearLayout>
    <!--側滑菜單-->
    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:background="@color/color_drawder"
        android:layout_gravity="start"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center_vertical">

這裏的側滑菜單中設置了一個屬性gravity爲start，表示這裏設置爲抽屜可以側滑，下面的就沒有貼出來，因爲是自己填充的佈局，沒有必要了。主頁的佈局即是include中的佈局。下面來看看代碼中的設置：

private void initToolData() {
    toolbar.setTitle("點檢");//設置標題
    toolbar.setTitleTextColor(Color.parseColor("#ffffff"));//設置標題顏色
    setSupportActionBar(toolbar);
    getSupportActionBar().setHomeButtonEnabled(true);//設置返回鍵可用
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    toolbar.setOnMenuItemClickListener(menuClickListener);
    //創建返回鍵，並實現打開關/閉監聽
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name, R.string.app_name) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);

        }
    };
    mDrawerToggle.syncState();
    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

最後antionBarDrawerToggle必須寫，用於綁定toolbar和抽屜佈局，這樣就大致實現了側滑菜單的效果和toolbar的菜單動畫。最後忘了附上menu的菜單佈局

/**
 * 這裏將toolbar裏面的菜單鍵顯示出來
 * @param menu
 * @return
 */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.toolbar_menu,menu);
    return super.onCreateOptionsMenu(menu);
}

設置如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_readcard"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/ic_input"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="關於"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="設置"
        app:showAsAction="never" />

</menu>