Использование NavigationView в Android и решения связанных проблем

I. Основное использование

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>

Необходимо учитывать установку свойства android:layout_gravity="start" для NavigationView.

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="[#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. Событие клика по списку меню

Код для настройки события клика по списку меню приведен ниже:

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 по умолчанию будет渲染菜单ные иконки в цвет, указанный в свойстве itemIconTint. Если вы не установили этот параметр, иконки будут渲染 в стандартный темно-серый цвет. Если вы не хотите, чтобы иконки были окрашены, вы можете решить эту проблему следующим образом:

   navigationView.setItemIconTintList(null);

Вторая часть: расстояние между иконкой и текстом в меню слишком большое

В меню NavigationView расстояние между иконкой и текстом составляет 32dp, но обычно оно отличается от эффекта, созданного нашим дизайнером. В этом случае можно настроить следующие свойства:

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

Резюме

Вот и все, что есть в этой статье. Надеюсь, что материалы статьи помогут вам, уважаемые разработчики Android. Если у вас есть вопросы, вы можете оставить комментарии для обсуждения.