MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

• 本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果，NavigationView是android-support-design包下的一个控件，该包下还有AppBarLayout、CoordinatorLayout、FloatingActionButton、SnackBar、TabLayout、TextInputLayout等控件，也是Google在Android 5.x推荐规范式使用的控件。本系列将逐一介绍每个控件的使用。。。

  好了，先来看看本文最终的效果图吧！

  它把标题栏也遮住了，正是符号Google的材料设计思想。。。

  现在我们分几步说说怎么实现这个效果吧：

  一、首先就需要添加包依赖，废话就不说了，上图

  

  二、主布局：activity_main.xml

   

  <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/drawer_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      tools:context=".MainActivity">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">
  
          <android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="#30469b"/>
          <!--内容显示布局-->
          <FrameLayout
              android:id="@+id/frame_content"
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>
      </LinearLayout>
  
      <android.support.design.widget.NavigationView
          android:id="@+id/navigation_view"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_gravity="left"
          app:headerLayout="@layout/navigation_header"
          app:menu="@menu/drawer" />
  </android.support.v4.widget.DrawerLayout>
  

  
  其中在NavigationView布局中，需要给NavigationView设置app:headerLayout和app:menu,那是什么意思呢？

   

  headerLayout就是给导航栏增加一个头部Layout。

  menu就是对应菜单项的选择条目。

  三、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件

  navigation_header.xml

   

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:background="#30469b">
      <TextView
          android:id="@+id/header_tv"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:text="HeaderLayout"
          android:textColor="#ffffff"
          android:textSize="25sp" />
  </RelativeLayout>

  drawer.xml

   

   

  <?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/item_one"
              android:icon="@mipmap/icon"
              android:title="我的动态"></item>
          <item
              android:id="@+id/item_two"
              android:icon="@mipmap/icon"
              android:title="我的留言"></item>
          <item
              android:id="@+id/item_three"
              android:icon="@mipmap/icon"
              android:title="附近的人"></item>
      </group>
  </menu>

  
  四、这时候开始写代码了，也很简单：

   

  MainActivity.java

   

  public class MainActivity extends ActionBarActivity {
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          //设置ToolBar
          final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
          mToolbar.setTitleTextColor(Color.WHITE);
          setSupportActionBar(mToolbar);
  
          //设置抽屉DrawerLayout
          final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
          ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
                  R.string.drawer_open, R.string.drawer_close);
          mDrawerToggle.syncState();//初始化状态
          mDrawerLayout.setDrawerListener(mDrawerToggle);
  
          //设置导航栏NavigationView的点击事件
          NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
          mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
              @Override
              public boolean onNavigationItemSelected(MenuItem menuItem) {
                  switch (menuItem.getItemId()) 
                  {
                      case R.id.item_one:
                          getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentOne()).commit();
                          mToolbar.setTitle("我的动态");
                          break;
                      case R.id.item_two:
                          getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentTwo()).commit();
                          mToolbar.setTitle("我的留言");
                          break;
                      case R.id.item_three:
                          getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentThree()).commit();
                          mToolbar.setTitle("附近的人");
                          break;
                  }
                  menuItem.setChecked(true);//点击了把它设为选中状态
                  mDrawerLayout.closeDrawers();//关闭抽屉
                  return true;
              }
          });
      }
  }

  
  好了，做完上面四步，恭喜，成功了！！！喜欢点个赞吧。。。

  源码地址：http://www.it165.net/uploadfile/files/2015/0712/navigationView.rar

  
  

延伸阅读：

• 1、Android滑动菜单实现 仿天天动听侧滑效果
• 2、Android自定义组件系列【3】自定义ViewGroup实现侧滑
• 3、Android自定义组件系列之自定义ViewGroup实现双侧滑动
• 4、Android侧滑菜单DrawerLayout(抽屉布局)实现
• 5、slidingmenu+fragment实现常用的侧滑效果（包括Fragment状态的保存）
• 6、自定义ListView 实现Item侧滑删除及侧滑出菜单效果
• 7、Android毛玻璃效果侧滑菜单

• 8、Android案例分享仿QQ5.0侧滑菜单ResideMenu

转自：http://www.it165.net/pro/html/201507/46841.html