[:ru]Сегодня в очередном выпуске Дизайна андроид приложений обзор интересной библиотеки от команды 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.[:en]Today in the next release of the Design android application overview of an interesting library from the team DevLight. Who does not know, these are successful developers who started once with lessons on our channel. Now they have a big company and tough customers. Interviews with the guys can be viewed on the link. The guys talk about what they achieved and share the secrets of their success with the budding developers.

The repository of DevLight on Github contains many interesting libraries for application design. One of these we will consider today. This is the NavigationTabBar library. It allows you to create and place on the application screen the navigation bar — at the bottom, at the top or side. NavigationTabBar is supported with the SDK version 11 API, has many settings and is easily integrated with all standard components of the screen layout.

 

The library page in GitHub describes how to add a library to the project, lists the parameters, and shows an implementation example in the project.

Also, there is a link to the application code, which demonstrates several ways to use this library. I imported this example into Android Studio. Let’s examine it in more detail.

In the MainActivity, just the buttons for navigating between screens. For each screen there is a separate Activity.

The first screen implements the horizontal NavigationTabBar.

Its markup is in activity_horizontal_ntb.xml.

Here in the LinearLayout root, the standard ViewPager for displaying and flipping through tabs.

Next is the NavigationTabBar from the Devlight library. In addition to the standard size attributes, here are the settings for the badge position relative to the button, turning on the badge display, turning on the scaling effect and rendering the active button, setting the header display method and last attribute ntb_swiped — I did not understand what it is responsible for. Who will understand — write in the comments.

The entire list of possible attributes of the NavigationTabBar component is here:

We are looking at the code HorisontalNtbActivity. In the initUI method, there is a viewPager and for it an adapter with five elements is installed. Next are the standard methods and tabs are created based on the layout with several TextView

The most interesting happens below. Here you define an array of colors for the navigation bar buttons.

Then, an instance of NavigationTabBar is created.
Next, a list of models is created for the buttons on the NavigationTabBar.

For each button, the icon is set, the color of the active icon (from the array of colors above), the icon for the active button, the text of the button, and the text of the badge.

Then the list of buttons is passed to the navigationTabBar instance using the setModels method. It is also passed to the ViewPager and the tabbed change listener is installed. Next are the empty methods of the listener. The onPageSelected method removes the badge for the selected tab.

Below we see the method navigationTabBar.postDelayed, where in a separate thread implemented a spectacular appearance of badges on the buttons at the start of Activity.

Here is a relatively simple example of the implementation of the NavigationTabBar library.

The following implementation is not much more complicated, here NavigationTabBar is used in conjunction with standard widgets, such as AppBarLayout, CollapsingToolbarLayout, Toolbar and FloatingActionButton. For the coordinated work of all components, the root CoordinatorLayout answers.

The code in Activity is slightly different from the previous example, by adding new components.