侧滑-导航栏设计风格NavigationDrawer的使用

 我们做抽屉菜单的时候，左边滑出来的那一部分的布局都是由我们自己来定义的，自己写的话，花点时间也能做出来好看的侧拉菜单，但总是要耗费时间，于是Google在5.0之后推出了NavitationView，就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu，这样的效果如果我们要自己写肯定也能写出来，但是没有必要，既然Google提供了这个控件，那我们就来看看这个控件要怎么用吧。

使用之前还需要添加依赖，还需要隐藏原本的actionBar,使用toolbar替换掉：

compile 'com.android.support:design:24.2.0'

MainActivity.java

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.Toast;

/**
 * 用android.support.v7.widget.Toolbar替换ActionBar,所以需要隐藏原有的标题头:
        方法1.设置App主题为:Theme.AppCompat.Light.NoActionBar
        方法2. supportRequestWindowFeature(Window.FEATURE_NO_TITLE)去掉了默认的导航栏（如果是继承了AppCompatActivity的，
               如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) ）
 */
public class MainActivity extends AppCompatActivity {

    /**
     * 导航栏布局对象,包括布局头与菜单项,左侧侧滑的内容
     */
    private NavigationView navigationView;

    /**
     * 抽屉布局
     */
    private DrawerLayout drawerLayout;

    /**
     * 替代活动条的toolBar
     */
    private Toolbar toolBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉默认的导航栏,因为要显示ToolBar
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        navigationView = (NavigationView) findViewById(R.id.navigation);
        toolBar = (Toolbar) findViewById(R.id.toolbar);

        //让图片显示他本身的颜色,不然图片都会为灰色(没选中的情况下,菜单布局中有说明)
        navigationView.setItemIconTintList(null);
        //获取头布局文件,为头布局中的控件设置单击事件
        View headerView = navigationView.getHeaderView(0);
        headerView.findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了头布局(图片)", Toast.LENGTH_SHORT).show();
            }
        });
        //导航页里菜单项的单击事件
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.menu1:
                        Toast.makeText(MainActivity.this, "点击了选项1", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                drawerLayout.closeDrawers(); // 关闭导航菜单
                return true;
            }
        });

        //实现Toolbar与DrawLayout动画的联动
        toolBar.setTitle("toolbar的title");
        setSupportActionBar(toolBar);//替换默认的活动条
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示返回键
        getSupportActionBar().setHomeButtonEnabled(true);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolBar,0,0);
        drawerLayout.addDrawerListener(toggle);//为抽屉滑出的监听添加触发器
        toggle.syncState();//加上同步
    }

}

布局文件activity_main.xml

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

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffcccc"
        android:id="@+id/toolbar">
    </android.support.v7.widget.Toolbar>

    <!-- 侧滑菜单的布局  打个id就会自动出现xmlns属性
      注意事项：
          1.主内容视图一定要是DrawerLayoout的第一个子视图
          2.主内容视图宽度和高度匹配父视图，即 match_parent
          3.必须显示指定抽屉视图(如ListView)的layout_gravity属性
              1)、属性设为"start"时，从左向右滑出菜单
              2)、属性设为"end"时，从右向左滑出菜单
              3)、不推荐使用"left"和"right"
          4.抽屉视图的宽度以dp为单位，请不要超过320dp(为了总能看到一些主内容)-->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 主视图 -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="主视图"
                android:textSize="40sp"
                android:gravity="center"/>

        </FrameLayout>

        <!-- 左侧的侧滑菜单
                layout_gravity="start"代表侧滑在左边
                android:choiceMode="singleChoice" 单选模式
             注意其中NavigationView的两个属性
                 app:headerLayout接收一个layout，作为导航菜单顶部的头布局，可选项。
                 app:menu接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。
                但也可以在运行时动态改变menu属性。

                1.app:itemBackground="@color/colorAccent"设置每一个item的背景颜色
                2.app:itemTextColor=""设置每个item的文字颜色(所有的菜单项颜色都会变)-->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/main_menu"
            app:itemTextColor="#000000"/>

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

侧滑菜单中的头布局drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:id="@+id/imageView"
        android:gravity="center"
        android:background="@drawable/title_bg"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

View Code