Где находится боковое меню в телефоне
В этой статье давайте разберем, как сделать "крутое" боковое меню с помощью компонента NavigationDrawer.
Создадим новый проект, пусть он называется NavDraw, так как использовать на этот раз будем не Empty Activity а Navigation Drawer Activity, шаблон заготовку изAndroid Studio.
После запуска проекта и эмулятора, можно увидеть, как выглядит боковое меню. Справа располагается обычное меню, как сделать которое мы разбирали в прошлых статьях.
Собственно, создание Navigation Drawer меню заключается в изменении существующей заготовки под свои нужды. Этим и займемся сегодня.
Давайте для примера их переведём на русский язык. Для этого давайте определимся, где и что у нас находится в каком файле, какие элементы. Как видите, это многослойный пирог получается, в одном файле хранится часть ресурсов, отвечающих за изображение вверху меню.
Файл nav_header_main.xml
Вот конкретно в этом файле nav_header_main мы сейчас изменим название. Я напишу название на свой лад «NavDraw - боковое меню» в этом textview, в следующим TextView указан адрес android studio, но я напишу название своего сайта.
Картинку я пока менять не буду я не нашел честно говоря, но вы можете в принципе аналогичным образом прописать в папки drawable новую иконку. Они тут расположены в png формате, есть некоторые в xml.
Можно в принципе использовать либо такие, либо такие, но я пока просто покажу вам где она находится если захотите, будете менять уже под свои нужды. Давайте перезапустим наше приложение и посмотрим, что у нас получится.
По идее, данные должны обновиться, так работает большинство приложений, кто собирает на Android Studio.
И в принципе не надо здесь все с нуля как бы переписывать создавать, все уже готово.
Вот кстати, здесь отличие -меню будет работать, которое находится в правом углу, (три точки) без всяких шаманств, изощрений, не как в прошлый раз. В прошлом видео я вам показывал: прописываете кучу стиле и прочего.
Файл activity_main_drawer
Так давайте теперь найдем в папке меню
Вот непосредственно наши пункты, как видите, здесь схалтурили разработчики этого шаблона - они прописали хардкорно пункт 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() и я надеюсь вы уже знаете, как это делается и объяснять вам не надо.
теперь найдем конструкцию onNavigationItemSelected и в конструкцию if..else допишем
и укажем текст который будет появляться в центре нашего приложения по нажатию на кнопку.
Соответственно, для пункта nav_camera, который мы назвали почему-то импорт, потому как на иконке изображен фотоаппарат, мы назовем это действие "Нажата кнопка: Камера", "Нажата кнопка: Галерея"
Здесь может находиться какая либо процедура, то есть необязательно просто вот одно действие, прямое, сразу передать текст куда то туда то и все, то есть здесь можно вызвать, допустим, дополнительную активность, а скорее всего так вы будете делать, если вы этим интересуетесь, либо фрагмент какой-то откроется, либо новая активность.
Потому здесь достаточно богатое поле для деятельности, вспомните хотя бы приложение для aliexpress, сколько там пунктов находится всевозможных: магазин, купите, избранное, поделиться и настройки. Кстати, тут есть - инструменты это в принципе почти как настройки.
Обратите внимание - я добавил функцию finish() , она закроет приложение по нажатию на этот пункт.
Перезапустили проект и теперь как вы видите при нажатии на пункты меню,(исправлю камера на импорт)можно будет видеть, что наше боковое меню реагирует на воздействие нажмем на выход и приложение закрылось.
Сейчас немного займемся настройкой декоративного элемента, который у нас отвечает за рисунок и за градиент.
Градиент в side_nav_bar
В файле side_nav_bar прописан градиент который находится как background возле картинки.
Есть центральный цвет, есть начальный цвет, есть конечный цвет и есть угол на который будет повёрнут градиент.
Я специально не подбирал цвета которые хотел бы поставить сюда ну пока просто в виде эксперимента я вам покажу как это все меняется, как настраивается.
Если вы будете уже серьезно заниматься, разрабатывать свой собственный стиль приложение вы уже конкретно эти шестнадцатеричные цвета подберете, потому как я пока гадаю на кофейной гуще, если можно так выразиться.)))
Так изменим угол 135 градусов на 90, и через некоторое время некоторой задержкой обновляется наш градиент и вот сейчас картинка у нас под наклоном, и соответственно, обновилось приложение, и наше меню, изменился в макете наш градиент.
В принципе, можете подобрать любой переход, от светлого тона к тёмному цвету, либо посередине, чтобы барьер был.
Необязательно использовать градиент, можно указать начальный и конечный одинаковый цвет.
Перезапустим наше приложение, обновилось нашими меню, так оно аккуратно, компактно, если у вас пока много пунктов нет – можете ограничиться небольшим списком.
Смотрите видео Android Studio: Как сделать боковое меню с помощью NavigationDrawer:
Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!
начал изучать android разработку недавно. Писал небольшое приложение на android и в нем нужно сделать боковое меню . Я пробовал сделать с шаблоном из Android Studio, Navigation Drawer Activity, но раз я обращаюсь к вам, понятно, что у меня ничего не получилось. Я много гуглил свой вопрос, но нигде не нахожу подходящего туториала(единственное исключение, наверное является эта шикарная статья с Хабра, но вот зараза, здесь написано на Kotlin, а мне нужно на Java), пожалуйста расскажите ПОШАГОВО, как создать боковое меню в Android Studio?
Вот инструкция как добавить в приложение нужный вам макет. Будем рассматривать ситуацию, когда вы будете создавать новое приложение, учитывая приведенную информацию в вопросе. При создании нового проекта вы можете выбрать Drawer activity как вы уже пробовали и дальше студия все сделает за вас. Будут созданы все необходимые классы для поддержки, разметка (которую можно будет кастомизировать по вашему усмотрению), ресурсы для меню и тому подобное. Разобраться что для чего в таком варианте совсем несложно. Есть второй вариант - создавать приложение на основе пустой активности (Empty activity) и дальше все делать вручную. Для начала нужно создать проект и перейти в файл разметки activity_main.xml и добавить соответствующий код:
Дальше вам нужно добавить пункты меню которые будут отображаться, для этого переходим в файл строковых ресурсов и добавляем массив со своими данными:
Следующим шагом будет создание разметки пункта меню, поэтому создаем файл drawer_list_item.xml :
После создания разметки пункта меню, нужно подумать над тем как будет отображаться нажатия и отмечание выбранного пункта меню, поэтому создаем в папке drawable файл activated_background.xml :
и в ресурсах цвета добавляем нужный цвет:
После того как с оформлением закончено нужно подумать над логикой поведения нашего меню, вот активность:
ну и для корректной работы вам нужно создать необходимое кол-во фрагментов, которые будут показывать пользователю какие-то данные:
В данной статье я расскажу, как быстро добавить в ваше приложение для Android боковое меню (aka Navigation Drawer) в стиле Material Design. Для этого мы воспользуемся библиотекой, любезно предоставленной Mike Penz.
У вас получится Navigation Drawer, который:
- Соответствует последним рекомендациям по дизайну (Google Material Design Guidelines);
- Поддерживает использование нескольких Drawer (можно выдвигать второй справа);
- Поддерживает использование бейджей;
- Имеет простой и понятный интерфейс (API);
- Может выползать как под, так и поверх Status Bar;
- Позволяет менять иконки, цвета, бейджи во время выполнения;
- Использует AppCompat support library;
- Работает, начиная с API 14.
Создание проекта
Итак, выбираем в меню «File» -> «New Project. »:
Заполняем имя приложения, пакета, выбираем SDK.
Создавать проект мы будем с поддержкой минимального API Level равного 14, что соответствует Android 4.0 Ice Cream Sandwich, поскольку всё, что ниже, составляет менее 8% аудитории и привносит несоизмеримо большее количество головной боли:
В последних двух окнах оставляем все по умолчанию, жмем «Finish».
Android Support Library
Для того, чтобы красивый Navigation Drawer работал на версиях Android ниже 5.0 и выглядел в стиле Material Design, необходимо включить в проект библиотеку поддержки от Google, которая носит название v7 appcompat library. В текущей версии Android Studio (1.0.2) библиотека подключается по умолчанию при создании проекта. Проверьте это в файле проекта \app\build.gradle, в разделе dependencies должна быть строка (цифры могут быть не обязательно «21.0.3»):
а класс MainActivity должен наследоваться от ActionBarActivity
Также проверьте в \res\values\styles.xml, чтобы тема приложения наследовалась от Theme.AppCompat или ее вариаций без ActionBar (мы заменим ActionBar на ToolBar), например:
Подключение библиотеки MaterialDrawer
Добавьте в раздел dependencies файла \app\build.gradle строки
и нажмите появившуюся в верхней части окна кнопку «Sync Now» для синхронизации вашего проекта.
Подготовка разметки для Navigation Drawer
В главный layout приложения нужно добавить ToolBar. Приведите activity_main.xml к такому виду:
Создайте в папке layout файл drawer_header.xml со следующим содержанием
этот файл — разметка для верхней части Drawer'a, в которой находится картинка. Теперь положите в папку \res\drawable\ любую картинку с именем header.jpg, которая будет отображаться в верхней части Drawer'a, например эту:
Файл \res\strings.xml, содержащий строковые ресурсы, приведите к следующему виду
Инициализация Navigation Drawer
В методе onCreate вашей MainActivity мы инициализируем ToolBar, добавьте после setContentView следующий код:
Затем инициализируем и сам Navigation Drawer, добавьте ниже:
В случае появления ошибок, убедитесь, что ваша секция импортов в MainActivity выглядит так:
Теперь можно запустить приложение и оценить результат:
Улучшения Navigation Drawer
Чтобы Navigation Drawer еще точнее соответствовал рекомендациям от Google, можно сделать следующие улучшения (см. полный листинг MainActivity в конце статьи):
-
Скрывать клавиатуру при открытии NavigationDrawer:
Реализацию всех этих улучшений вы можете посмотреть в полном листинге MainActivity:
Как-то я искал набор иконок (icon pack) в стиле рисунков на листах бумаги в клеточку. Когда-то где-то видел такие иконки, а найти не могу. На глаза попало приложение, ошибочно принятое за такой набор иконок, но на самом деле оказавшееся альтернативой для меню приложений. Поигрался я с ним немного, но классическое меню приложений и иконки на рабочем столе для меня привычней. Хотя кому-то, может, и придётся в тему. Почитайте, посмотрите - не навязываю.
Итак, приложение PaperLaunch. Боковое меню приложений.
Причин установки данного приложения на ваш смартфон может быть (по моему скромному мнению) три:
Бонусом к этим трём причинам идёт возможность создания древовидной структуры ваших приложений.
Мне вот, признаюсь честно, стало любопытно. Но PaperLaunch - это не GravityBox и, тем более, не USSDDualWidget Pro, поэтому любопытство своё я удовлетворил за три минуты. Потом пару недель изредка пользовался приложением. Теперь, наверное, удалю.
Как оно работает
А как оно работает - вы сможете узнать из следующего скринкаста.
То есть вы касаетесь определённой части экрана (левый или правый край) и этим самым заставляете визуализироваться вершину айсберга - узкую вертикальную панель с надписью "PaperLaunch" и логотипом приложения. Из-за этой панели выглядывают квадратики со значками приложений, выбранных нами на этапе настройки PaperLaunch.
Увидеть на этом этапе названия приложений невозможно, поэтому приходится либо выбирать по памяти, либо ориентироваться по значкам (что, в принципе, довольно легко).
Сразу говорю - палец убирать от экрана нельзя до тех пор, пока не выберем нужное для запуска приложение.
Итак, допустим, я хочу запустить одно из приложений, находящихся в папке с файловыми и GPS-навигаторами (она называется у меня "Сусанины"). Для этого я перемещаю палец (не отрывая его от экрана) по основной панели с надписью "PaperLaunch" и наблюдаю, как значки (папок и приложений) по очереди полностью выдвигаются из-за основной панели. Когда выдвигается квадратик папки "Сусанины", я перевожу палец на неё. И она разворачивается в такую же панель, как и основная (которая вершина айсберга).
И опять повторяю предыдущие действия: провожу пальцем до места напротив значка необходимого приложения, допустим GPS Test, и передвигаю палец на него. Значок приложения опять-таки разворачивается в панель.
Всё, теперь можно убирать палец от экрана. Запустится выбранное приложение (GPS Test в моём случае).
Если палец не убирать от экрана, а вернуть его обратно к краю экрана, то все панельки свернутся и останется основная панель с выглядывающими из-за неё квадратиками-значками. Сворачивать не обязательно все панельки, можно только последнюю, то есть перейти обратно в папку "Сусанины" и выбрать в ней другое приложение.
Вот так вот и происходит запуск любого установленного в системе приложения. Единственное условие: предварительно это приложение необходимо добавить в меню PaperLaunch. Для этого открываем само приложение. При первоначальном запуске ничего особенного (и не особенного тоже) мы не увидим. Будет только в верхней части экрана наименование приложения и кнопка настроек на синей горизонтальной панели. А внизу экрана - круглая кнопка со знаком сложения. Да нет, конечно же не сложения, а добавления. Именно этой кнопкой можно добавлять новые элементы: ярлыки приложений, ярлыки действий и папки.
Нажимаем на кнопку "Добавить" и делаем несложный выбор: App или Folder. При выборе App (приложения) придётся сделать ещё один выбор среди приложений или действий.
Под действиями я понимаю именно действия, связанные с конкретным приложением. В PaperLaunch они называются Shortcuts. Буквально - короткий путь (англ.). Для обычного пользователя (меня, к примеру) это место на экране, куда можно ткнуть пальцем и заставить некое приложение выполнить конкретное действие, которое обычным способом мне за один тап не выполнить (необходимо сначала запустить приложение, потом перейти в настройки или меню и т.д.). Примером Shortcuts может служить контекстное меню некоторых приложений, появляющееся при долгом нажатии на их ярлыки. Скромный чёрно-белый выбор |
 По умолчанию отображаются только пользовательские приложения, но всегда можно поставить чекбокс "Show all" |
 "Шорткаты" в приложении PaperLaunch |
 Системные "шорткаты" в Android 7.1.1 |
Если же ваш выбор пал всё-таки на Folder, то далее необходимо дать создаваемой папке название (не оставлять же New Folder по умолчанию) и опять же добавить либо приложение, либо Shortcuts. А можно снова добавить папку и так до бесконечности, а на самом деле - не более десяти раз. Хотя и больше шести Paper-панелек на экране моего смартфона просто не поместится.
В итоге у меня получилась следующая структура. Папок в папках у меня нет, хватило двух уровней.
Ярлыки приложений изменить нельзя (ни значки, ни названия), а вот папки слегка поддаются редактированию (но всего лишь в части названия). Зато каждый элемент - ярлык или папку - можно перетащить в другое место, то есть изменить их порядок. Мне, например, удобнее, когда телефон находится в самом низу.
Любой элемент можно удалить, нажав на пиктограмму корзины.
Связано ли это с моим конкретным телефоном или это свойство приложения, но изменения в структуре отображаются на Paper-панельках только после перезапуска приложения. А ещё в приложении нет переключателя "Вкл./Выкл.". То есть по умолчанию Paper-меню для запуска приложений есть на вашем телефоне всё время, пока приложение висит в памяти. На самом деле это немного не так: как только вы добавили новый элемент или что-то удалили/переименовали - Paper-меню пропадает, даже несмотря на то, что приложение запущено и работает. Необходимо зайти в настройки, и только после этого Paper-меню появится. Ну а внесённые изменения - только после перезапуска приложения или перезагрузки телефона, как мы помним.Переходим к настройкам, раз уж оказалось, что без них никак. У меня параметры настроек зафиксированы вот в таком виде:
Параметр "Чувствительность" расширяет область экрана, отвечающую за вызов Paper-меню. В окне настроек она отображается вертикальной полосой синего цвета. Ширина этой полосы на четверти чувствительности составляет около 2-3 мм. На максимуме - около сантиметра.
Бегунки "Высота" и "Позиция" определяют вертикальный размер и позицию по отношению "верх/низ" той же самой области экрана для вызова Paper-панелек.
Параметр "Vibrate on activation" понуждает смартфон вибрировать при каждой активации Paper-меню.
Параметр "Show background" включает отображение практически прозрачного серого фона для Paper-меню.
Область экрана для вызова Paper-меню можно располагать как по правой стороне экрана (мне удобно именно так), так и по левой. За это действо отвечает параметр "Activation side".
Последний параметр - "Alignment" - задаёт выравнивание значков приложений и папок по вертикали (по центру удобнее всего, но это зависит от телефона и рук, его держащих).
Вот, собственно, и всё. Настроек минимум, только самые очевидные. А я бы ещё в приложение добавил долю возможностей по оформлению и кастомизации Paper-меню и Paper-панелек, а также переключатель "Вкл./Выкл.". А ещё - возможность размещения области экрана для активации Paper-меню на нижней стороне экрана. Или даже вызов Paper-меню заданным жестом. Но можно ли надеяться на какие-то доработки PaperLaunch - я не знаю. Последняя (текущая) версия датируется ноябрём 2017. В принципе, ещё есть надежда, но слабая.
Как-то и претензий набралось у меня к рассматриваемой софтинке, и вообще я её удалять собирался, да и какой-то особой надобности в ней у меня нет, а вот замечаю за собой, что время от времени "на автомате" запускаю приложения из Paper-меню. Так что пусть пока будет.
Рекомендовать? Рекомендую делать утреннюю зарядку (не забываем про здоровье!) и читать Helpix (но не в полночь, потому как спать тоже надо).
Читайте также: