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);    }}

执行效果如下图

源码