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

Этот компонент доступен в Design Support Library с версии 25.0.0 и Google рекомендует его к применению с соблюдением таких принципов дизайна:

  • Рекомендуется только для смартфонов, на планшетах и других устройствах с большим экраном лучше использовать боковое меню навигации.
  • Ширина областей значков зависит от их количества и может варьироваться от 80 до 168 dp. Высота панели — 56 dp, размер иконки 24×24 dp.
  • Панель должна содержать не меньше 3-х, но не больше 5-ти кнопок, кнопки должны помещаться на экране и не скроллиться.
  • Переключение между экранами только по тапу на кнопке, свайп не используется, что дает возможность комбинировать BottomNavigationView с вкладками. Но Google рекомендует подходить к такой комбинации с осторожностью, чтобы не дезориентировать пользователя.
  • Можно закрашивать активный значок в основной цвет приложения, либо использовать белый или черный цвета, если нижняя панель навигации цветная. Не разукрашивайте значки в разные цвета.
  • Текстовые метки должны быть максимально короткими и информативными, избегайте длинных надписей.
  • Нажатие значка на нижней панели навигации должно привести пользователя прямо к связанному со значком окну, или обновить текущее окно. Значки не должны открывать меню или всплывающие окна. Кнопка «Назад» на устройстве не должна позволять перемещаться между экранами нижней панели навигации.
  • Нижняя панель навигации может исчезать с экрана при прокрутке вверх и появляться при возвращении.

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

Для добавления поддержки нижней панели навигации в файл сборки уровня модуля нужно добавить такие зависимости:

В файле макета главного экрана такая разметка:

Здесь три расположенных по центру Imageview, два из которых скрыты изначально при помощи атрибута visibility со значением gone. Мы будем просто отображать по очереди изображения в них в зависимости от выбранного значка в BottomNavigationView.

А ниже — виджет BottomNavigationView, он имеет такие атрибуты:

  • itemBackground : цвет фона элемента панели. Может быть установлен из кода методом setItemBackgroundResource()
  • itemIconTint : цвет иконки элемента панели. Может быть установлен из кода методом setItemIconTintList()
  • itemTextColor : цвет текста элементов панели. Может быть установлен из кода методом setItemTextColor()

Эти два атрибута ссылаются на файл ресурса, который устанавливает цвет в зависимости от того, активен элемент или нет.

Последний атрибут BottomNavigationView app:menu ссылается на предварительно созданный файл ресурса menu_bottom_navigation.xml, который содержит пункты нижней панели навигации. Они практически не отличаются от обычного меню:

Теперь код главного класса MainActivity.java:

Здесь мы объявляем и находим все экранные компоненты. BottomNavigationView присваиваем слушатель, который определяет нажатие на пункты панели по идентификаторам и прописываем нужные действия в конструкции switch.

В нашем случае для простоты примера просто меняется видимость картинок в ImageView на главном экране. Но можно, например, реализовать открытие фрагментов с различным контентом и т.п.

Вот так приложение выглядит на устройстве:

device-2016-10-28-173654

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

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

 

Как добавить BottomNavigationView в ваше android приложение обновлено: Октябрь 28, 2016 автором: admin

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

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

*
*
Website