Android Studio: Как сделать боковое меню с помощью NavigationDrawer

В этой статье давайте разберем, как сделать "крутое" боковое меню с помощью компонента NavigationDrawer.

Создадим новый проект, пусть он называется NavDraw, так как использовать на этот раз будем не Empty Activity а Navigation Drawer Activity, шаблон заготовку изAndroid Studio.

После запуска проекта и эмулятора, можно увидеть, как выглядит боковое меню. Справа располагается обычное меню, как сделать которое мы разбирали в прошлых статьях.

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

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

Файл nav_header_main.xml

Вот конкретно в этом файле nav_header_main мы сейчас изменим название. Я напишу название на свой лад «NavDraw - боковое меню» в этом textview, в следующим TextView указан адрес android studio, но я напишу название своего сайта.

<imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingtop="@dimen/nav_header_vertical_spacing" app:srccompat="@mipmap/ic_launcher_round" android:id="@+id/imageView"></imageview>
<textview android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingtop="@dimen/nav_header_vertical_spacing" android:text="NavDraw - боковое меню" android:textappearance="@style/TextAppearance.AppCompat.Body1"></textview>
<textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="maxfad.ru" android:id="@+id/textView"></textview>

Картинку я пока менять не буду я не нашел честно говоря, но вы можете в принципе аналогичным образом прописать в папки drawable новую иконку. Они тут расположены в png формате, есть некоторые в xml.

Можно в принципе использовать либо такие, либо такие, но я пока просто покажу вам где она находится если захотите, будете менять уже под свои нужды. Давайте перезапустим наше приложение и посмотрим, что у нас получится.

По идее, данные должны обновиться, так работает большинство приложений, кто собирает на Android Studio.

И в принципе не надо здесь все с нуля как бы переписывать создавать, все уже готово.

Вот кстати, здесь отличие -меню будет работать, которое находится в правом углу, (три точки) без всяких шаманств, изощрений, не как в прошлый раз. В прошлом видео я вам показывал: прописываете кучу стиле и прочего.

Файл activity_main_drawer

Так давайте теперь найдем в папке меню

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:showin="navigation_view">
<group android:checkablebehavior="single">
<item android:id="@+id/nav_camera" android:icon="@drawable/ic_menu_camera" android:title="Импорт"></item>
<item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery" android:title="Галерея"></item>
<item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow" android:title="Слайдшоу"></item>
<item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="Инструменты"></item>
<item android:id="@+id/nav_exit" android:icon="@drawable/ic_menu_manage" android:title="Выход"></item>
</group>
</menu>

Вот непосредственно наши пункты, как видите, здесь схалтурили разработчики этого шаблона - они прописали хардкорно пункт android title прямо в теле xml.

А в strings.xml ничего не прописано, но мы не будем сейчас создавать новые пункты в strings.xml

Давайте просто я напишу по-русски так как я вижу, как я понимаю эти пункты, просто и наглядно.

Большинство людей так и делают, если есть пункт, если есть его айдишник - меняем название и дальше можно будет к нему прицепиться и использовать его для обработчика нажатия на этот пункт.

Как видите, перевод произошел, я не готовил специально тоже иконки, пока оставим как есть, хотя если вы создадите новый пункт, вам можно будет подобрать иконку, картинку либо вообще ее удалить.

Удалив просто строку android icon пропадет картинка хотя в принципе лучше конечно что-то подготовить. Давайте продублируем предыдущий пункт, внесем изменения в его ID.

Сделаем пункт по которому приложение будет закрываться, так как бы любимая кнопка начинающего разработчика это Close и Exit - выход и закрыть.

Я перемещу ее в блок, который видите отделен в отдельном пункте, вот так она выглядит, мы иконку менять не буду, опять же вам уже об этом говорил. Захотите подготовить свой какой-то проект, можете нарисовать свои иконки либо поискать в интернете.

Так мы перезапустим проект, посмотрим, что у нас изменилась, и у нас произошли изменения. Итак проект перезапустился, откроем меню и как видим, добавился наш пункт.

Естественно сейчас он не обрабатывает нажатие на кнопку

Давайте сейчас напишем небольшую процедуру, в которой вместо текста "Hello Word!" будет написано, какая кнопка, какой пункт был нажат.

Файл content_main.xml

Для этого в TextView добавим ID, чтобы можно было к нему обращаться программно, я назову его nav_tv.

В файле MainActivity.java мы объявим переменную TextView tv перед функцией onCreate, также нам нужно будет найти ее через findViewById() и я надеюсь вы уже знаете, как это делается и объяснять вам не надо.

tv=findViewById(R.id.nav_tv);

теперь найдем конструкцию onNavigationItemSelected и в конструкцию if..else допишем

tv.setText()

и укажем текст который будет появляться в центре нашего приложения по нажатию на кнопку.

Соответственно, для пункта nav_camera, который мы назвали почему-то импорт, потому как на иконке изображен фотоаппарат, мы назовем это действие "Нажата кнопка: Камера", "Нажата кнопка: Галерея"

public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();

if (id == R.id.nav_camera) {
// Handle the camera action
tv.setText("Нажата кнопка: Импорт");
} else if (id == R.id.nav_gallery) {
tv.setText("Нажата кнопка: Галерея");
} else if (id == R.id.nav_slideshow) {
tv.setText("Нажата кнопка: Слайдшоу");
} else if (id == R.id.nav_manage) {
tv.setText("Нажата кнопка: Инструменты");
}

Здесь может находиться какая либо процедура, то есть необязательно просто вот одно действие, прямое, сразу передать текст куда то туда то и все, то есть здесь можно вызвать, допустим, дополнительную активность, а скорее всего так вы будете делать, если вы этим интересуетесь, либо фрагмент какой-то откроется, либо новая активность.

Потому здесь достаточно богатое поле для деятельности, вспомните хотя бы приложение для aliexpress, сколько там пунктов находится всевозможных: магазин, купите, избранное, поделиться и настройки. Кстати, тут есть - инструменты это в принципе почти как настройки.

Обратите внимание - я добавил функцию finish(), она закроет приложение по нажатию на этот пункт.

else if (id == R.id.nav_exit) {
tv.setText("Нажата кнопка: Выход");
finish();
}

Перезапустили проект и теперь как вы видите при нажатии на пункты меню,(исправлю камера на импорт)можно будет видеть, что наше боковое меню реагирует на воздействие нажмем на выход и приложение закрылось.

Сейчас немного займемся настройкой декоративного элемента, который у нас отвечает за рисунок и за градиент.

Градиент в side_nav_bar

В файле side_nav_bar прописан градиент который находится как background возле картинки.

Есть центральный цвет, есть начальный цвет, есть конечный цвет и есть угол на который будет повёрнут градиент.

Я специально не подбирал цвета которые хотел бы поставить сюда ну пока просто в виде эксперимента я вам покажу как это все меняется, как настраивается.

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="135" android:centercolor="#acacac" android:endcolor="#00695C" android:startcolor="#acacac" android:type="linear"></gradient>
</shape>

Так изменим угол 135 градусов на 90, и через некоторое время некоторой задержкой обновляется наш градиент и вот сейчас картинка у нас под наклоном, и соответственно, обновилось приложение, и наше меню, изменился в макете наш градиент.

В принципе, можете подобрать любой переход, от светлого тона к тёмному цвету, либо посередине, чтобы барьер был.

Можно в принципе поиграться с углом наклона, у вас изменится вид этой шапки, или сделать однотонный цвет, допустим красный - red или #FF0000

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

Давайте перенесем нашу кнопку выход и удалим часть, вот этот блок можно удалить, вместе с разделителем. Вот у нас получится вот такое меню сокращенное. Не обязательно делать либо вы можете добавлять, удалять пункты. Поскольку я удалил часть элементов, то мне нужно подправить код обработчика нажатия на пункты.

Перезапустим наше приложение, обновилось нашими меню, так оно аккуратно, компактно, если у вас пока много пунктов нет – можете ограничиться небольшим списком.

Смотрите видео Android Studio: Как сделать боковое меню с помощью NavigationDrawer:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!

 С уважением, авторы сайта Компьютерапия

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!