Android中NavigationView的使用与相关问题解决

更新时间：2016年10月27日 16:55:19 投稿：daisy

大家都知道NavigationView的引入让 Android侧边栏实现起来相当方便，最近公司项目中也使用这个新的控件完成了侧边栏的改版。在使用过程中遇到一些问题所以记录一下。本文分为两个部分，一是基本使用，二是相关问题的解决，感兴趣的朋友们下面来一起看看吧。

一、基本使用

1. NavigationView 在 design 库中，添加依赖（最新的是 23.2.0）；

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

2. 然后在 DrawerLayout 布局中添加 NavigationView ；

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
 android:id="@+id/drawer_layout"
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
   android:id="@+id/main"
   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="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

   ......
   
  </LinearLayout>
 </FrameLayout>

 <android.support.design.widget.NavigationView
  android:id="@+id/navigation"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:layout_gravity="start"
  app:headerLayout="@layout/nav_header"
  app:menu="@menu/activity_main_drawer"/>

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

其中需要注意给 NavigationView 设置 android:layout_gravity="start" 属性。

3.然后注意到 NavigationView 其实是分两个部分的，一个是头部，一个是下面的菜单列表部分

如下图所示：

其中头部通过 app:headerLayout="@layout/nav_header" 属性添加，nav_header 的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

 <ImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/nav_header_bg"
  android:scaleType="centerCrop"/>

 <ImageView
  android:layout_width="96dp"
  android:layout_height="96dp"
  android:layout_gravity="bottom"
  android:layout_marginBottom="36dp"
  android:padding="8dp"
  android:src="@drawable/ic_avatar"/>

 <TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  android:padding="16dp"
  android:text="Jaeger"
  android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</FrameLayout>

下面的菜单列表部分是一个 menu 文件，通过 app:menu="@menu/activity_main_drawer"属性添加。

activity_main_drawer.xml 文件在 menu 文件夹下，内容为：

<?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/nav_camera"
   android:icon="@drawable/ic_menu_camera"
   android:title="Import"/>
  <item
   android:id="@+id/nav_gallery"
   android:icon="@drawable/ic_menu_gallery"
   android:title="Gallery"/>
  <item
   android:id="@+id/nav_slideshow"
   android:icon="@drawable/ic_menu_slideshow"
   android:title="Slideshow"/>
  <item
   android:id="@+id/nav_manage"
   android:icon="@drawable/ic_menu_manage"
   android:title="Tools"/>
 </group>

 <item android:title="Communicate">
  <menu>
   <item
    android:id="@+id/nav_share"
    android:icon="@drawable/ic_menu_share"
    android:title="Share"/>
   <item
    android:id="@+id/nav_send"
    android:icon="@drawable/ic_menu_send"
    android:title="Send"/>
  </menu>
 </item>

</menu>

4. 菜单列表的点击事件

菜单列表的点击事件设置代码如下：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
   @Override
   public boolean onNavigationItemSelected(MenuItem item) {
    switch (item.getItemId()){
     case R.id.nav_personal_info:
      // do something
      break;
     ...
    }
    return false;
   }
  });

至此，NavigationView 的基本使用就差不多搞定了，效果就是前面图片显示的效果。

以下是使用过程中遇到的问题及解决方式。

一、菜单图标颜色被渲染成其他颜色

NavigationView默认会按照 Android 设计规范，将菜单里的图标渲染成itemIconTint所设置的颜色。如果你没有设置这个属性，则会渲染成它默认的深灰色。如果不想图标颜色被渲染，可通过以下代码解决：

   navigationView.setItemIconTintList(null);

二、菜单图标与文字的间距过大

NavigationView的菜单中，图标与文字的间距为32dp，但是通常与我们的设计师出的效果不同，这时可以通过重写以下属性来进行设置：

 <dimen name="design_navigation_icon_padding" tools:override="true">16dp</dimen>

总结

以上就是这篇文章的全部内容了，希望本文的内容对各位Android开发者们能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

实例讲解Android app开发中ListView的基本使用及优化
这篇文章主要介绍了Android app开发中ListView的基本使用及优化,ListView视图组件是Android中最常用的组件之一需要的朋友可以参考下
2016-02-02
Android播放视频的三种方式
这篇文章主要为大家详细介绍了Android播放视频的三种方式，使用其自带的播放器、VideoView、MediaPlayer类和SurfaceView来实现，感兴趣的小伙伴们可以参考一下
2016-07-07
Android权限机制深入分析讲解
Android的权限管理遵循的是“最小特权原则”，即所有的Android应用程序都被赋予了最小权限。一个Android应用程序如果没有声明任何权限，就没有任何特权
2022-12-12
Android小程序实现简易QQ界面
这篇文章主要为大家详细介绍了Android小程序实现简易QQ界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
Adapter实现ListView带多选框等状态的自定义控件的注意事项
Android本身为ListView提供了几个方便的Adapter，比如ArrayAdapter、SimpleCurrentAdapter等等,接下来介绍自定义Adapter实现ListView带多选框等状态控件的注意事项，感兴趣的朋友可以详细了解下，或许对你有所帮助
2013-01-01
Android仿微信、qq点击右上角加号弹出操作框
这篇文章主要为大家详细介绍了Android仿微信、qq点击右上角加号弹出操作框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Android socket如何实现文件列表动态访问
本文介绍Android socket实现文件列表动态访问，访问文件夹之后通过listview展示，并在点击文件夹后进入文件夹，获得其内容，有此需求的朋友可以参考下
2021-06-06
Android实现九宫格手势密码
这篇文章主要为大家详细介绍了Android实现九宫格手势密码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
Xposed插件开发入门详解
这篇文章主要介绍了Xposed插件开发入门详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
Android源码学习之单例模式应用及优点介绍
动态确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例这就是Android单例模式应用,接下来详细介绍，有需求的朋友可以参考下
2013-01-01