Android Material Design控件学习(二)——NavigationView的学习和使用

openb0y 8年前

来自: http://www.cnblogs.com/JohnTsai/p/5172056.html

前言

上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件——NavigationView。

正如其名,NavigationView,导航View。一般我们用它和DrawerLayout实现抽屉式导航设计,效果如下图。

学习

文档地址: http://developer.android.com/reference/android/support/design/widget/NavigationView.html

通过学习官方文档,我们知道NavigationView继承自FrameLayout。一般用于应用的导航菜单,菜单的内容来自于menu文件。NavigationView通常放置在DrawerLayout内部。

<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_width="match_parent"   android:layout_height="match_parent"   android:fitsSystemWindows="true">         <!-- Your contents -->         <android.support.design.widget.NavigationView   android:id="@+id/navigation"   android:layout_width="wrap_content"   android:layout_height="match_parent"   android:layout_gravity="start"   app:menu="@menu/my_navigation_items"   app:headerLayout="@layout/nav_header_main" />   </android.support.v4.widget.DrawerLayout>

其中:

  • android:fitsSystemWindows 的值用于设置状态栏透明化与否。
  • android:layout_gravity 可设置抽屉,也就是NavigationView从左边或是右边打开。
  • app:menu 用于设置菜单内容的xml布局。
  • app:headerLayout 用于设置NavigationView的HeaderView的xml布局文件。

用法

下面我们通过模仿实现上图的效果来学习NavigationView的基本用法。

  1. 引用SupportDesign库

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

2.编写布局代码

首先编写Activity的布局代码:

<?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"   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:openDrawer="start">     <!-- 内容布局 -->      <include   layout="@layout/app_bar_main"   android:layout_width="match_parent"   android:layout_height="match_parent" />     <!-- 菜单布局NavigationView headerLayout设置HeaderView menu设置菜单 -->      <android.support.design.widget.NavigationView   android:id="@+id/nav_view"   android:layout_width="wrap_content"   android:layout_height="match_parent"   android:layout_gravity="start"   android:fitsSystemWindows="true"   app:headerLayout="@layout/nav_header_main"   app:menu="@menu/activity_main_drawer" />    </android.support.v4.widget.DrawerLayout>

编写NavigationView中的menu的xml文件

<?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android">        <group android:checkableBehavior="none">          <item   android:id="@+id/nav_me"   android:title="我"   android:icon="@mipmap/ic_mine_gray_24"/>          <item   android:id="@+id/nav_friend"   android:title="好友"   android:icon="@mipmap/ic_friends_gray_24"/>          <item   android:id="@+id/nav_notification"   android:title="通知"   android:icon="@mipmap/ic_notification_gray_24"/>          <item   android:id="@+id/nav_message"   android:title="私信"   android:icon="@mipmap/ic_messages_gray_24"              />      </group>      <group android:checkableBehavior="none"   android:id="@+id/group_manage">          <item   android:id="@+id/nav_manage"   android:title="应用管理"   android:icon="@mipmap/ic_app_management_gray_24"/>      </group>     <group   android:checkableBehavior="none"   android:id="@+id/group_settings">         <item android:id="@+id/nav_theme"   android:title="主题风格"/>         <item android:id="@+id/nav_night"   android:title="夜间模式"/>         <item android:id="@+id/nav_setting"   android:title="设置"/>         <item android:id="@+id/nav_suggestion"   android:title="意见反馈"/>         <item android:id="@+id/nav_about"   android:title="关于"/>       </group>  </menu>

注意: 需要给group设置id,才会出现分割线。参考 http://stackoverflow.com/questions/30625280/how-to-create-a-simple-divider-in-the-new-navigationview

3.实现onNavigationItemSelected接口来处理抽屉菜单项的选中事件。

       NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);          navigationView.setNavigationItemSelectedListener(this);            mTextView = (TextView) findViewById(R.id.textView);        @SuppressWarnings("StatementWithEmptyBody")      @Override      public boolean onNavigationItemSelected(MenuItem item) {          int id = item.getItemId();          String string = null;          switch (id){              case R.id.nav_me:                  string = "我";                  break;              case R.id.nav_about:                  string = "关于";                  break;              case R.id.nav_friend:                  string = "好友";                  break;              case R.id.nav_manage:                  string = "通知";                  break;              case R.id.nav_message:                  string = "私信";                  break;              case R.id.nav_night:                  string = "夜间模式";                  break;              case R.id.nav_notification:                  string = "通知";                  break;              case R.id.nav_setting:                  string= "设置";                  break;              case R.id.nav_suggestion:                  string = "意见反馈";                  break;              case R.id.nav_theme:                  string = "主题风格";                  break;          }          if (!TextUtils.isEmpty(string))              mTextView.setText("你点击了"+string);          DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);          drawer.closeDrawer(GravityCompat.START);          return true;      }

运行效果

完整代码我已经上传到我的Github中,欢迎各位star&fork。

地址 https://github.com/JohnTsaiAndroid/NavigationViewDemo

如果你觉得这篇文章对你的学习有所帮助,不妨推荐一下,也可以关注我的Github https://github.com/JohnTsaiAndroid

</div>