Android drawer menu fragment

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

Feb 16, 2017 · 10 min read

В кратких обзорах Общих парадигм навигации мы обсуждаем различные навигационные структуры, доступные в приложениях на 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:

Обратите внимание, что вы можете установить один из этих элементов в качестве элемента, выбранного по умолчанию, при помощи android:checked=”true”.

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

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

Далее, вы должны определить свои фрагменты, которые будут отображаться внутри 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.2017.

Источник

Как легко сделать 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.android.com/apk/res-auto. Теперь необходимо атрибут showAsAction задавать следующим образом: sabd:showAsAction=» «. Также следует зайти в 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

Источник