Всичко, което трябва да знаете за значките

Долните ленти за навигация улесняват достъпа на потребителите и преминаването им между основните изгледи с едно докосване. Те се препоръчват, когато дадено приложение има три до пет дестинации от най-високо ниво.

Има много библиотеки на долната лента, които можем да използваме, за да включим разширени функции в нашите приложения без кодиране. Но използването на собствени библиотеки е най-ефективният начин – библиотеките на трети страни могат да увеличат размера на приложението ви, може да не поддържат разширени функции като тъмен режим и могат да отхвърлят библиотеката, когато пожелаят. Препоръчвам ви да използвате стандартния изглед за бойна навигация на Google.

Интеграция

За да използваме долната навигационна лента за материали на Google, първо трябва да включим бойната библиотека в проекта. За целта трябва да включите следния ред под възела dependencies във файла build.gradle на ниво приложение.

implementation 'com.google.android.material:material:1.0.0'

Как да използвам

Първо, трябва да включите долния навигационен изглед във вашия файл с оформление, както е показано по-долу:

Тук добавихме долен навигационен изглед към оформлението с ограничения, за да го покажем в долната част. След това, за да покажем елементи в навигационния изглед, трябва да създадем меню с всички елементи, които да се показват в долната лента и да присвоим това меню на навигационния изглед. Първо, нека създадем меню с три елемента, както е показано:

Сега нека включим това меню в долния навигационен изглед с помощта на атрибута на менюто. Погледни:

Това е всичко, което трябва да направим. Просто, нали? Разгледайте изхода:

Как да показвате значки

Внедрихме икона и текст за елементите в долната лента. В даден момент от бъдещата гама от вашия продукт би изглеждало разумно да покажете броя на известията в долната лента, така че потребителите да могат бързо да идентифицират, че имат непрочетени известия.

Тогава значките са полезни. Във версия 1.0.0 долната лента на материалите не поддържа значки по подразбиране, но има тактики, които можем да използваме, за да ги добавим.

Преди да започнем, нека видим какво се опитваме да постигнем:

Значката за известяване, която показва брой три, е персонализираното оформление, което създадох и програмно добавих към известието за елемент от менюто.

Нека направим това стъпка по стъпка. Трябва да създадем кръгъл чертеж, който да бъде показан зад брояча с помощта на възела на формата. Погледни:

Сега трябва да създадем нашето персонализирано оформление, където имаме textview, за да покажем броя и да присвоим създадения по-горе чертеж като фон:

Сега създадохме нашето персонализирано оформление, време е да добавим изгледа към долния navigation-view елемент.

Първо, трябва да създадем изглед и да раздуем custom_badge_layout в изгледа, както е показано по-долу:

Тук създадохме изглед с име notificationsBadge и раздухме cutom_badge_layout в изгледа с помощта на LayoutInflater.

Единственото, което остава, е да добавите изгледа към дъното navigation-view. Това е ясно:

След като вече знаем как да добавим значка, е време да научим как да ги премахнем. Както можете да видите в горния код, ние не направихме нищо, освен да добавим изглед към viewGroup с помощта на функцията addView. По същия начин използваме функцията removeView на nav_view , за да премахнем значката:

Как да създадете значки с библиотеката за дизайн на материали 1.1.0?

Google наскоро пусна следващата версия на библиотеката за материален дизайн (1.1.0). С надстройката можем да създаваме значките директно без никакви персонализирани оформления. Вижте как да добавите значката в долната част navigation-view, когато използвате надстроената версия на библиотеката:

За да премахнем значката, трябва да извикаме функцията removeBadge с menuItemId, на която значката трябва да бъде премахната.

nav_view?.removeBadge(R.id.navigation_notifications)

Можем да създаваме значки с точки и цифри с надстроената библиотека. Ако не сте споменали броя, той ще се покаже като точка, в противен случай ще покаже числото, което сте задали:

Проблем с надстроената библиотека

Материалният дизайн на библиотеката 1.1.0 е фантастичен, но приложението, което разработвах, имаше множество сривове по различни причини, когато надстроих до библиотеката с материали до 1.1.0. Не че библиотеката имаше грешки, но трябваше да направим много промени в кода.

Една от причините да се срине е, че използвах темата non-material за моята основна дейност, в която дъното на материала navigation-view е раздуто. За да разрешим този срив, трябваше да актуализираме темата на основната активност до материалната тема.

Това може да е лесно, ако сте разработчик на приложения, но какво ще стане, ако сте разработчик на библиотека? Много малко вероятно е разработчиците на приложения да променят правилно темата, за да използват вашата библиотека!

Заключение

Двете решения, които обясних тук, са идеални за използване, но бъдете прагматични и използвайте всичко, което отговаря на вашата ситуация. Бих препоръчал да надстроите вашата библиотека за материален дизайн и да използвате собствен код. От друга страна, ако сте в хипотетична ситуация като тази, която споменах по-горе, използвайте старата версия и създайте свои собствени значки, както е показано по-горе.

Благодаря ви, че прочетохте.