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>