Android Material Design控件学习(二)——NavigationView的学习和使用-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介:

前言

上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件——NavigationView。
正如其名,NavigationView,导航View。一般我们用它和DrawerLayout实现抽屉式导航设计,效果如下图。

8942f980gw1f0htcb1ysrj20qa176td0.jpg

学习

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

8942f980gw1f0htmgacsmj20t80b2gn7.jpg

通过学习官方文档,我们知道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;
    }

运行效果

8942f980gw1f0hy494wt3g20br0jpgyy.gif

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

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

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

原文地址:http://www.cnblogs.com/JohnTsai/p/5172056.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章