Android中NavigationView的使用與相關問題解決

一、基本使用

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開發者們能有所幫助，如果有疑問大家可以留言交流。