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

Primo: Uso di base

1. NavigationView nel design library, aggiungi la dipendenza (l'ultima è 23.2.0);

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

2. Poi aggiungi NavigationView nel layout 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>

Occorre notare di impostare l'attributo android:layout_gravity="start" per il NavigationView.

3. Poi notare che NavigationView è diviso in due parti: una testa e una parte della lista del menu sottostante

Come mostrato nell'immagine sottostante:

La testa è aggiunta tramite l'attributo app:headerLayout="@layout/nav_header", e la layout di nav_header è la seguente:

<?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 della lista del menu qui sotto è un file menu, aggiunto tramite l'attributo app:menu="@menu/activity_main_drawer".

Il file activity_main_drawer.xml si trova nella cartella menu e il suo contenuto è:

<?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. Evento di clic sull'elenco del menu

Ecco il codice per l'evento di clic su elenco del menu:

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

Fino a questo punto, l'uso di base di NavigationView è quasi completato, l'effetto è come mostrato nell'immagine precedente.

Di seguito sono riportati i problemi riscontrati durante l'uso e i relativi modi di risoluzione.

Primo: il colore dell'icona del menu viene renderizzato in un altro colore

NavigationView renderà di default le icone del menu secondo lo standard di design Android, utilizzando il colore impostato per itemIconTint. Se non imposti questa proprietà, verrà utilizzato il grigio scuro predefinito. Se non si desidera che il colore dell'icona venga renderizzato, è possibile risolvere il problema con il seguente codice:

   navigationView.setItemIconTintList(null);

Secondo: la distanza tra l'icona e il testo del menu è troppo grande

Nel menu di NavigationView, la distanza tra l'icona e il testo è di 32dp, ma di solito non corrisponde all'effetto progettato dal nostro designer. In questo caso, è possibile impostare le impostazioni tramite la rewrite delle seguenti proprietà:

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

Sommario

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa essere utile agli sviluppatori Android. Se hai domande, puoi lasciare un messaggio per discuterle.