Android5.0之NavigationView的使用

导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的NavigationView的具体使用方式。

NavigationView在很多App上都已经可以看到其效果图,国内的比如知乎(侧拉菜单滑出来的那一部分属于NavigationView),如下图:

还有Google自己的那些app,也基本全都采用了NavigationView,如下图,分别是Gmail、Google Map以及Google Play:

OK,看完了图,接下来我们就来说说这个NavigationView吧。

1.NavigationView是什么

long long ago,我们做抽屉菜单的时候,左边滑出来的那一部分的布局都是由我们自己来定义的,自己写的话,花点时间也能做出来好看的侧拉菜单,但总是要耗费时间,于是Google在5.0之后推出了NavitationView,就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分,上面一部分叫做HeaderLayout,下面的那些点击项都是menu,这样的效果如果我们要自己写肯定也能写出来,但是没有必要,既然Google提供了这个控件,那我们就来看看这个控件要怎么用吧。

2.NavigationView怎么用

和普通的侧拉菜单制作方式一样,首先所有的东西还是都放在一个DrawerLayout中(如果你对DrawerLayout的使用还不熟悉,请参考这篇文章使用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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="org.mobiletrain.drawerlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主页面"/>
    </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"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/main"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

OK,下面我来分别解释一下这里边几个属性的含义:

1.android:layout_gravity="left"属性表示该View是左边的滑出菜单,这个属性的含义不用多说,这是DrawerLayout使用方式中的知识点。

2.app:headerLayout="@layout/header_layout"表示引用一个头布局文件,这个头就是我们在上面看到的那个背景图片,包括背景图片上面的显示用户名的控件等等。

3.app:menu="@menu/main"表示引用一个menu作为下面的点击项

OK,那我们再来看看头布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="200dp"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/p1"/>
</LinearLayout>

再来看看menu文件:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/favorite"
        android:icon="@mipmap/ic_launcher"
        android:title="收藏"/>
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/ic_launcher"
        android:title="钱包"/>
    <item
        android:id="@+id/photo"
        android:icon="@mipmap/ic_launcher"
        android:title="相册"/>
    <item
        android:id="@+id/file"
        android:icon="@mipmap/ic_launcher"
        android:title="文件"/>
</menu>

OK,运行来看看效果:

OK,已经显示出来了,但是有一个问题,图片都变为灰色了,怎么破?有两种方式:

1.在布局文件中添加app:itemIconTint="@color/blue"属性,表示设置图片的颜色全都为蓝色,效果如下:

2.第一种解决方案会让所有的图片以一种颜色来显示,如果我想让图片就是显示他本身的颜色该怎么办呢?在Java代码中调用如下方法:

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.setItemIconTintList(null);

显示效果如下:

这下正常了。

还有下面两个常用的API:

1.app:itemBackground="@color/colorAccent"设置每一个item的背景颜色

2.app:itemTextColor=""设置item的背景颜色

OK,如果我想在NavigationView的item之间添加上一条分隔线呢?很简单,只需要在menu中将相应的item放到一个group中,并给该group取一个id即可,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/g1">
        <item
            android:id="@+id/favorite"
            android:icon="@mipmap/ic_launcher"
            android:title="收藏"/>
        <item
            android:id="@+id/wallet"
            android:icon="@mipmap/ic_launcher"
            android:title="钱包"/>
    </group>
    <group android:id="@+id/g2">
        <item
            android:id="@+id/photo"
            android:icon="@mipmap/ic_launcher"
            android:title="相册"/>
    </group>
    <item
        android:id="@+id/file"
        android:icon="@mipmap/ic_launcher"
        android:title="文件"/>
</menu>

显示效果如下:

OK,分割线添加成功了。

接下来我们来看看怎么处理NavigationView中的事件监听。

NavigationView中的事件处理主要是两个方面,一个头部的点击事件,还有一个是itemView的点击事件,下面我们分别来看看:

1.头部点击事件

处理头部点击事件,我们需要先获得到头部控件,在Java代码中我们可以通过下面的方式获得头部控件,

//获取头布局文件
        View headerView = navigationView.getHeaderView(0);

然后通过调用headerView中的findViewById方法来查找到头部的控件,设置点击事件即可。

2.item点击事件

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //在这里处理item的点击事件
                return true;
            }
        });

OK,基本NavigationView的使用就这些。有问题欢迎交流。

以上。

时间: 2024-11-05 13:49:30

Android5.0之NavigationView的使用的相关文章

Android5.0 新特性学习总结

参考文章: 极客学院 –Material Design 中文版图文教程 几行代码,让你的 APP 变得花俏-Android Design Support Library 代码实验 material design 的android开源代码整理 低版本android上实现Material design应用 Android5.0版本,推出了Material Design的概念,这是在设计上Android的又一大突破.对应的程序实现上就有如 Theme.Material.Light. Theme.Mat

Android5.0以上系统的移动网络开关

笔者近期遇到一个非常有意思的bug,贴出来和大家分享下. 那是一个温暖的早晨,阳光晒得人非常舒服.一封bug邮件像一片叶子飘到我的邮箱. 一番交流.笔者确认负责的Widget开关在Android5.0以上系统没有作用.相信非常多做过移动网络开关的朋友都知道.传统的方法是在ConnectivityManager中通过反射两个方法setMobileDataEnabled和getMobileDataEnabled来控制移动网络开和关的. /** * Gets the value of the sett

友情提醒:欲开发android5.0以上应用,请全部更新开发工具至最新

周末帮人完成一个项目,android5.0以上版本,谁知道被开发工具折腾的死去活来.我的开发环境是adt-bundle-windows-x86-20140702.zip版本,也是目前能找到的adt-bundle的最新版本.也升级至最新的adt和platform,但开发5.0的项目还是一堆错误: 错误1:动不动就报AndroidManifest.xml is missing的错误,为了解决这个问题每次都要将.android 和 开发空间里的.metadata,然后重启eclipse,真痛苦啊! 错

Android5.0之后的页面切换动画

Android5.0之后给我们开发者剩了好多的事情,为什么这么说呢?还记得刚开始的时候,Android里面的所有的动画都要我们开发者自己来写,现在不需要了,因为5.0之后自带了好多的动画,比如:按钮点击的动画.页面切换的动画(在android5.0之前想都不敢想的). 今天我着重讲一下页面之间的切换,目前5.0系统自带了三种动画方式:Explode(缩放).Fade(淡入淡出).Slide(滑动进入).下面就这三中方式进行介绍一下. 在讲解之前,现对于动画的方式进行介绍一下.通常,我们进行页面跳

Android5.0以上app进程保活的正确姿势

我的原文: http://blog.csdn.net/brycegao321/article/details/52312030 有图有真相,  亲测锤子T2.华为Mate8手机杀掉进程后能自启, 我设置的自启时间间隔为500ms(仅仅是为了测试).     首先要明确保活的概念: 1.非android核心进程(例如com.android.phone)都可以被干掉: 2.保活并不能真正的保证app进程不死,  而是能在被干掉后马上启动: Android系统按照进程的优先级分为: 1. 前台进程(F

ANDROID5.0触摸屏校准

1.校准原理: 1)首先生成校准用的参数,可以适用tslib生成校准参数,也可以使用校准app生成:使用校准app进行校准对使用者要求比较低,使用者可以不用学习复杂的命令:本文使用app方式 2)生成校准参数后,以后驱动每次接收到触摸事件就会使用校准参数进行校准 2.校准app 校准功能完全实现在在src目录里的MainActivity.java里,内容如下: package com.wss.calibrate2; import android.app.Activity;import andro

android5.0之toolBar

toolBar是android5.0之后提出的,可以简单的理解为ActionBar的升级版吧,在5.0之后,官方推荐使用ToolBar!下面开启ToolBar的正文(老样子,有问题请指正,有疑问,偶们共同讨论!嘎嘎......) ①toolBar是5.0之后提出的,那么低版本的该怎么办啊?老规矩咯,引入V7包'com.android.support:appcompat-v7:22.1.1',就是介个!(注意:下面的一些类都是V7包里的,不要写错了!!!) ②V7包引入之后,还是不可以直接使用to

Android自定义组件系列【14】——Android5.0按钮波纹效果实现

今天任老师发表了一篇关于Android5.0中按钮按下的波纹效果实现<Android L中水波纹点击效果的实现>,出于好奇我下载了源代码看了一下效果,正好手边有一个Nexus手机,我结合实际效果看了一下,发现有一些地方和实际效果稍有不同,参考任老师的博文实现简单实现了一个重写View组件的代码,将全部代码贴出,如果有什么问题或者更好的方式请指出,在此再次感谢任老师的这篇博文. 转载请说明出处:http://blog.csdn.net/dawanganban 顺便在这里拉一下票,如果你觉得这篇文

android5.0开发必备版本和JDK环境配置

android5.0开发必备版本: JDK-1.8-x64; NDK-10-x64; ADT-5.0&4.0-x64; 谷歌代理: https://wen.lu/?gfe_rd=cr&ei=Ir7YU5XsOK3J8ge_24GgBQ&gws_rd=cr 也可用FQ软件:goagent,或FQ浏览器 goagent: https://github.com/goagent/goagent 配置地址:http://www.woshipm.com/it/13644.html JDK配置(