请尊重劳动成果，转载注明出处，谢谢！
http://blog.csdn.net/amazing7/article/details/52035324

　上一篇文章Android Material 之CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar 等的说明和使用中，对

"com.android.support:design:24.0.0"

　包下的大部分控件做了说明，加上本文NavigationView和TextInputLayout的使用，design包下的控件使用基本叙述完成。

效果图：

demo下载：http://download.csdn.net/detail/amazing7/9586516

1. NavigationView

　　先说说android上的侧滑菜单的实现，以前都是用的开源项目SlidingMenu，后来用MenuDrawer，最后google终于发现这个东西是开发中常用的控件，于是官方就搞了个drawerLayout实现了侧滑菜单效果，放在support v4的包中。其内部是靠ViewDragHelper实现的，使用起来也非常简单。
　　
　　DrawerLayout有两个子布局，第一个是主界面（宽高都match_parent），第二个就是侧滑菜单的布局了（一般高度match_parent，通过设置layout_gravity为left 或是right 来确定菜单出现的位置）。

　　菜单布局可以是任何布局，我这里是用的NavigationView来实现Material 效果的侧滑菜单。
　　
本例activity_main.xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="cn.fanrunqi.navigation.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
        <!--主布局-->
        <include layout="@layout/main_layout" />
        <!--侧滑菜单-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:background="#ddd"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/navigationview_header"
            app:menu="@menu/navigationview_menu"/>

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

　　可以看出NavigationView布局中有两个自定义属性，app:headerLayout指定菜单的头部布局，可以理解成include进来的子布局，我们根据具体的需求来选择需不需要头部。app:menu来导入其菜单样式。

先来看看头部布局 navigationview_header.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:orientation="horizontal"
    android:background="@drawable/header_bg"
    android:padding="20dp"
    tools:context="cn.fanrunqi.navigation.MainActivity">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:src="@drawable/head"
        app:civ_border_width="1dp"
        app:civ_border_color="#ffffff"
        />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="28dp"
    android:layout_marginLeft="30dp"
    android:textSize="14sp"
    android:text="fanrunqi"
    android:textColor="#fff"
    />
</LinearLayout>

菜单文件 navigationview_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <item
            android:icon="@drawable/ic_account_balance_black_48dp"
            android:title="@string/home"/>
        <item
            android:title="group1">
            <menu>
                <item
                    android:icon="@drawable/ic_favorite_black_48dp"
                    android:title="@string/favourite"/>
                <item
                    android:icon="@drawable/ic_build_black_48dp"
                    android:title="@string/build"/>
            </menu>
        </item>
        <item
            android:title="group2">
            <menu>
                <item
                    android:icon="@drawable/ic_grade_black_48dp"
                    android:title="@string/grade"/>
                <item
                    android:icon="@drawable/ic_help_black_48dp"
                    android:title="@string/help"/>
            </menu>
        </item>
    </group>
</menu>

　　在代码中设置toolBar响应DrawerLayout的状态改变，通过ActionBarDrawerToggle实现DrawerLayout展开关闭的监听。添加navigation的OnNavigationItemSelectedListener监听接口，在点击菜单某个item的时候主界面做出相应的操作。官方说明地址
　　
MainActivity.java的代码：

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.toolBar)
    Toolbar toolBar;
    @InjectView(R.id.drawerLayout)
    DrawerLayout drawerLayout;
    @InjectView(R.id.navigation)
    NavigationView navigation;

    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        toolBar.setTitle("Toolbar");
        toolBar.setTitleTextColor(Color.parseColor("#ffffff"));
        setSupportActionBar(toolBar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

            mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolBar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                toolBar.setTitle("Navigation");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                toolBar.setTitle("Toolbar");
            }
        };
        mDrawerToggle.syncState();
        drawerLayout.addDrawerListener(mDrawerToggle);

        navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            @Override public boolean onNavigationItemSelected(MenuItem menuItem) {
                Snackbar.make(drawerLayout, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

2. TextInputLayout

　　通过在TextInputLayout中包裹一个EditText实现Material 效果的输入框，在设置hint值后每次获得焦点都会有一个动画效果。本例中的使用：

 <android.support.design.widget.TextInputLayout
        android:hint="Username"
        android:id="@+id/til_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            />
    </android.support.design.widget.TextInputLayout>

　对就是这么简单，另外需要注意的是styles.xml文件：

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!--Toolbar颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--状态栏颜色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</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>

• 因为用到了Toolbar所以要在AppTheme使用NoActionBar的主题；

• 这里的菜单键默认是黑色的，通过如上设置可改变颜色。

• 同时注意通过改变colorAccent的值可以改变TextInputLayout的颜色。

谢谢！