Android — Android Navigation Drawer в существующее приложение


Содержание

Общий Navigation Drawer для нескольких окон

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

Android Studio 2.2.3

24.01.2020, 12:45

Создание окон в navigation drawer activity
Ребят, всем привет. Пытаюсь создать фрагменты в navigation drawer activity, но не могу сделать.

Navigation drawer
Скажите, как сделать так чтобы при открытии другого activity, navigation drawer можно было так же.

Navigation Drawer
помогите найти ошибку. код главного активити package ua.com.cls; import.

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

Navigation drawer
Как так подключить navigation drawer чтобы он был доступен не в одном а во всех или в нескольких.

24.01.2020, 12:49 2 24.01.2020, 12:53 3 24.01.2020, 12:58 [ТС] 4
24.01.2020, 12:58
24.01.2020, 13:05 5
24.01.2020, 13:20 [ТС] 6
24.01.2020, 13:48 7
24.01.2020, 13:52 [ТС] 8
24.01.2020, 14:33 9

тупо пустой фрагмент BlankFragment

разметка активити роли не играет, но для наглядности

24.01.2020, 18:01 10

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

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

PS: признаюсь, архитектура с разными окнами меня прельщает — т.к. будет множество объектов типа окно, просто у одних будет кнопка «Назад», а у других кнопка «Открыть меню». Этим проще в голове жонглировать, когда нужно программно воспроизвести какой-нибудь путь, открыв последовательно несколько окон.
Сейчас же мне надо жонглировать окнами с кнопкой назад, и одним большим окном с фрагментами.

24.01.2020, 18:31 11
24.01.2020, 18:38 12
25.01.2020, 11:16 13

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

Но если есть дровер и не хочется использовать фрагменты, то в природе есть архитектура на разных активити с единым дровером, пример которой и просит автор темы.
Мне попадалась статья на хабре, в которой была фраза, что обе архитектуры имеют право на существование (хотя там приводилася пример всё равно архитектуры на фрагментах). Собственно, я и хочу выяснить так ли это.

Я не пробовал, но думаю надо просто сделать одно активити с дровером, и унаследовать все прочие активити, где дровер нужен, от него. И переключаться — открывать новое активити на вершине стека, убивая все предыдущие. Но, повторюсь, я не пробовал ещё.

Добавлено через 6 минут
+ отключить анимацию открытия нового активити для красоты

Урок 27. Navigation. NavigationUI.

В этом уроке рассмотрим интеграцию Navigation Component c Overflow Menu, Navigation Drawer и BottomNavigationView.

Полный список уроков курса:

Сначала сделаю небольшое дополнение к прошлым урокам. В них вся работа с NavController велась в Activity, в котором находился контейнер NavHostFragment.

Код получения контроллера в Activity выглядит так:

Но контроллер может понадобится и в фрагменте, который находится в контейнере. В примерах это были Fragment1, Fragment2 и т.п.

В этих фрагментах, контроллер может быть получен так:

Где view — это любое View в этом фрагменте.

Пример использования в OnClickListener

Персонально для OnClickListener, кстати, создан отдельный метод Navigation.createNavigateOnClickListener, позволяющий повесить обработчик на кнопку так:

По нажатию на кнопку будет выполнена навигация к fragment2.

NavigationUI — набор методов, позволяющих интегрировать Navigation Component с меню, Navigation Drawer и BottomNavigationView.

Для использования, необходимо добавить в dependencies:

Overflow menu

Есть такое меню


Оно будет отображаться в Activity.

Обратите внимание на ID, которые я использовал в меню: @+id/fragment1, и т.д. Те же ID использованы для destination в графе:

Теперь в обработке нажатий используем метод NavigationUI.onNavDestinationSelected.

Под капотом будет выполнена навигация к destination с >

Соответственно при нажатии на пункт меню с >

Для пунктов меню можно использовать ID не только от destination, но и от action.

Есть Drawer, который отображает следующее меню

Обычно, чтобы обрабатывать нажатия на эти пункты меню, мы вешаем обработчик на NavigationView, который внутри DrawerLayout.

Но вместо этого мы можем сделать так:

Этот метод сам повесит обработчик на NavigationView и по нажатию на пункты меню будет выполнять навигацию к destination (или action) с тем же ID, что и у нажатого пункта меню. Также он сам будет выделять пункт меню (setChecked) и закрывать Drawer.

При этом параметру Pop To будет задан стартовый destination. Т.е. системная кнопка Back всегда будет возвращать нас в Fragment 1.

Все ок, но можно сделать еще лучше.

Добавляем интеграцию ActionBar. Теперь при навигации в ActionBar будет помещаться Label у destination. И иконка будет меняться, если находимся не в стартовом destination.

Нажатие на Home обрабатываем сами

BottomNavigationView

Есть BottomNavigationView, отображающий меню:

Чтобы обработать его нажатия, мы обычно вешаем обработчик. За нас это может сделать Navigation.

Метод setupWithNavController вешает листенер на BottomNavigationView и выполняет навигацию при нажатии на его элементы. При этом выполняет setChecked для нажатого элемента.

Системная кнопка Back всегда будет возвращать нас на стартовый destination.

Можно добавить интеграцию с ActionBar:

Теперь при навигации в ActionBar будет помещаться Label у destination. И иконка будет меняться, если находимся не в стартовом destination.

В этом случае надо самим обработать нажатие на Home.

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

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, но я напишу название своего сайта.

Картинку я пока менять не буду я не нашел честно говоря, но вы можете в принципе аналогичным образом прописать в папки 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, и через некоторое время некоторой задержкой обновляется наш градиент и вот сейчас картинка у нас под наклоном, и соответственно, обновилось приложение, и наше меню, изменился в макете наш градиент.

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

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

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

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

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

Смотрите видео Andro >

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

Как легко сделать Navigation Drawer и вкладки, используемые в популярных приложениях от Google

При использовании популярного приложения Play Маркет многие обратили внимание на вкладки для переключения контента. Такое применение вкладок можно найти и в других приложениях от Google, таких как Play Музыка, Play Пресса.

На этой почве возникает интерес, а иногда и необходимость (если заказчик просит) реализовать увиденное. Я не стал исключением и при проектировании нового приложения, дизайн которого был набросан на черновике, присутствовал очень схожий дизайн, хотя и имел всего несколько вкладок. Казалось бы, что сложного? Сейчас откроем официальную документацию, просмотрим необходимые разделы и приступим к делу. Но, изучив документацию, не смог обнаружить соответствующих примеров — и тут же возник новый вопрос. Почему Android разработчики из компании Google по умолчанию не предоставляют примеров с необходимой функциональностью, чтобы сделать это довольно просто, ведь это реализовано в каждом их приложении? Также, погуглив, нашлись аналогичные вопросы на Stack Overflow. Исходя из этого, оказалось, что существует проблема или, по крайней мере, нераскрытый вопрос, в котором следует разобраться.

Ниже хочу рассказать о том, как всё же можно реализовать паттерн Navigation Drawer вместе с вкладками, как в популярных приложениях от Google.

В примере будет использоваться интегрированная среда разработки Eclipse, но все действия можно будет воспроизвести, используя и другие среды, к примеру, недавно вышедшую и набирающую популярность Android Studio от компании Google, основанную на IntelliJ IDEA.

Создание проекта

Создадим новый проект. Для этого перейдем в File > New > Android Application Project. Заполним поля, такие как имя приложения, пакета и версии SDK. Далее проследуем по экранам, нажимая клавишу Next и оставляя всё по умолчанию.

Среда разработки для нас создаст новый проект со стандартной структурой.

Пример будет работать, начиная с API версии 8. Это обосновано тем, что пользователи ещё пользуются девайсами со старой версией Android. Ниже приведены данные о количестве устройств, работающих под управлением различных версий платформы на состояние 12.08.2014.

Action Bar для API 8

Но ActionBar, сочетающий в себе заголовок и меню, появился начиная с Android 3.0 (API 11). Для того, чтобы его использовать, необходимо подключить к проекту библиотеку Android-Support-v7-Appcompat, любезно предоставленную компанией Google. Детальную инструкцию по добавлению библиотеки к проекту можно найти по адресу: developer.android.com/tools/support-library/setup.html

Есть две возможности добавить библиотеку к проекту — без использования ресурсов и с использованием. В реализации этого проекта будет использоваться библиотека с использованием ресурсов. После того, как библиотека будет добавлена в дерево проектов, необходимо перейти в Properties, нажав по проекту правой клавишей мыши и выбрать в категориях Android, затем нажать клавишу Add. В появившемся списке выбрать android-support-v7-appcompat и нажать OK > Apply > OK. Библиотека добавлена в проект. Но если попытаться запустить приложение, то ActionBar будет ещё не виден. Необходимо в res/values/styles.xml изменить строчку:

в res/values-v11/styles.xml изменить строчку:

в res/values-v14/styles.xml изменить строчку:

Также в главной активности необходимо наследоваться не от Activity, а от ActionBarActivity (android.support.v7.app.ActionBarActivity). После проделанных действий и запуска приложения можно увидеть ActionBar, включая и на ранних версиях API.


Зайдем в папку Menu и отредактируем файл main.xml, чтобы выглядел следующим образом:

Необходимо обратить внимание на следующую строчку: xmlns:sabd=http://schemas.andro . Также следует зайти в strings.xml и изменить строчку:

Теперь меню будет иметь привычный вид.

Внедрение бокового меню

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

Изменим основной ресурс activity_main.xml:

Боковое меню будет заполняться в ListView, для этого добавим в string.xml строковый массив названий:

Необходимо определить, как будет выглядеть позиция в ListView. Для этого создадим в папке layout новый ресурс с названием drawer_list_item.xml:

Для функционирования работы созданного ресурса далее дополнительно создадим в папке res новую папку drawable и в ней создадим селектор activated_background.xml, поместив в него:

В папке values создадим ресурс для цветов color.xml и поместим туда цвет, который будет отвечать за выделение пункта списка в боковом меню:

Следующим шагом будет добавление иконок в приложение, а именно значка бокового меню. Скачать архив иконок можно по прямой ссылке с официального сайта Google по адресу: developer.android.com/downloads/design/Android_Design_Icons_20130926.zip. В архиве будет многочисленное число иконок для разных событий, но нужны иконки из папки Navigation_Drawer_Indicator. Следует каждый графический объект с названием ic_drawer.png поместить в проект с правильной плотностью вида drawable-.

Для оповещения о том, что меню открыто или закрыто, добавим в string.xml ещё записи:

Заодно удалим из ресурсов следующую строчку, так как она нам уже не понадобится:

Главное Activity

Теперь необходимо переписать класс MainActivity. Для поддержки старых устройств мы используем библиотеку поддержки Android Support Library (v4), при создании проекта она автоматически добавляется в папку libs. В листинге присутствуют комментарии, которые смогут дать возможность понять, как работает код. Для дополнительной информации можно воспользоваться официальной документацией: developer.android.com/training/implementing-navigation/nav-drawer.html. Ниже листинг.

Добавим фрагменты

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

Также добавим в ресурсы разметку для этих классов. Для примера, выложу разметку одного фрагмента screen_one.xml. В остальных необходимо изменить только текст атрибута android:text:

Добавим в string.xml ещё несколько строчек, которые будут информировать о том, какой экран открыт из меню:

На этом этапе реализация Navigation Drawer завершена. Если запустить приложение, мы увидим работу бокового меню. Как на старых устройствах:

Внедрение вкладок

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

0 — Navigation Drawer занимает самый верхний уровень навигации.
1 — Action Bar второй уровень.
2 — Вкладки нижний уровень.

Для реализации необходимо использовать два дополнительных класса, которые Google снова любезно предоставляет. Это классы SlidingTabLayout и SlidingTabStrip. Добавим их в проект. Для этого создадим новый пакет view, там создадим новые классы с соответствующим названием и переместим в них код. При возникновении ошибок в методе createDefaultTabView(Context context) класса SlidingTabLayout следует подавить предупреждение, дописав над методом @SuppressLint(«NewApi»)

Внесем все новые изменения для фрагмента ScreenOne. Первым делом изменим разметку screen_one.xml:

Важно использовать полное имя пакета для SlidingTabLayout, так как он включен в наш проект. Далее создадим новую разметку в папке layout для вкладок pager_item.xml:

Войдем в string.xml и изменим строчку:

Так как нам уже не понадобится строковый ресурс, вместо него мы сразу отобразим ViewPager с номером вкладки. Далее изменим класс ScreenOne соответствующим образом:

Теперь можно запустить приложение и увидеть, как работают вкладки как на старом устройстве:

Можно заметить, что боковое меню покрывает вкладки, как в правилах навигации и приложениях от Google:

На этом пример полностью завершён и его можно использовать.

Вкладки Action Bar

Хочется отметить ещё один последний, важный момент. Многие «путают» реализованные вкладки с вкладками ActionBar, они выглядят похоже:

Но у них реализация другая, поведение и в горизонтальной ориентации переносятся в ActionBar:

Если добавить вкладки через ActionBar, то боковое меню Navigation Drawer не перекроет вкладки, а выедет под ними:

На этом всё. Спасибо за внимание и приятного вам кодинга.

Среда разработки – Eclipse
Минимальная версия Android – >= 8

Перевод статьи «Фрагментарный Navigation Drawer»

В кратких обзорах Общих парадигм навигации мы обсуждаем различные навигационные структуры, доступные в приложениях на Android. Одной из наиболее гибких является Navigation Drawer. На конференции I/O 2015 Google выпустили в релиз NavigationView, что значительно упрощает его создание, по сравнению с прежними задокументированными инструкциями.

С релизом Android 5.0 Lolipop, navigation drawer в новом стиле material design размещается по всей высоте экрана и отображается над ActionBar, перекрывая полупрозрачный StatusBar. Прочитайте navigation drawer в стиле material design, чтобы ознакомиться с инструкциями по стилизации вашего navigation drawer.

Использование

В этом руководстве объясняется настройка drawer’а, оформленного в стиле базового material design’а и наполненного элементами навигации, которые переключают различные фрагменты в зоне контента. Таким образом, можно определить несколько фрагментов, а затем определить список вариантов, которые будут отображаться в списке элементов drawer’ов. Каждый элемент при нажатии будет внедрен в соответствующий фрагмент во view-контейнере activity.

Установка

Не забудьте установить библиотеку Design Support от Google перед тем как использовать их новый NavigationView, объявленный в качестве составляющей релиза Android M. NavigationView должен быть обратно совместим со всеми версиями Android, вплоть до 2.1.

Убедитесь, что у вас есть эта Gradle-зависимость, добавленная к вашему файлу app/build.gradle:

Загрузка иконок элементов Nav Drawer’а


Загрузите представленные ниже иконки и добавьте их в ваши папки drawable, копируя и вставляя их в папку drawable, либо используя новое диалоговое окно New Image Asset, чтобы создать версии для любой плотности пикселей.

Если вы используете диалоговое окно New Image Asset, то выберите приоритетный цвет и измените имя ресурса.

Ресурсы для настройки Drawer’а

Создайте файл menu/drawer_view.xml:

Обратите внимание, что вы можете установить один из этих элементов в качестве элемента, выбранного по умолчанию, при помощи andro >

При этом вы можете создать подзаголовки и в то же время группировать элементы вместе:

Определение фрагментов

Далее, вы должны определить свои фрагменты, которые будут отображаться внутри drawer’а. Это могут быть любые поддерживаемые фрагменты, которые вы определили в своём приложении. Убедитесь, что все фрагменты наследуются от android.support.v4.app.Fragment.

Настройка панели инструментов

Чтобы наш navigation drawer плавно выдвинулся над ActionBar’ом, нам нужно использовать новый виджет Toolbar, как это повелось в 21’ой версии библиотеки AppCompat. Toolbar можно встроить в вашу иерархию view’ов, что гарантирует скольжение drawer’а над ActionBar’ом.

Создайте новый файл layout’а «res/layout/toolbar.xml» с помощью следующего кода:

Обратите внимание, что когда атрибут android:fitsSystemWindows установлен для view как true, view будет расположен так, как если бы присутствовали StatusBar и ActionBar, т. е. находящийся сверху UI получает такой внутренний отступ, который будет достаточным для того, чтобы UI не был сокрыт панелью навигации. Без этого атрибута величина внутреннего отступа будет недостаточно учтена при расчёте ToolBar’а:

Нам требуется, чтобы у view основного контента была панель навигации и в связи с этим атрибут android:fitsSystemWindows установлен как true для Toolbar’а.

Чтобы использовать Toolbar в роли ActionBar’а, вам нужно отключить дефолтный ActionBar. Это можно сделать путём установки темы приложения в файле styles.xml.

Также обратите внимание, что обычно цветовую схему вы должны определить посредством перехода к Material Palette и выбора основного и тёмного основного цветов. Для этого примера мы выберем цвета, основанные на фиолетовом, как показано на скриншоте.

Примечание: Если вы забыли отключить ActionBar в styles.xml, то, вероятно, вы увидите исключение java.lang.illegalStateException с сообщением об ошибке, которое гласит: «У этой Activity уже есть action bar, предоставленный оформлением окна». Не запрашивайте Window.FEATURE_ACTION_BAR, а установите вместо этого в своей теме windowActionBar к false, чтобы использовать Toolbar. Если вы видите это сообщение, вы должны убедиться, что придерживаетесь предыдущих шагов.

Настройка Drawer’а в Activity

Давайте теперь настроим главный navigation drawer, основанный на приведенном ниже файле layout’а, полная настройка drawer’а которого находится в res/layout/activity_main.xml. Обратите внимание, что Toolbar добавляется в качестве первого потомка основного контентного view посредством добавления тега include.

Давайте теперь настроим drawer в нашей activity. Мы также можем заодно настроить иконку меню.

Настройте обработчик так, чтобы он отвечал на события нажатия по элементам навигации и выгружал фрагмент. Это можно включить прямо в activity:

Добавляем navigation header

Также NavigationView принимает кастомный атрибут, который может ссылаться на layout, предоставляющий header нашего layout’а. Например, можно создать файл layout/nav_header.xml, аналогичный следующему:

Затем вы бы сослались на это в layout’е res/layout/activity_main.xml в NavigationView с помощью атрибута app:headerLayoutcustom:

Этот app:headerLayout автоматически раздувает указанный layout до header’а.

Получение ссылок на заголовки

Примечание: В версии 23.1.0 библиотеки design support NavigationView переходит на использование RecyclerView’а, и выбрасываются NPE (null-исключения) при поиске в header’е до тех пор, пока header не будет добавлен во время выполнения. Если вам нужно получить ссылку на header, то вам необходимо использовать новый метод getHeaderView(), представленный в последнем обновлении v23.1.1:

Анимируем иконку гамбургера

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

В вашем файле res/values/strings.xml добавьте:

Нам нужно связать вместе DrawerLayout и Toolbar:

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

При этом нам нужно изменить метод onOptionsItemSelected() и позволить ActionBarToggle обрабатывать события.

ActionBarToggle будет осуществлять ту же функцию, что и раньше, но добавляет еще немного проверок и делает возможными щелчки мышью по иконке, чтобы открывать и закрывать drawer. Больше контекста можно увидеть в исходном коде.

Также стоит отметить, что ActionBarDrawerToggle отображает вам кастомный DrawerArrowDrawable, относящийся к иконке гамбургера.

Кроме того, убедитесь, что используется версия android.support.v7.app.ActionBarDrawerToggle. android.support.v4.app.ActionBarDrawerToggle устарела.

Делаем Status Bar полупрозрачным

Чтобы получить прозрачный status bar и плавно выдвигающийся над ним drawer, нам необходимо присвоить true атрибуту android:windowTranslucentStatus. Поскольку этот стиль не доступен для устройств с pre Kitkat, мы добавим файл res/values-v19/styles.xml для API, начиная с его 19 версии.

Примечание: Если вы измените ваш res/values/styles.xml напрямую с помощью этой строчки android:windowTranslucentStatus, то, вероятно, вам понадобится выполнить компиляцию только для SDK 19’ой версии и старше, что, очевидно, ограничит вас в поддержке многих более старых устройств.

В res/values-v19/styles.xml можем добавить следующее:

Теперь, если запустите своё приложение, то должны увидеть navigation drawer и сможете выбирать из своих фрагментов.

Добавление custom view’ов navigation drawer’у

Одно из улучшений, включённых в библиотеку design support 23.1.0 — добавление поддержки custom view для элементов navigation drawer. Например, мы можем создать кастомный переключатель, наподобие navigation drawer’а от Google Play Movies для одной из этих строк:

Принцип тот же, что и при добавлении элементов ActionView в ActionBar. Нам нужно просто определить разделение layout’а, такое же, как в представленном ниже сниппете. Мы обратимся к этому файлу «action_view_switch.xml»:

Потом мы ссылаемся на этот layout, используя атрибут app:actionLayout. Нужно задать заголовок, но его можно сделать и пустым:

Вы можете подключить события непосредственно в XML, при условии, что ваша Activity будет реализовывать метод. Чтобы программно посредством Java добавить обработчик события к переключателю вам сначала понадобится получить экземпляр меню и иметь доступ к соответствующему ActionView:


Кастомные виджеты, использующие app:actionViewClass при этом тоже можно использовать для элементов меню аналогичным образом, что и сейчас. Для дополнительных сведений об Action View’ах, смотрите руководство по добавлению SearchView к ActionBar’у.

Неизменяемый Navigation Drawer

В определенных ситуациях, особенно на планшетах, navigation drawer должен быть постоянным элементом activity, действующим как sidebar:

Для достижения такого эффекта посмотрите на представленные ниже ссылки, которые описывают один подход:

Сторонние библиотеки также могут облегчить осуществление этого.

Сторонние библиотеки

Есть несколько сторонних библиотек, которые всё еще актуальны в качестве возможных альтернатив прямому использованию DrawerLayout’а, и которые автоматически предоставляют определенные элементы material design’а.

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

Ограничения

Текущая версия библиотеки design support включает в себя ограничения. Основная проблема связана с системой, которая выделяет текущий элемент в навигационном меню. Атрибут itemBackground для NavigationView не обрабатывает корректно состояние «отмечено» для элемента: почему-то выделяются либо все элементы, либо ни один из них. Это делает данный атрибут по сути дела непригодным для большинства приложений.

Альтернатива фрагментам

Несмотря на то, что многие примеры navigation drawer’а показывают, как можно использовать фрагменты с navigation drawer, вы также можете использовать RelativeLayout/LinearLayout, если желаете воспользоваться drawer’ом как оверлеем для вашей отображаемой в данный момент Activity.

Вы можете вместо использовать

Вместо вот этого:

Вы можете использовать контейнер LinearLayout, чтобы раздуть Activity напрямую:

Ссылки

Спасибо, если дочитали до конца! Приглашаю вас в свою группу переводов материалов о программировании: https://vk.com/web_translate; в Telegram: https://telegram.me/web_translate, https://telegram.me/joinchat/EQpU2gkfzdUJ8nnOCKnVlg.

Перевёл и оформил Romanov Sergei, 16.02.2020.

Update UI components with NavigationUI

The Navigation Architecture Component includes a NavigationUI class. This class contains static methods that manage navigation with the top app bar, the navigation drawer, and bottom navigation.

Listen for navigation events

Interacting with the NavController is the primary method for navigating between destinations. The NavController is responsible for replacing the contents of the NavHost with the new destination. In many cases, UI elements—such as a top app bar or other persistent navigation controls like a BottomNavigationBar —live outs >NavHost and need to be updated as you navigate between destinations.

NavController offers an OnDestinationChangedListener interface that is called when the NavController ‘s current destination or its arguments change. A new listener can be registered via the addOnDestinationChangedListener() method. Note that when calling addOnDestinationChangedListener() , if the current destination exists, it is immediately sent to your listener.

NavigationUI uses OnDestinationChangedListener to make these common UI components navigation-aware. Note, however, that you can also use OnDestinationChangedListener on its own to make any custom UI or business logic aware of navigation events.

As an example, you might have common UI elements that you intend to show in some areas of your app while h >OnDestinationChangedListener , you can selectively show or hide these UI elements based on the target destination, as shown in the following example:

Kotlin

Top app bar

The top app bar provides a consistent place along the top of your app for displaying information and actions from the current screen.

NavigationUI contains methods that automatically update content in your top app bar as users navigate through your app. For example, NavigationUI uses the destination labels from your navigation graph to keep the title of the top app bar up-to-date.

When using NavigationUI with the top app bar methods discussed below, the label you attach to destinations can be automatically populated from the arguments prov > in your label.

NavigationUI provides support the following top app bar types:

AppBarConfiguration

NavigationUI uses an AppBarConfiguration object to manage the behavior of the Navigation button in the upper-left corner of your app’s display area. By default, the Navigation button is hidden when a user is at a top-level destination of a navigation graph and appears as an Up button in any other destination.

To use the start destination of your navigation graph as the only top-level destination, you can create an AppBarConfiguration object and pass in the corresponding navigation graph, as shown below:

Kotlin

If you want to customize which destinations are considered top-level destinations, you can instead pass a set of destination IDs to the constructor, as shown below:

Kotlin

Create a Toolbar

To create a Toolbar with NavigationUI , first define the bar in your main activity, as shown below:

Next, call setupWithNavController() from your main activity’s onCreate() method, as shown below:

Kotlin

Include CollapsingToolbarLayout

To include a CollapsingToolbarLayout with your Toolbar, first define the Toolbar and surrounding layout in your main activity, as shown below:

Next, call setupWithNavController() from your main activity’s onCreate method, as shown below:

Kotlin

Action bar


To add navigation support to the default action bar, call setupActionBarWithNavController() from your main activity’s onCreate() method, as shown below. Note that you need to declare your AppBarConfiguration outs >onCreate() , since you also use it when overr >onSupportNavigateUp() :

Kotlin

Next, overr >onSupportNavigateUp() to handle Up navigation:

Kotlin

Tie destinations to menu items

NavigationUI also prov >NavigationUI contains a helper method, onNavDestinationSelected() , which takes a MenuItem along with the NavController that hosts the associated destination. If the id of the MenuItem matches the id of the destination, the NavController can then navigate to that destination.

As an example, the XML snippets below define a menu item and a destination with a common id , details_page_fragment :

If your menu was added via the Activity’s onCreateOptionsMenu() , for example, you can associate the menu items with destinations by overr >onOptionsItemSelected() to call onNavDestinationSelected() , as shown below:

Kotlin

Now, when a user clicks the details_page_fragment menu item, the app automatically navigates to the corresponding destination with the same id .

Add a navigation drawer

The navigation drawer is a UI panel that shows your app’s main navigation menu. The drawer appears when the user touches the drawer icon in the app bar or when the user swipes a finger from the left edge of the screen.

The drawer icon is displayed on all top-level destinations that use a DrawerLayout . Top-level destinations are the root-level destinations of your app. They do not display an Up button in the app bar.

To add a navigation drawer, first declare a DrawerLayout as the root view. Ins >DrawerLayout , add a layout for the main UI content and another view that contains the contents of the navigation drawer.

For example, the following layout uses a DrawerLayout with two child views: a NavHostFragment to contain the main content and a NavigationView for the contents of the navigation drawer.

Next, connect the DrawerLayout to your navigation graph by passing it to AppBarConfiguration , as shown below:

Kotlin

Next, in your main activity >setupWithNavController() from your main activity’s onCreate() method, as shown below:

Android — Android Navigation Drawer в существующее приложение

Гайдлайны Android лихо нарушают известные приложения (нижний таббар у Инстаграма). Приложения гугла, менее лихо, но тоже нарушают. Я сильно удивился, когда в официальном подкасте Android Design In Action запрещают помещать настройки в Navigation Drawer, но гугловские Play Music и Play Books через полгода поместили их именно туда. Следовать рекомендациям гугла про дизайн или нет — вопрос спорный.

Моя точка зрения — стоит. Платформа обретает целостность, почти все свежие приложения следуют гайдлайнам и получается красиво. Инстаграмы будут посрамлены.

Я собрал типичные ошибки из раздела гайдов Pure Android, эпизодов официального подкаста Android Design In Action Common UX Issues и Navigation Anti Patterns и дополнил примерами из российских бизнес приложений.

Элементы интерфейса и иконки других платформ

Не стилизуйте кнопки, поля ввода и другие элементы интерфейса под iOS6, 7 или Windows Phone. Посмотрите как правильно выглядят элементы в Building Blocks и приложениях от Google.

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

Am.ru стилизует табы под iOS6, а Auto.ru кнопки.

Таббар внизу

Казалось, переносить tabbar вверх при портировании iOS приложений на Android мобильные студии научились еще полтора года назад. Но Сбербанк выпустил новую версию с tabbar внизу:

Пользователей которые используют ваше приложение и на iOS и на Android не существует. Нет причин клонировать iOS навигацию или дизайн.

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

Правильно сделано в Delivery Club. При тапе на бургеры табы скрываются:

Неправильно у Ozon.ru, Wildberries и Яндекс Электричек, при переходе на внутренние экраны табы остаются.

Смесь навигации и действий в Navigation Drawer

Изначально Navigation Drawer (боковая панель) предназначался только для навигации. «Настройки» и «Сообщить об ошибке» рекомендовали убирать в Action Bar. Но теперь Google передумал и размещает действия внизу Navigation Drawer, однозначно отделяя их от навигации.

У многих приложений встречается неправильная смесь навигации и действий: Ulmart, HeadHunter, Из рук в руки, Техносила. Банк Тинькова вообще превратил Navigation Drawer во что-то странное.

Это некорректно и сбивает пользователей с толку.

Некорректные иконки на страницах из Navigation Drawer

На всех экранах из Navigation Drawer должна быть иконка из трех полосок, на вложенных экранах — стрелочка назад.

Из рук в руки не имеет такой иконки вообще. Ulmart показывает стрелку назад на некоторых экранах из Navigation Drawer. HeadHunter показывает стрелку назад вместо иконки ND.

Неправильная анимация появления экранов из Navigation Drawer

Новые экраны в Андроид появляются, растягиваясь из центра экрана. А при выборе экрана из Navigation Drawer боковая панель уезжает и экран плавно появляется без растяжения.

Неправильная анимация реализована в приложениях Молотка и ТКС банка.

Модальные диалоги загрузки

Модальные диалоги загрузки ужасны, тем более большинство из них нельзя закрыть кнопкой «Назад». Правильно — индикатор загрузки прямо на экране. Идеально — загрузка данных в фоне.

Модальные диалоги загрузки используются в Объявлениях Из Рук в Руки, Am.ru, Яндекс Авто и Ситилинке.

Только портретная ориентация экрана


Большинство русских бизнес-приложений работает только в портретной ориентации. Такие приложения нельзя использовать на планшетах. И часть пользователей используют телефоны горизонтально (держалка в машине, например) им вы также доставляете неудобства.

По-моему, пункт спорный. Но это официальная позиция Google, посмотрите Play, Music или Books. Ребята из Android Design In Action утверждают, что реализовать поддержку альбомной ориентации наполовину можно за пару часов (и пару недель на остальную половину :).

Правильно сделано у Sports.ru, HeadHunter, Ситилинка, Новостей Mail.ru.

Неправильно — почти у всех остальных.

От редактора

Надеюсь, что вы проверите свои Android-приложений, и будете следовать стандартам. Вместе мы сможем сделать Android лучше :)

How to Code a Navigation Drawer for an Android App

The material design team at Google defines the functionality of a navigation drawer in Android as follows:

The navigation drawer slides in from the left and contains the navigation destinations for your app.

An example of a popular Android app that implements the navigation drawer is the Inbox app from Google, which uses a navigation drawer to navigate to different sections of the application. You can check it yourself by downloading the Inbox app from the Google Play store, if you don’t already have it on your device. The screenshot below shows Inbox with the navigation drawer pulled open.

The user can view the navigation drawer when they swipe a finger from the left edge of the activity. They can also find it from the home activity (the top level of the app), by tapping the app icon (also known as the «hamburger» menu) in the action bar.

Note that if you have many different destinations (more than six, say) in your app, it’s recommended that you use a navigation drawer.

In this post, you’ll learn how to display navigation items ins >DrawerLayout and NavigationView API to perform this task. For a bonus, you’ll also learn how to use the Android Studio templates feature to quickly bootstrap your project with a navigation drawer.

A sample project (in Kotlin) for this tutorial can be found on our GitHub repo so you can easily follow along.

Prerequisites

To be able to follow this tutorial, you’ll need:

Fire up Andro >NavigationDrawerDemo ) with an empty activity called MainActivity . Make sure to also check the Include Kotlin support check box.

2. Adding the DrawerLayout and NavigationView

To begin using DrawerLayout and NavigationView in your project, you’ll need to import the design support and also the Android support artifact. So add these to your module’s build.gradle file to import them.

Also, include both the DrawerLayout w >NavigationView widget in your res/layout/activlty_main.xml file.

Here we created a DrawerLayout w >drawer_layout . The tools:openDrawer property is used to display the navigation drawer when the XML layout is open in Android Studio design view.

The official documentation says the following about DrawerLayout :

DrawerLayout acts as a top-level container for window content that allows for interactive «drawer» views to be pulled out from one or both vertical edges of the window.

After adding the DrawerLayout w >@layout/app_bar_main .

Here is my app_bar_main.xml resource file. This file simply has a CoordinatorLayout , an AppBarLayout , and a Toolbar widget.

Finally, we created a NavigationView w >NavigationView :

NavigationView represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.

In the NavigationView XML w >android:layout_gravity attribute with value start . This is used to position the drawer—you want the drawer to come out from left or right (the start or end on platform versions that support layout direction). In our own case, the drawer will come out from the left.

We also included an app:headerLayout attribute which points to @layout/nav_header_main . This will add a View as a header of the navigation menu.

Here is my nav_header_main.xml layout resource file:

This layout file simply has a LinearLayout , an ImageView , and a TextView .

To include the menu items for the navigation drawer, we can use the attribute app:menu with a value that points to a menu resource file.

Here is the res/menu/activity_main_drawer.xml menu resource file:

Here we have defined a Menu using the which serves as a container for menu items. An creates a MenuItem , which represents a single item in a menu.

We then defined our first menu group using the . A serves as an invisible container for elements—menu items in our case. Each of the elements has an > for us when shown in the navigation drawer.

A can also contain a nested element in order to create a submenu—we d > . Notice that this last has a title property.

Note that when showing the navigation list items from a menu resource, we could use a ListView instead. But, by configuring the navigation drawer with a menu resource, we get the material design styling on the navigation drawer for free! If you used a ListView , you would have to maintain the list and also style it to meet the recommended material design specs for the navigation drawer.

3. Initialization of Components

Next, we are going to initialize instances of our DrawerLayout and ActionBarDrawerToggle . Initialization is going to happen ins >onCreate() in MainActivity.kt.

The ActionBarDrawerToggle sets up the app icon located on the left of the action bar or toolbar to open and close the navigation drawer. To be able to create an instance of ActionBarDrawerToggle , we have to provide the following parameters:

  • a parent context—for example, in an Activity you use this , while in a Fragment you call getActivity()
  • an instance of the DrawerLayout w >ActionBar
  • the icon to place on top of the app icon to indicate that there is a toggle
  • the string resources for the open and close operations respectively (for accessibility)

We invoked the method addDrawerListener() on a DrawerLayout so as to connect an ActionBarDrawerToggle with a DrawerLayout .

Note that we also enable the app icon via setHomeButtonEnabled() and enable it for “up” navigation via setDisplayHomeAsUpEnabled() .

We then forward the onPostCreate() , onConfigurationChanged() , and onOptionsItemSelected() activity callback methods on to the toggle:

Here is what the syncState() does, according to the official documentation:


Synchronizes the state of the drawer indicator/affordance with the linked DrawerLayout. This should be called from your Activity ‘s onPostCreate method to synchronize after the DrawerLayout’s instance state has been restored, and any other time when the state may have diverged in such a way that the ActionBarDrawerToggle was not notified. (For example, if you stop forwarding appropriate drawer events for a period of time.)

4. Testing the App

At this point, we can run the app!

As you can see, launching the app will show the “hamburger” navigation drawer icon in the action bar. Try tapping this app icon to open the drawer. Also, clicking on the navigation drawer items won’t do anything—we’re going to handle that part in the next section.

5. Handling Click Events

Now, let’s see how to handle click events for each of the items in the navigation drawer. Note that clicking on any item is supposed to take you to a new Activity or Fragment—that’s why it’s called a navigation drawer!

First, your activity needs to implement the NavigationView.OnNavigationItemSelectedListener .

By implementing this contract or interface, we must now overr >onNavigationItemSelected() .

This method is invoked when an item in the navigation menu is selected. We used the when expression to perform different actions based on the menu item that was clicked—the menu item >when expression.

Next, we have to initialize our NavigationView and set this listener ins >onCreate() of our activity.

Run the project again!

When you click on some items, a toast message is displayed—just what we expected. But remember that clicking on an item should take the user to a new Activity or Fragment (we ignored this here for brevity’s sake).

You will notice that when you click on an item, the drawer still remains. It would be better if it closed automatically anytime an item was clicked. Let’s see how to do that.

To close the drawer after a link has been clicked, simply invoke closeDrawer() on an instance of DrawerLayout and pass GravityCompat.START to the method.

Run the project one more time and see the result!

6. Handling the Back Button Being Pressed

When the drawer is open, it would be a better user experience not to close the home activity if the Back button is pressed. This is the way popular apps like Google’s Inbox app work.

So, when the drawer is open and the Back button is pressed, only close the drawer instead of the current home activity. Then, if the user presses the Back button again, the home activity should be closed.

Here’s how we can achieve this:

Run the project again and test it out!

7. Bonus: Using Android Studio Templates

Now that you have learnt about the APIs involved to create a navigation drawer, I’ll show you a shortcut that will make it faster next time. You can simply use a template instead of coding a navigation drawer Activity from scratch.

Android Studio provides code templates that follow the Android design and development best practices. These existing code templates (available in Java and Kotlin) can help you quickly kick-start your project. One such template can be used to create a navigation drawer activity.

I’ll show you how to use this handy feature in Android Studio.

For a new project, fire up Android Studio.

Enter the application name and click the Next button.

You can leave the defaults as they are in the Target Android Devices dialog. Click the Next button again.

In the Add an Activity to Mobile dialog, scroll down and select Navigation Drawer Activity. Click the Next button after that.

In the last dialog, you can rename the Activity name, layout name or title if you want. Finally, click the Finish button to accept all configurations.

Android Studio has now helped us to create a project with a navigation drawer activity. Really cool!

You are strongly advised to explore the code generated.

You can use templates for an already existing Android Studio project too. Simply go to File > New > Activity > Navigation Drawer Activity.

The templates that come included with Android Studio are good for simple layouts and making basic apps, but if you want to kick-start your app even further, you might consider some of the app templates available from Envato Market.

They’re a huge time saver for experienced developers, helping them to cut through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Conclusion

In this tutorial, you learned how to create a navigation drawer in Andro >DrawerLayout and NavigationView API from scratch. We also explored how to easily and quickly use the Android Studio templates to create a navigation drawer.

I highly recommend checking out the official material design guidelines for navigation drawers to learn more about how to properly design and use navigation drawers in Android.

To learn more about coding for Android, check out some of our other courses and tutorials here on Envato Tuts+!

Andro >

То, что я пытаюсь сделать, имеет меню NavigationDrawer следующим образом: NavigationDrawer

Я выяснил, как менять макеты при нажатии пунктов меню, но как я могу загрузить новое действие без потери меню?

Мой главный вопрос:

Например, допустим, один из моих опций меню приведет вас к макету, где есть некоторые кнопки, которые что-то делают. Мне нужно загрузить сопроводительную активность / класс, который будет обрабатывать действия и функциональные возможности этой конкретной «страницы» в приложении. Если другой параметр меню приведет вас к макету с изображением, например, это будет другое действие без всего этого кода, который обрабатывает функциональность кнопок, поскольку на этом экране нет кнопок.

Надеюсь это имеет смысл! Я следил за многими учебниками / видеороликами в Интернете, используя несколько методов (фрагменты и т. Д.), Но ничего не ответил на мой вопрос.

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

Используйте ответ @ Рассела. Сделайте основное действие, имеющее framelayout, обычно называемое content_frame, которое охватывает всю деятельность. Эта операция имеет код для навигационного ящика. При нажатии кнопки вы можете заменить содержимое этого макета на макет нужного фрагмента (т. Е. Фрагмент с несколькими кнопками или сказать изображение). Таким образом, элементы в ящике – это все фрагменты. В учебниках фрагменты вызываются через getFragmentManager (). Посмотрите серию видеороликов на навигационном ящике этими парнями, sl > Попробуйте реализовать его, когда вы идете по видео


Я лично предпочитаю этот метод, но он имеет свои ограничения. Создайте базовую активность, в которой находится код для навигационного ящика. Это имеет framelayout, обычно называемый content_frame, который охватывает всю деятельность. Действия, требующие наличия ящика, расширяют эту базовую активность вместо приложения или активности. Инфляция компоновки работает следующим образом: getLayoutInflater().inflate(R.layout.activity_this, contentFrameLayout); Вместо setContentView . Здесь действия начинаются через startActivity . Недостатки этого метода: а) BaseActivity уничтожается и воссоздается каждый раз, когда пользователь меняет активность. B) Активность может распространяться только на один класс, который по умолчанию становится baseActivity Pros: a) Вы можете поддерживать стек деятельности. B) Каждое действие может иметь свои собственные правила изменения конфигурации и правила onsaveInstance. C) Эти действия могут иметь отдельные фрагменты, которые используют эту деятельность для общения. Попытка сделать это в первом методе будет включать в себя основную деятельность, реализующую огромное количество интерфейсов без необходимости (вы узнаете об интерфейсах в общении с фрагментами)

Благодаря вышеприведенным ответам я смог сделать именно то, что хотел, вот что я сделал для тех, кто ищет это в будущем:

My activity_main.xml выглядит следующим образом:

Это стандартный DrawerLayout, который объединяет все биты и куски для меню NavigationDrawer. Важным дополнением к этому является бит FrameLayout …, которому я дал ID content_frame. В этом случае все другие макеты, используемые другими видами деятельности, будут задвинуты / добавлены / завышены.

Моя BaseActivity.java выглядит так:

Теперь в методе onNavigationItemSelected существует оператор switch, который обрабатывает то, что происходит, когда выбран каждый пункт меню. Это важный бит:

Вам нужно заменить «TheClassYouWantToLoad» на свой собственный класс. Теперь в этом новом классе (который предположительно требует, чтобы некоторые новые элементы пользовательского интерфейса загружались), вам необходимо следующее:

И замените «the_layout_you_want_to_load» на имя макета, который вы хотите загрузить.

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

Используйте фрагменты, но добавьте элементы пользовательского интерфейса в макет действия вне FrameLayout (id: content_frame), а затем, щелкнув элемент меню, транзакция фрагмента повлияет только на content_frame FrameLayout, оставив все остальные элементы макета.

Повесьте туда, приятель, это только становится яснее отсюда … пока вы не попадете в следующую стену: D

Информационный портал по безопасности

Информационный портал по безопасности » Программирование » Веб-разработка » Как легко сделать Navigation Drawer и вкладки, используемые в популярных приложениях от Google

Как легко сделать Navigation Drawer и вкладки, используемые в популярных приложениях от Google

Автор: admin от 12-09-2014, 11:46, посмотрело: 1489

При использовании популярного приложения Play Маркет многие обратили внимание на вкладки для переключения контента. Такое применение вкладок можно найти и в других приложениях от Google, таких как Play Музыка, Play Пресса.

На этой почве возникает интерес, а иногда и необходимость (если заказчик просит) реализовать увиденное. Я не стал исключением и при проектировании нового приложения, дизайн которого был набросан на черновике, присутствовал очень схожий дизайн, хотя и имел всего несколько вкладок. Казалось бы, что сложного? Сейчас откроем официальную документацию, просмотрим необходимые разделы и приступим к делу. Но, изучив документацию, не смог обнаружить соответствующих примеров — и тут же возник новый вопрос. Почему Android разработчики из компании Google по умолчанию не предоставляют примеров с необходимой функциональностью, чтобы сделать это довольно просто, ведь это реализовано в каждом их приложении? Также, погуглив, нашлись аналогичные вопросы на Stack Overflow. Исходя из этого, оказалось, что существует проблема или, по крайней мере, нераскрытый вопрос, в котором следует разобраться.

Ниже хочу рассказать о том, как всё же можно реализовать паттерн Navigation Drawer вместе с вкладками, как в популярных приложениях от Google.

В примере будет использоваться интегрированная среда разработки Eclipse, но все действия можно будет воспроизвести, используя и другие среды, к примеру, недавно вышедшую и набирающую популярность Android Studio от компании Google, основанную на IntelliJ IDEA.

Создание проекта

Создадим новый проект. Для этого перейдем в File > New > Android Application Project. Заполним поля, такие как имя приложения, пакета и версии SDK. Далее проследуем по экранам, нажимая клавишу Next и оставляя всё по умолчанию.

Среда разработки для нас создаст новый проект со стандартной структурой.

Пример будет работать, начиная с API версии 8. Это обосновано тем, что пользователи ещё пользуются девайсами со старой версией Android. Ниже приведены данные о количестве устройств, работающих под управлением различных версий платформы на состояние 12.08.2014.

Action Bar для API 8

Но ActionBar, сочетающий в себе заголовок и меню, появился начиная с Android 3.0 (API 11). Для того, чтобы его использовать, необходимо подключить к проекту библиотеку Android-Support-v7-Appcompat, любезно предоставленную компанией Google. Детальную инструкцию по добавлению библиотеки к проекту можно найти по адресу: developer.android.com/tools/support-library/setup.html

Есть две возможности добавить библиотеку к проекту — без использования ресурсов и с использованием. В реализации этого проекта будет использоваться библиотека с использованием ресурсов. После того, как библиотека будет добавлена в дерево проектов, необходимо перейти в Properties, нажав по проекту правой клавишей мыши и выбрать в категориях Android, затем нажать клавишу Add. В появившемся списке выбрать android-support-v7-appcompat и нажать OK > Apply > OK. Библиотека добавлена в проект. Но если попытаться запустить приложение, то ActionBar будет ещё не виден. Необходимо в res/values/styles.xml изменить строчку:

в res/values-v11/styles.xml изменить строчку:

в res/values-v14/styles.xml изменить строчку:

Также в главной активности необходимо наследоваться не от Activity, а от ActionBarActivity (android.support.v7.app.ActionBarActivity). После проделанных действий и запуска приложения можно увидеть ActionBar, включая и на ранних версиях API.

Зайдем в папку Menu и отредактируем файл main.xml, чтобы выглядел следующим образом:

Необходимо обратить внимание на следующую строчку: xmlns:sabd=http://schemas.andro . Также следует зайти в strings.xml и изменить строчку:

Теперь меню будет иметь привычный вид.

Внедрение бокового меню

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

Изменим основной ресурс activity_main.xml:

Заодно удалим из ресурсов следующую строчку, так как она нам уже не понадобится:

Главное Activity

Теперь необходимо переписать класс MainActivity. Для поддержки старых устройств мы используем библиотеку поддержки Android Support Library (v4), при создании проекта она автоматически добавляется в папку libs. В листинге присутствуют комментарии, которые смогут дать возможность понять, как работает код. Для дополнительной информации можно воспользоваться официальной документацией: developer.android.com/training/implementing-navigation/nav-drawer.html . Ниже листинг.

Добавим фрагменты

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

Также добавим в ресурсы разметку для этих классов. Для примера, выложу разметку одного фрагмента screen_one.xml. В остальных необходимо изменить только текст атрибута android:text:

Добавим в string.xml ещё несколько строчек, которые будут информировать о том, какой экран открыт из меню:

На этом этапе реализация Navigation Drawer завершена. Если запустить приложение, мы увидим работу бокового меню. Как на старых устройствах:

Внедрение вкладок

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

0 — Navigation Drawer занимает самый верхний уровень навигации.
1 — Action Bar второй уровень.
2 — Вкладки нижний уровень.

Для реализации необходимо использовать два дополнительных класса, которые Google снова любезно предоставляет. Это классы SlidingTabLayout и SlidingTabStrip . Добавим их в проект. Для этого создадим новый пакет view, там создадим новые классы с соответствующим названием и переместим в них код. При возникновении ошибок в методе createDefaultTabView(Context context) класса SlidingTabLayout следует подавить предупреждение, дописав над методом @SuppressLint(«NewApi»)

Цукерберг рекомендует:  #топпроблема - Помогите с мини-задачей )
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих