Material DesignのMaterial Menuサイドスライドメニュー


転載は出典を明記してください.http://blog.csdn.net/wu_wxc/article/details/47210777本文は【呉孝城のCSDNブログ】から
ToolBarにMaterial Menuの編集が必要なファイルを次の図に書きます.
Material Design之Material Menu侧滑菜单_第1张图片
まず最初に書きますxmlとvalues-v 21styles.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と左のメニューをそれぞれ2つの異なるレイアウトにダウンロードし、メインレイアウトに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);
    }

}

実行効果は下図のようです
Material Design之Material Menu侧滑菜单_第2张图片
ソースコード