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

Репозиторий команды DevLight на Github содержит много интересных библиотек для оформления приложений. Одну из таких мы и рассмотрим сегодня. Это библиотека NavigationTabBar. Она позволяет создать и разместить на экране приложения панель навигации — внизу, вверху или сбоку. NavigationTabBar поддерживается с версии SDK API 11, имеет много настроек и легко интегрируется со всеми стандартными компонентами макета экрана.

На странице библиотеки в GitHub описаны способы добавления библиотеки в проект, перечислены параметры и показан пример реализации в проекте.

Также здесь есть ссылка на код приложения, которое демонстрирует несколько способов применения этой библиотеки. Я импортировал этот пример в Android Studio. давайте разберем его более подробно.

В MainActivity просто кнопки для перехода между экранами. Для каждого экрана здесь есть отдельное Activity.

Первый экран реализует горизонтальный NavigationTabBar.

Его разметка находится в файле activity_horizontal_ntb.xml.

Здесь в корневом LinearLayout стандартный ViewPager для отображения и перелистывания вкладок.

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

Весь список возможных атрибутов компонента NavigationTabBar здесь:

Смотрим код HorisontalNtbActivity. В методе initUI находится viewPager и для него устанавливается адаптер с пятью элементами. Далее идут стандартные методы и создаются вкладки на основании макета с несколькими TextView

Самое интересное происходит ниже. Здесь задается массив цветов для кнопок панели навигации.

Затем создается экземпляр NavigationTabBar.
Далее создается список моделей для кнопок панели NavigationTabBar.

Для каждой кнопки устанавливается иконка, цвет активной иконки (из массива цветов выше), иконка для активной кнопки, текст кнопки, и текст бейджа.

Затем список кнопок передается экземпляру navigationTabBar методом setModels. Также ему передается ViewPager и устанавливается слушатель смены вкладок. Далее идут пустые методы слушателя. В методе onPageSelected для выбранной вкладки удаляется бейдж.

Ниже мы видим метод navigationTabBar.postDelayed, где в отдельном потоке реализовано эффектное появление бейджей над кнопками при старте Activity.

Вот такой относительно несложный пример реализации библиотеки NavigationTabBar.

Следующий пример реализации не намного сложнее, здесь NavigationTabBar используется в связке со стандартными виджетами, такими как AppBarLayout, CollapsingToolbarLayout, Toolbar и FloatingActionButton. За слаженную работу всех компонентов отвечает корневой CoordinatorLayout.

Код в Activity немного отличается от предыдущего примера, за счет добавления новых компонентов.

ViewPager здесь использует RecyclerView для реализации прокручиваемого списка.

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

А вот и важные отличия. Метод navigationTabBar.setBehaviorEnabled включает синхронизацию при прокрутке с остальными виджетами в CoordinatorLayout.

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

Еще ниже создается экземпляр CoordinatorLayout. Затем определяется FAB и по клику на ней над кнопками панели появляются бейджи, а в методе coordinatorLayout.postDelayed выводится Snackbar с сообщением.

Далее создается CollapsingToolbarLayout — это обертка для тулбара, реализующая эффект коллапсинга — разрушения, или исчезновения тулбара при прокрутке. Здесь же устанавливается цвет текста заголовка при нормально положении тулбара и при коллапсинге.

И в конце реализация класса адаптера для RecyclerView, который просто создает список на 20 элементов.

Следующий способ — расположение NavigationTabBar в верхней части экрана.


Для этого в файле разметки NavigationTabBar встроен в AppBarLayout.

Реализация в классе Activity почти не отличается от предыдущего примера, за исключением отсутствия FAB и CollapsingToolbarLayout.

Следующий пример показывает вертикальную реализацию NavigationTabBar.

Файл разметки похож на самый первый пример, только корневой LinearLayout имеет горизонтальную ориентацию.

Код класса Activity практически не отличается от первого примера.

И наконец, последний пример.

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

В классе Activity можно увидеть код реализации каждого отдельного элемента NavigationTabBar.

Это был обзор способов реализации библиотеки NavigationTabBar от команды разработчиков Devlight.

Обзор библиотеки NavigationTabBar для Android от команды DevLight обновлено: Декабрь 9, 2016 автором: admin

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

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

*
*
Website