Material Design学习之滑动菜单——DrawerLayout 和NavigationView（2）

滑动菜单（DrawerLayout）

介绍：

DrawerLayout是一个布局，在布局中允许放两个直接子控件，第一个只主屏幕中显示的内容，第二个是滑动菜单中显示的内容。修改activity_main.xml中的代码：

  
  xml version="1.0" encoding="utf-8"?>
  <android.support.v4.widget.DrawerLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/drawer_layout"
      android:layout_height="match_parent"
      android:layout_width="match_parent">
      <RelativeLayout
      android:id="@+id/activity_main"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <android.support.v7.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:id="@+id/toolbar"
          android:background="?attr/colorPrimary"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
      </android.support.v7.widget.Toolbar>
  </RelativeLayout>
      <TextView
          android:layout_gravity="start"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="This is Menu"
          android:textSize="30sp"
          android:background="#FFF"
          />
  </android.support.v4.widget.DrawerLayout>

第二个控件中必须指定layout_gravity属性，告诉DrawerLayout滑动菜单实在屏幕的左边还是右边。start会根据系统语言来判断。

在ToolBar菜单中添加导航按钮，将滑动菜单展示出来：

  
  protected void onCreate(Bundle savedInstanceState) {
   ...
  ​
      drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
      ActionBar actionBar= getSupportActionBar();
      if(actionBar!=null){
        //            显示导航按钮
              actionBar.setDisplayHomeAsUpEnabled(true);
  //            设置导航图标，默认为一个返回按钮
              actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);
  ​
      }
  }
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()){
          case android.R.id.home:
              drawerLayout.openDrawer(GravityCompat.START);
         ...
      }
      return  true;
  }

ToolBar 最左的按钮叫HomeAsUp,默认为一个返回的按钮，含义是上一个图标，id永远为Android.R.id.home;

NavigationView

在滑动菜单页面定制任意布局；他是Design Support库中提供的一个控件，使用方法：

1.将库导入项目：

打开app/build.gradle文件，在dependencies闭包中添加如下内容：

  dependencies {
      compile fileTree(dir: 'libs', include: ['*.jar'])
      androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
          exclude group: 'com.android.support', module: 'support-annotations'
      })
      compile 'com.android.support:appcompat-v7:25.0.1'
     compile 'com.android.support:design:25.0.1'
      compile 'de.hdodenhof:circleimageview:2.1.0'
      testCompile 'junit:junit:4.12'
  ​
  }

CircleImageView可以用来轻松实现图片圆形化功能。

2、准备menu和headerLayout。menu用来显示具体的图标项，headerLayout用来在NavigationView中显示头部布局；

在menu文件夹下建立nav_menu.xml文件，代码如下：

   version="1.0" encoding="utf-8"?>
  <menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:checkableBehavior="single">
      <item android:id="@+id/nav_call"
          android:icon="@mipmap/ic_launcher"
          android:title="Call"/>
      <item android:id="@+id/nav_friends"
          android:icon="@mipmap/ic_launcher"
          android:title="Friends"/>
      <item android:id="@+id/nav_mail"
          android:icon="@mipmap/ic_launcher"
          android:title="Mail"/>
      <item android:id="@+id/nav_task"
          android:icon="@mipmap/ic_launcher"
          android:title="Task"/>
      group>
  menu>

在layout文件夹下新建nav_header.xml文件，代码如下：

   version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="?attr/colorPrimary">
      <de.hdodenhof.circleimageview.CircleImageView
          android:id="@+id/icon_image"
          android:layout_width="60dp"
          android:layout_height="60dp"
          android:src="@mipmap/ic_launcher"
          android:layout_centerInParent="true"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/username"
          android:layout_alignParentBottom="true"
          android:text="[email protected]"
          android:textColor="#FFF"
          android:textSize="14sp"/>
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/mail"
          android:layout_alignParentTop="true"
          android:text="Tony Green"
          android:textColor="#FFF"
          android:textSize="14sp"/>
  ​
  RelativeLayout>

3、修改activity_main.xml中的代码：

  
     ...
  
      
              app:menu="@menu/nav_menu"
              app:headerLayout="@layout/nav_header"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:layout_gravity="start"
              android:id="@+id/nav_view" />

4、添加事件：NavigationView view=(NavigationView)findViewById(R.id.nav_view);
view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        drawerLayout.closeDrawers();
        return true;
    }
});