Пример создания Navigation Drawer в Android | Prologistic.com.ua

Пример создания Navigation Drawer в Android

В этом уроке мы реализуем Navigation Drawer в простом приложении на Android. Рассмотрим особенности и способы реализации этого компонента. 

Краткий обзор Android Navigation Drawer

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

Чтобы вызвать компонент Navigation Drawer, нужно нажать на иконку в ActionBar или свайпнуть слева или справа экрана. По нажатию на элемент Drawer Layout можно вызывать различные компоненты интерфейса подобно обычному меню.

В этой статье мы реализуем Navigation Drawer с помощью Drawer Layout API из библиотеки поддержки (Android Support Library).

Создание Android Navigation Drawer. Практика

В нашем приложении мы будем использовать три фрагмента, которые будут вызываться по нажатию на элементы компонента Navigation Drawer. За управление элементами будет отвечать адаптер и хостом будет MainActivity.

Для реализации Navigation Drawer нам понадобится класс android.support.v4.widget.DrawerLayout в качестве корневого элемента макета activity_main.xml, в котором будут LinearLayout c компонентом Toolbar и контейнер FrameLayout для компонентов Fragment. Список элементов меню в  будет представлять ListView:

С помощью тега include мы включили компонент Toolbar. Сам макет определим в папке res/layout/toolbar.xml:

Важно! Так как мы используем Toolbar, то в файле styles.xml нужно обязательно указать родительскую тему Theme.AppCompat.Light.NoActionBar, в противном случае приложение «упадет» с ошибкой:

Теперь определим макет для item_row.xml — единичного элемента ListView в NavigationDrawer:

Как видите, он очень простой и содержит всего 2 виджета: TextView для отображение названия пункта и ImageView для отображения иконки.

Сами названия пунктов определены в файле strings.xml с помощью тега string-array:

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

Представим класс адаптера ниже:

Теперь напишем классы фрагментов, которые будут появляться на экране после нажатия на элементы меню в Navigation Drawer:

И компоновка fragment_email.xml к нему:

Классы и макеты фрагментов практически идентичны, за исключением названий, поэтому простой создайте еще 2 таких же фрагмента:

  • Класс InfoFragment и компоновку к нему fragment_info.xml
  • Класс MapFragment и компоновку к нему fragment_map.xml

Листинг класса MainActivity представлен ниже:

Полный листинг файла strings.xml представлен ниже:

Файл AndroidManifest.xml остается без изменений.

Теперь нам осталось синхронизировать проект с помощью Gradle и запустить на устройстве:

NavigationDrawer

Скачать проект «Пример создания Navigation Drawer в Android».

Следите за обновлениями раздела Android и подписывайтесь на обновления сайта.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *