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

I. Uso básico

1. NavigationView se encuentra en la biblioteca design, agrega la dependencia (la última es 23.2.0）；

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

2. Luego, agrega NavigationView en el diseño DrawerLayout;

<?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>

.Es necesario prestar atención al establecer el atributo android:layout_gravity="start" para NavigationView.

3.Luego, note que NavigationView realmente se divide en dos partes, una es la cabecera y la otra es la lista de menús inferior

Como se muestra en la siguiente imagen:

Donde la cabecera se especifica mediante app:headerLayout="@layout/nav_header" atributo se agrega, la disposición de nav_header es la siguiente:

<?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>

la parte de la lista del menú siguiente es un archivo menu, a través de app:menu="@menu/se agrega la propiedad activity_main_drawer".

el archivo activity_main_drawer.xml se encuentra en la carpeta menu, y su contenido es:

<?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="[#1#]"/>
  <item
   android:id="@"+id/nav_gallery"
   android:icon="@drawable/ic_menu_gallery"
   android:title="[#2#]"/>
  <item
   android:id="@"+id/nav_slideshow"
   android:icon="@drawable/ic_menu_slideshow"
   android:title="[#3#]"/>
  <item
   android:id="@"+id/nav_manage"
   android:icon="@drawable/ic_menu_manage"
   android:title="[#4#]"/>
 </group>
 <item android:title="[#5#]">
  <menu
   <item
    android:id="@"+id/nav_share"
    android:icon="@drawable/ic_menu_share"
    android:title="[#6#]"/>
   <item
    android:id="@"+id/nav_send"
    android:icon="@drawable/ic_menu_send"
    android:title="[#7#]"/>
  </menu>
 </item>
</menu>

4. el evento de clic en la lista del menú

el código de evento de clic en la lista del menú es el siguiente:

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

Hasta aquí, la utilización básica de NavigationView está más o menos resuelta, el efecto es el que se muestra en la imagen anterior.

A continuación se muestra el problema que se encontró durante el uso y la forma de resolverlo.

Primero, el color del ícono del menú se renderiza en otro color

NavigationView por defecto seguirá el estándar de diseño de Android, y renderizará los íconos dentro del menú en el color configurado por itemIconTint. Si no se configura esta propiedad, se renderizará en el gris oscuro predeterminado. Si no desea que se renderice el color del ícono, se puede resolver con el siguiente código:

   navigationView.setItemIconTintList(null);

Segundo, el espacio entre el icono y el texto del menú es demasiado grande

En el menú de NavigationView, el espacio entre el icono y el texto es32dp, pero a menudo no coincide con el efecto diseñado por nuestro diseñador, en este caso, se puede configurar mediante la reescritura de las siguientes propiedades:

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

Resumen

Esto es todo el contenido de este artículo, espero que el contenido de este artículo pueda ayudar a los desarrolladores de Android, si tienen alguna pregunta, pueden dejar comentarios para intercambiar.