Во многих приложениях используется выдвижная панелька под названием Navigation Drawer. Все ее видели, но не все знают, что она именно так называется. Использование Navigation Drawer дает приложению большую удобность в использовании, расширяет функционал, а также придает Android приложению более современный вид и стиль. Но не взирая на массовое распространенное использование этой штуки, толковых уроков по ее использованию не так много, а само использование Navigation Drawer не такое уж и простое и требует определенной работы. Этот урок я делаю на базе толкового урока с Хабра, имея желание его как то обобщить, упростить и представить в более доступной и ясной форме (не гарантирую, что так и будет).

Пример Navigation Drawer в приложении QuickMemo:

Итак, в этом уроке мы сделаем приложение, оборудованное выдвижным боковым меню Navigation Drawer с тремя пунктами для выбора, при нажатии на которые будет выполняться переход на разные экраны приложения. Эти экраны будут задаваться с помощью фрагментов, по умолчанию при запуске приложения будет запускаться первый экран.

Создаем новый проект, выбираем Blank Activity, минимальную версия Android я выберу 4+.

Сразу скачайте и поместите в соответствующие папки в drawable необходимые изображения для панели.

Начнем с работы над файлом activity_main.xml. В нем нам нужно создать специальный DrawerLayout и в нем поместить область FrameLayout для отображения выдвижной панели, а также список ListView, из которого и будет состоять Navigation Drawer. Для этого добавляем в файл следующий код:

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

 <FrameLayout
 android:id="@+id/frame_for_drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <ListView android:id="@+id/drawer_list"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

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

Все строковые элементы мы создадим под конец.

Для определения вида каждого отдельного пункта списка панели, создадим отдельный файл в папке layout под названием nav_draw.xml и добавим следующее:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@android:id/text1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@drawable/activated_background"
 android:gravity="center_vertical"
 android:minHeight="?attr/listPreferredItemHeightSmall"
 android:paddingLeft="16dp"
 android:paddingRight="16dp"
 android:textAppearance="?android:attr/textAppearanceMedium"
 android:textColor="#fff" />

В качестве фона для созданного выше элемента TextView мы используем xml файл из папки drawable. Давайте его создадим. В папке drawable создаем файл под названием activated_background.xml и добавим в него следующий код:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@color/blue" android:state_activated="true"/>
 <item android:drawable="@color/blue" android:state_selected="true"/>
 <item android:drawable="@color/blue" android:state_pressed="true"/>
 <item android:drawable="@color/blue" android:state_checked="true"/>
 <item android:drawable="@android:color/transparent"/>
</selector>

Здесь мы активно используем ссылку на синий цвет, пока еще не существующий в приложении. Чтобы его создать, в папке values создаем файл по имени color.xml и добавляем в него код:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <item name="blue" type="color">#FF33B5E5</item>
</resources>

Изменим меню приложения, изменив код в файле menu_main.xml в папке menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:sabd="http://schemas.android.com/apk/res-auto" >

 <item
 android:id="@+id/action_search"
 android:icon="@android:drawable/ic_menu_search"
 android:orderInCategory="100"
 android:title="@string/action_search"
 sabd:showAsAction="ifRoom"/>

</menu>

Что касается кода приложения, то в нем необходимо реализовать такие основные моменты:

- инициализировать все используемые объекты и переменные;

- задать поведение переключателю панели Navigation Drawer;

- настроить переход на необходимый фрагмент при выборе соответствующего пункта списка панели;

Код файла java класса должен выглядеть вот так (кликаем ссылку) MainActivity.java.

Чтобы приложение заработало, осталось доработать в нем фрагменты для перехода на них с Navigation Drawer и добавить все используемые строки. Чтобы реализовать фрагменты, создаем в проекте новый пакет под названием fragments и в нем создаем 3 класса по имени ScreenOne, ScreenTwo, ScreenThree:

Код во всех троих классах одинаков, за исключением xml файла интерфейса. Код для ScreenOne.java:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import home.study.R;

public class ScreenOne extends Fragment {

 public ScreenOne() {
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {

 View rootView = inflater.inflate(R.layout.screen_first, container,
 false);

 return rootView;
 }
}

Для настройки интерфейса этого класса мы ссылаемся на файл под названием screen_first, давайте его создадим. В папке layout создаем файл под названием screen_first.xml и добавим в него код:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 
 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:layout_centerVertical="true"
 android:text="@string/screen_one"
 android:textAppearance="?android:attr/textAppearanceMedium" />
 
</RelativeLayout>

Классы (кликаем ссылку) ScreenTwo, ScreenThree аналогичны первому ScreenOne, единственное отличие в строке ссылки на файл интерфейса:

inflater.inflate(R.layout.screen_first

Для второго и третьего фрагментов в папке layout нужно создать интерфейса файлы screen_second.xml и screen_third.xml, которые выглядят аналогично к тому же screen_first.xml с единственным отличием в ссылке на текстовый ресурс:

Второй экран:
android:text="@string/screen_two"

Третий экран:
android:text="@string/screen_three"

Остается только внести все используемые в проекте строковые ресурсы в файл strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">Study</string>
 <string name="action_search">Поиск</string>

 <string-array name="screen_array">
 <item>Вкладка 1</item>
 <item>Вкладка 2</item>
 <item>Вкладка 3</item>
 </string-array>

 <string name="drawer_open">Открыть navigation drawer</string>
 <string name="drawer_close">Закрыть navigation drawer</string>

 <string name="screen_one">Экран №1</string>
 <string name="screen_two">Экран №2</string>
 <string name="screen_three">Экран №3</string>

</resources>

Теперь можем рискнуть протестировать приложение. Запускаем проект и смотрим на результат:

Все работает исправно, а мы научились создавать красивую и полезную выдвижную панель Navigation Drawer.