Material Design之Material Menu侧滑菜单

转载请标明出处：http://blog.csdn.net/wu_wxc/article/details/47210777
本文出自【吴孝城的CSDN博客】

在ToolBar上写Material Menu需要编辑到的文件如下图

首先先写values\styles.xml和values-v21\styles.xml文件还有color文件

values\styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 状态栏颜色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- toolbar颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--返回键样式-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
    </style>
    <!--设置打开和关闭菜单的按钮颜色-->
    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

values-v21\styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:navigationBarColor">@color/colorPrimary</item>
    </style>
</resources>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimaryDark">#8ED6E9</color>
    <color name="colorPrimary">#ff12c6f2</color>
    <color name="overflowTextColor">#9e9e9e</color>
    <color name="menu_background">#33CC52</color>
</resources>

然后是布局

为了代码的可重用性，我们把toolbar和左边的菜单分别下载两个不同的布局里，然后在在主布局里include进去

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>

注意在左边菜单布局里要写

android:layout_gravity="start"

drawer_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主布局-->
    <LinearLayout
        android:id="@+id/id_main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="吴孝城"
            android:textSize="30sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="www.wuxiaocheng.cn"
            android:textSize="30sp" />
    </LinearLayout>

    <!-- 左边菜单-->
    <LinearLayout
        android:id="@+id/id_left_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/menu_background"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="吴孝城"
            android:textSize="30sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="www.wuxiaocheng.cn"
            android:textSize="30sp" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar"/>
    <include layout="@layout/drawer_layout"/>

</LinearLayout>

写完后就是Java程序了

MainActivity.java

package cn.wuxiaocheng.drawerlayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.View;


public class MainActivity extends ActionBarActivity {

    private Toolbar toolbar;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mdrawerlayout;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        mdrawerlayout = (DrawerLayout) findViewById(R.id.id_drawer);

        toolbar.setTitle("DrawerLayout");       //设置标题
        toolbar.setTitleTextColor(Color.parseColor("#ffffff"));    //设置标题颜色
        setSupportActionBar(toolbar);

        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //创建返回，实现打开和关闭菜单的监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mdrawerlayout, toolbar, R.string.tv_open, R.string.tv_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerToggle.syncState();
        mdrawerlayout.setDrawerListener(mDrawerToggle);
    }

}

执行效果如下图

源码