Android：NavigationView 导航抽屉

NavigationView是一种标准的应用导航菜单，菜单栏的内容可以来自菜单栏资源文件。

NavigationView最典型的应用场景是放到DrawerLayout里使用。

API：https://developer.android.com/reference/android/support/design/widget/NavigationView.html

1. build.gradle里面添加 compile 'com.android.support:design:24.0.0'，版本号需要跟API版本号相同；

apply plugin: 'com.android.application'

android {

    compileSdkVersion 24

    buildToolsVersion "24.0.0"

    defaultConfig {

        applicationId "com.media.customplayer"

        minSdkVersion 18

        targetSdkVersion 24

        versionCode 1

        versionName "1.0"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }

    }

    productFlavors {

    }

}

dependencies {

    compile fileTree(include: ['*.jar'], dir: 'libs')

    testCompile 'junit:junit:4.12'

    compile 'com.android.support:appcompat-v7:24.0.0'

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

}

2. 布局配置文件添加指向res-auto的域名 xmlns:app="http://schemas.android.com/apk/res-auto"

<?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/palyer_drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context=".PlayerActivity"

    >

3. res目录下添加menu目录，在menu下添加菜单栏资源文件

menu api： http://developer.android.com/guide/topics/resources/menu-resource.html

<?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/navi_all"

            android:checked="true"

            android:icon="@mipmap/ic_allmusic_black_24dp"

            android:title="@string/drawer_allmusic_title" />

        <item

            android:id="@+id/navi_playlists"

            android:icon="@mipmap/ic_playlist_music_black_24dp"

            android:title="@string/drawer_playlists_title" />

    </group>

</menu>

4. DrawerLayout下添加NavigationView(至此导航栏可以使用了)

<?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/palyer_drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context=".PlayerActivity"

    >

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="200dp"

            android:layout_marginTop="200dp"

            android:text="这是主区域"/>

    </RelativeLayout>

    <android.support.design.widget.NavigationView

        android:id="@+id/navi_view"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        app:menu="@menu/drawer"

        />

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

5. app:headerLayout接收一个导航菜单栏顶部的布局（可选）

<?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/palyer_drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context=".PlayerActivity"

    >

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="200dp"

            android:layout_marginTop="200dp"

            android:text="这是主区域"/>

    </RelativeLayout>

    <android.support.design.widget.NavigationView

        android:id="@+id/navi_view"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:layout_gravity="start"

        app:headerLayout="@layout/nav_header"

        app:menu="@menu/drawer"

        />

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

nav_header.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="192dp"

    android:background="?attr/colorPrimaryDark"

    android:padding="16dp"

    app:theme="@style/ThemeOverlay.AppCompat.Dark"

    android:gravity="bottom">

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="导航栏Header"

        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

6. menu嵌套

menu支持分组和子标题，但是子标题不支持icon

<?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/navi_all"

            android:checked="true"

            android:icon="@mipmap/ic_allmusic_black_24dp"

            android:title="@string/drawer_allmusic_title" />

        <item

            android:id="@+id/navi_playlists"

            android:icon="@mipmap/ic_playlist_music_black_24dp"

            android:title="@string/drawer_playlists_title" />

        <item

            android:id="@+id/navi_sub_header"

            android:icon="@mipmap/ic_by_genre"

            android:title="@string/drawer_sub_navi_title">

            <menu>

                <item

                    android:id="@+id/navi_sub_item_1"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

                <item

                    android:id="@+id/navi_sub_item_2"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

            </menu>

        </item>

    </group>

</menu>

经过测试，子分组可以放到group里面，可以放到外面

<?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/navi_all"

            android:checked="true"

            android:icon="@mipmap/ic_allmusic_black_24dp"

            android:title="@string/drawer_allmusic_title" />

        <item

            android:id="@+id/navi_playlists"

            android:icon="@mipmap/ic_playlist_music_black_24dp"

            android:title="@string/drawer_playlists_title" />

        <item

            android:id="@+id/navi_sub_header"

            android:icon="@mipmap/ic_by_genre"

            android:title="@string/drawer_sub_navi_title">

            <menu>

                <item

                    android:id="@+id/navi_sub_item_1"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

                <item

                    android:id="@+id/navi_sub_item_2"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

            </menu>

        </item>

    </group>

    <item

        android:id="@+id/navi_sub_header_bottom"

        android:icon="@mipmap/ic_by_genre"

        android:title="@string/drawer_sub_navi_title">

        <menu>

            <item

                android:id="@+id/navi_sub_item_bottom_1"

                android:icon="@mipmap/ic_allmusic_black_24dp"

                android:title="@string/drawer_sub_playlist_title" />

            <item

                android:id="@+id/navi_sub_item_bottom_2"

                android:icon="@mipmap/ic_allmusic_black_24dp"

                android:title="@string/drawer_sub_playlist_title" />

        </menu>

    </item>

</menu>

7. 导航菜单项被点击时的回掉：setNavigationItemSelectedListener(OnNavigationItemSelectedListener)

package com.media.customplayer;

import android.support.design.widget.NavigationView;

import android.support.design.widget.NavigationView.OnNavigationItemSelectedListener;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v4.widget.DrawerLayout.DrawerListener;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.view.MenuItem;

import android.view.View;

public class PlayerActivity extends AppCompatActivity {

    private final String TAG = "PlayerActivity";

    private DrawerLayout mPlayerDrawer;

    private NavigationView mNaviView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_player);

        mPlayerDrawer = (DrawerLayout) findViewById(R.id.palyer_drawer_layout);

        mPlayerDrawer.addDrawerListener(drawerListener);

        mNaviView = (NavigationView) findViewById(R.id.navi_view);

        mNaviView.setNavigationItemSelectedListener(naviItemSelectedListener);

    }

    private DrawerListener drawerListener = new DrawerLayout.DrawerListener() {

        @Override

        public void onDrawerSlide(View drawerView, float slideOffset) {

            Log.v(TAG, "onDrawerSlide: slideOffset = " + slideOffset);

        }

        @Override

        public void onDrawerOpened(View drawerView) {

            Log.v(TAG, "onDrawerOpened");

        }

        @Override

        public void onDrawerClosed(View drawerView) {

            Log.v(TAG, "onDrawerClosed");

        }

        @Override

        public void onDrawerStateChanged(int newState) {

            Log.v(TAG, "onDrawerStateChanged: newState = " + newState);

        }

    };

    private OnNavigationItemSelectedListener naviItemSelectedListener = new OnNavigationItemSelectedListener() {

        @Override

        public boolean onNavigationItemSelected(MenuItem item) {

            switch (item.getItemId()) {

                case R.id.navi_all:

                    Log.v(TAG, "播放所有音乐");

                    break;

                case R.id.navi_playlists:

                    Log.v(TAG, "播放音乐列表");

                    break;

                default:

                    Log.v(TAG, "点击按钮: " + item.getItemId());

            }

            item.setChecked(true);

            mPlayerDrawer.closeDrawer(GravityCompat.START, true);

            return true;

        }

    };

}

但是问题来了，分组的菜单项虽然可以触发此事件，但是子分组的菜单项此时都变成多选了

经过测试发现，子分组menu下先嵌套group（

<item>
    <menu>
        <group android:checkableBehavior="single">
            <item />
            <item />
        </group>
    </menu>
</item>

），再嵌套item即可解决。

<?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/navi_all"

            android:checked="true"

            android:icon="@mipmap/ic_allmusic_black_24dp"

            android:title="@string/drawer_allmusic_title" />

        <item

            android:id="@+id/navi_playlists"

            android:icon="@mipmap/ic_playlist_music_black_24dp"

            android:title="@string/drawer_playlists_title" />

        <item

            android:id="@+id/navi_sub_header"

            android:icon="@mipmap/ic_by_genre"

            android:title="@string/drawer_sub_navi_title">

            <menu>

                <group android:checkableBehavior="single">

                    <item

                        android:id="@+id/navi_sub_item_1"

                        android:icon="@mipmap/ic_allmusic_black_24dp"

                        android:title="@string/drawer_sub_playlist_title" />

                    <item

                        android:id="@+id/navi_sub_item_2"

                        android:icon="@mipmap/ic_allmusic_black_24dp"

                        android:title="@string/drawer_sub_playlist_title" />

                </group>

            </menu>

        </item>

    </group>

    <item

        android:id="@+id/navi_sub_header_bottom"

        android:icon="@mipmap/ic_by_genre"

        android:title="@string/drawer_sub_navi_title">

        <menu>

            <group android:checkableBehavior="single">

                <item

                    android:id="@+id/navi_sub_item_bottom_1"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

                <item

                    android:id="@+id/navi_sub_item_bottom_2"

                    android:icon="@mipmap/ic_allmusic_black_24dp"

                    android:title="@string/drawer_sub_playlist_title" />

            </group>

        </menu>

    </item>

</menu>

还需要注意的时，选中的菜单项，还是可以触发selected事件的。

Android：NavigationView 导航抽屉的更多相关文章

第三十二篇-NavigationView导航抽屉的使用
效果图: 导航抽屉所用到的布局是DrawerLayout,可以在里面添加一个线性布局和TextView组件,TextView组件的文本信息就是"主页面".然后和线性布局平行添加一个 ...
Android Design Support Library（二）用NavigationView实现抽屉菜单界面
NavigationView在MD设计中非常重要,之前Google也提出了使用DrawerLayout来实现导航抽屉.这次,在Android Design Support Library中,Googl ...
Android开发之Navigationdrawer导航抽屉功能的实现（源码分享）
导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户能够通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉. 导航抽屉覆盖在内容之上,但不覆盖 ...
Android导航抽屉-Navigation Drawer
Google今年七月份的时候更新了他们的Google+应用,采用了新的导航方式并抛弃了navigationdrawer.一时之间,又引发了一系列关于NavigationDrawer利弊的讨论,不过对于 ...
Navigation Drawer(导航抽屉)
目录(?)[-] 创建一个导航抽屉创建抽屉布局初始化抽屉列表处理导航项选点击事件监听导航抽屉打开和关闭事件点击应用图标来打开和关闭导航抽屉创建一个导航抽屉导航抽屉是一个位于屏幕左侧边缘用 ...
【转】Navigation Drawer(导航抽屉)
创建一个导航抽屉创建抽屉布局初始化抽屉列表处理导航项选点击事件监听导航抽屉打开和关闭事件点击应用图标来打开和关闭导航抽屉创建一个导航抽屉导航抽屉是一个位于屏幕左侧边缘用来显示应用程序 ...
Android底部导航栏——FrameLayout + RadioGroup
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...
Android底部导航栏创建——ViewPager + RadioGroup
原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...
Android底部导航栏
Android底部导航栏今天简单写了一个底部导航栏,封装了一个库,用法比较简单效果图 Github地址:https://github.com/kongqw/KqwBottomNavigation ...

随机推荐

loadrunner：参数类型及其取值机制
参数类型参数名随意取,建议取通俗易懂的名字,下面我们重点介绍一下参数的类型. ●DateTime: 很简单, 在需要输入日期/时间的地方, 可以用DateTime 类型来替代. 其属性设置也很简单, ...
排查问题所用到的一些Linux命令实践（不定期更新。。）
一.前言线上问题排查可能是每个程序员都会经历的.在排查的过程中,往往会用到很多Linux命令,也会产生一些很实用的技巧.本博文通过分析一次线上问题排查的过程,把所有用到的命令串起来.每个Linux命 ...
selenium相关面试题
selenium中如何判断元素是否存在? selenium中hidden或者是display ＝ none的元素是否可以定位到? selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元 ...
美丽的Java图表类库
摘要在使用java做后台站点的开发张,图表和报表功能都是不可或缺的.本文推荐了8款最精彩实用的Java图表应用,大部分图表应用的功能都类似,主要在于界面的美观性和使用的灵活性上有一点高低. 正文 ...
【puthon基础】之str类字符串
str类字符串是不可变对象 1.创建字符串 s1 = str() #创建一个空字符串 s2 = str("hello") #创建字符串"hello" 2.处理字 ...
AFN
一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装虽然运行效率没有ASI高,但是使用比ASI简单在iOS开发中,使用比较广泛 AFN的github地址 ...
Hibernate核心配置文件
Hibernate.cfg.xml是Hibernate操作数据库的核心配置文件 *********************************************** 作用 01.管理实体类的 ...
MySQL的my-innodb-heavy-4G.ini配置文件的翻译
我根据MySQL配置文件的英文文档说明,在根据自己所学的知识,使用有道词典对不懂的单词进行了查询,一个一个翻译出来的.有的专业术语翻译的不好,我使用了英文进行标注,例如主机(master)和副机(sl ...
（原）SQL Server 系统提供功能的三个疑惑
本文目录列表: 1.SQL Server系统提供的部分疑惑概述2.系统函数调用时DEFAULT代替可选参数使用不统一3.队列字段列message_enqueue_time记录的是UTC日期时间 4.@ ...
linux gdb基本概念
GDB是一个功能强大的调试器,它是一个自由软件,能够用在许多UNIX平台上.它同时也是Linux系统中的默认调试器.GDB已被移植到许多其他的计算机平台上,并且能够用于调试嵌入式实时系统.一般来说,G ...

Android：NavigationView 导航抽屉

Android：NavigationView 导航抽屉的更多相关文章

随机推荐

热门专题