Я застосував нижній перегляд навігації у своєму додатку, і я переглядав всюди, де відображатимуться значки вгорі піктограм, як це, і мені було цікаво, чи можливо це взагалі реалізувати. Будь-яка допомога вдячна. Дякую.
this
посилання в ОП - 404
Я застосував нижній перегляд навігації у своєму додатку, і я переглядав всюди, де відображатимуться значки вгорі піктограм, як це, і мені було цікаво, чи можливо це взагалі реалізувати. Будь-яка допомога вдячна. Дякую.
this
посилання в ОП - 404
Відповіді:
Редагувати 2020:
BottomNavigation
Натомість використання з матеріальних компонентів дає можливість додавати значки на предмети та багато інших функцій нестандартно:
Стара відповідь:
При використанні нижньої панелі навігації бібліотеки підтримки вона досить складна для відображення значка / сповіщення в пунктах меню. Однак є прості рішення, щоб це зробити. Такі як https://github.com/aurelhubert/ahbottomnavigation
Ця бібліотека є більш вдосконаленою версією нижньої панелі навігації. І ви можете встановити значок для пункту меню, просто використовуючи цей фрагмент коду.
bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);
І ви отримаєте наступний результат
Якщо ви просто хочете скористатися акцією, BottomNavigationView
а не сторонньою бібліотекою, ось як я це зробив:
BottomNavigationMenuView bottomNavigationMenuView =
(BottomNavigationMenuView) navigationView.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(3);
BottomNavigationItemView itemView = (BottomNavigationItemView) v;
View badge = LayoutInflater.from(this)
.inflate(R.layout.notification_badge, itemView, true);
Тоді ось файл макета:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/notifications.badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:background="@drawable/notification_badge"
android:gravity="center"
android:padding="3dp"
android:text="9+"
android:textColor="@color/white"
android:textSize="11sp" />
</merge>
Тоді просто знайдіть TextView
за ідентифікатором та встановіть текст.
@drawable/notification_badge
це просто форма кола, що малюється
TextView
в FrameLayout
так BottomNavigationItemView
триваєFrameLayout
public void removeBadge(BottomNavigationView navigationView, int index) { BottomNavigationMenuView bottomNavigationMenuView = (BottomNavigationMenuView) navigationView.getChildAt(0); View v = bottomNavigationMenuView.getChildAt(index); BottomNavigationItemView itemView = (BottomNavigationItemView) v; itemView.removeViewAt(itemView.getChildCount()-1); }
itemView.removeViewAt(itemView.getChildCount()-1);
я замість цього використовував:View badge = itemView.findViewById(R.id.notifications_badge); ((ViewGroup)badge.getParent()).removeView(badge);
Додавання значків підтримується зараз, використовуючи останню матеріальну залежність, додайте це у свій build.gradle
implementation 'com.google.android.material:material:1.1.0-alpha09'
у своєму макеті додайте це
<!-- The rest of your layout here ....-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:menu="@menu/bottom_nav_menu"
/>
тоді ви можете просто
val navBar = findViewById<BottomNavigationView>(R.id.bottom_navigation)
navBar.getOrCreateBadge(R.id.action_add).number = 2
R.id.action_add для вас буде ідентифікатором пункту меню, на який ви хочете поставити значок. Перевірте це у файлі меню, який ви подаєте до BottomNavigationView.
Переконайтеся, що тема вашого додатка знаходиться в Theme.MaterialComponents
Ви можете перевірити це в стилях або маніфесті. для цього прикладу моє було це
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">@color/colorPrimary</item>
</style>
Theme.AppCompat.*
варіанта, просто використовуйте відповідний Theme.MaterialCompoonents.*.Bridge
варіант для прямого перекладу, не вимагаючи нічого переробляти. medium.com/over-engineering/…
EDIT 2:
BottomNavigationView тепер підтримує рідне відображення значка, як зазначено в документі тут .
bottomNavigation.getOrCreateBadge(menuItemId)
Я стикався з тим же питанням, і я не хотів користуватися бібліотекою.
Тож я створив власний макет під назвою layout_news_badge
:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/badge_text_view"
android:layout_width="19dp"
android:layout_height="19dp"
android:textSize="11sp"
android:textColor="@android:color/white"
android:background="@drawable/news_bottom_nav_bg"
android:layout_gravity="top"
android:layout_marginTop="4dp"
android:layout_marginStart="16dp"
android:gravity="center"
android:padding="2dp"
tools:text="9+" />
</FrameLayout>
Фон TextView ( news_bottom_nav_bg
):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="?attr/colorPrimary" />
</shape>
Потім я створив за BottomMenuHelper
допомогою цих 2 методів:
public static void showBadge(Context context, BottomNavigationView
bottomNavigationView, @IdRes int itemId, String value) {
removeBadge(bottomNavigationView, itemId);
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
View badge = LayoutInflater.from(context).inflate(R.layout.layout_news_badge, bottomNavigationView, false);
TextView text = badge.findViewById(R.id.badge_text_view);
text.setText(value);
itemView.addView(badge);
}
public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
if (itemView.getChildCount() == 3) {
itemView.removeViewAt(2);
}
}
Потім, коли я називаю це у своїй діяльності:
BottomMenuHelper.showBadge(this, mBottomNavigationView, R.id.action_news, "1");
EDIT 1: Додано вдосконалення за пропозицією jatin rana
removeBadge
перед дзвінком, showBadge
щоб уникнути додавання дублікатів подань.
Оновлення: тепер значок матеріальної підтримки, докладніше див. Нижче
val badge = bottomNavigation.getOrCreateBadge(menuItemId)
badge.isVisible = true
// An icon only badge will be displayed unless a number is set:
badge.number = 99
Стара відповідь
на основі відповіді @ Tinashe, я хотів би показати значок, як показано нижче, без номера:
код:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
// position = 2
addBadge(POSITION_HISTORY)
}
/**
* add badge(notification dot) to bottom bar
* @param position to get badge container
*/
@SuppressLint("PrivateResource")
private fun addBadge(position: Int) {
// get badge container (parent)
val bottomMenu = navigation.getChildAt(0) as? BottomNavigationMenuView
val v = bottomMenu?.getChildAt(position) as? BottomNavigationItemView
// inflate badge from layout
badge = LayoutInflater.from(this)
.inflate(R.layout.badge_layout, bottomMenu, false)
// create badge layout parameter
val badgeLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(badge?.layoutParams).apply {
gravity = Gravity.CENTER_HORIZONTAL
topMargin = resources.getDimension(R.dimen.design_bottom_navigation_margin).toInt()
// <dimen name="bagde_left_margin">8dp</dimen>
leftMargin = resources.getDimension(R.dimen.bagde_left_margin).toInt()
}
// add view to bottom bar with layout parameter
v?.addView(badge, badgeLayout)
}
badge_layout.xml (розмір_значки = 12dp)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/badge_size"
android:layout_height="@dimen/badge_size"
android:background="@drawable/new_notification" />
та фон для малювання new_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="100dp"/>
<solid android:color="#F44336"/>
</shape>
Бейдж тепер доданий як частина AndroidX BottomNavigationView від BadgeDrawable. Див. Документи
fun setBadge(count: Int) {
if (count == 0) {
bottomNavigationView.removeBadge(R.id.ticketsNavigation)
} else {
val badge = bottomNavigationView.getOrCreateBadge(R.id.ticketsNavigation) // previously showBadge
badge.number = count
badge.backgroundColor = getColor(R.color.badge)
badge.badgeTextColor = getColor(R.color.blackTextColor)
}
}
// Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/ticketsNavigation"
android:icon="@drawable/vector_drawable_navbar_tickets"
android:title="@string/tickets_title"/>
...
</menu>
Редагувати:
Як зазначалося в коментарях, має бути можливим просто оновити кількість значків, не потрібно постійно додавати або видаляти значок, як це:
fun setBadge(count: Int) {
bottomNavigationView.getBadge(menuItemId)?.isVisible = count > 0
}
showBadge
було змінено на getOrCreateBadge
.
Як відповідь @zxbin. Ви можете перевірити BadgeView і спробувати код нижче
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(this);
navigation.setSelectedItemId(R.id.navigation_store);
BottomNavigationMenuView bottomNavigationMenuView =
(BottomNavigationMenuView) navigation.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(4); // number of menu from left
new QBadgeView(this).bindTarget(v).setBadgeNumber(5);
джерело з моєї суті
Будь ласка, спробуйте це один раз.
1) Створіть файл xml для значка (наприклад, message_badge_view.xml)
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/badge"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|center_horizontal"
android:layout_marginStart="10dp"
android:gravity="center"
android:padding="3dp"
app:srcCompat="@drawable/notification_badge" />
</FrameLayout>
2) Створіть малювальний файл для форми точки сповіщення (наприклад, badge_circle.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent" />
<stroke
android:width="2dp"
android:color="@android:color/white" />
</shape>
3) У своїй діяльності onCreate додайте подання значка до BottomNavigationView
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_landing);
addBadgeView();
}
4) А метод addBadgeView знаходиться нижче
private void addBadgeView() {
try {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationBar.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0); //set this to 0, 1, 2, or 3.. accordingly which menu item of the bottom bar you want to show badge
notificationBadge = LayoutInflater.from(LandingActivity.this).inflate(R.layout.view_notification_badge, menuView, false);
itemView.addView(notificationBadge);
notificationBadge.setVisibility(GONE);// initially badge will be invisible
} catch (Exception e) {
e.printStackTrace();
}
}
Примітка: bottomNavigationBar - це вигляд нижньої панелі.
5) Оновіть значок, щоб показати та приховати наступним способом
private void refreshBadgeView() {
try {
boolean badgeIsVisible = notificationBadge.getVisibility() != GONE;
notificationBadge.setVisibility(badgeIsVisible ? GONE : VISIBLE);//makes badge visible and invisible
} catch (Exception e) {
e.printStackTrace();
}
}
6) І тонко зробіть сховання, коли ми натискаємо на певну сторінку нижнього рядка, слідуючи рядку.
bottomNavigationBar.setOnNavigationItemSelectedListener(new
BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem)
{
switch (menuItem.getItemId()) {
case R.id.bottom_bar_one:
//while moving to first fragment
notificationBadge.setVisibility(GONE);
break;
case R.id.bottom_bar_two:
//moving to second fragment
break;
case R.id.bottom_bar_three:
//moving to third fragment
break;
}
return true;
}
});
Оскільки Material Design оновлював свою бібліотеку і відповідно до
Я зміг оновити (або створити мій значок BottomNavigationView) зсередини адаптера утилізатора (у фрагменті) без жодної зовнішньої бібліотеки .
Отже, як і в адаптері, я отримав контекст з моєї діяльності, я отримую до нього доступ і відновлюю екземпляр нижньої навігації:
navBottomView = ((AppCompatActivity)this.context).findViewById(R.id.nav_view);
перевірте, чи є значок нульовим (ще не створений), якщо є, встановіть його на вибрану кількість:
BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
if (badgeDrawable == null)
navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());
інакше отримати попередню кількість і збільшити значення значка:
int previousValue = badgeDrawable.getNumber();
badgeDrawable.setNumber(previousValue + item.getQuantidade());
Не забувайте про імпорт:
import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;
Кінцевий стан:
Все в одному з прослуховувачем кнопок додавання в кошик:
btnAddCarrinho.setOnClickListener(v -> {
navBottomView = ((AppCompatActivity) this.context).findViewById(R.id.nav_view);
BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
if (badgeDrawable == null) {
navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());
} else {
int previousValue = badgeDrawable.getNumber();
badgeDrawable.setNumber(previousValue + item.getQuantidade());
}
});
Відповідь @ Абеля найкраща, якщо у вас вже є складний набір тем і немає часу, щоб змінити їх усі.
Однак, якщо а) вас чекає час, і якщо ви використовуєте бібліотеку Google BottomNavigationView Bar, або б) ви хочете додати власний значок власного подання - тоді прийнята відповідь не буде працювати з com.google.android.material:material:1.1.0
Вам потрібно буде кодувати іншу ієрархію подання, ніж прийнята відповідь
BottomNavigationItemView itemView = (BottomNavigationItemView) ((BottomNavigationMenuView) mBottomNavigation.getChildAt(0)).getChildAt(2);
View badge = LayoutInflater.from(this).inflate(R.layout.navigation_dot, itemView, false);
itemView.addView(badge);
якщо ви хочете оновити свою тему та оновити до
com.google.android.material:material:1.1.0-alpha09
тоді все, що вам потрібно зробити натомість, це
mBottomNavigation.getOrCreateBadge(R.id.navigation_menu_item_one).setNumber(YOUR_NUMBER);
Функції видалення та числа присутні лише у версії 1.1.0-alpha09 (і вище)
Загляньте на сторінку документації: https://material.io/develop/android/components/bottom-navigation-view/
TL; DR: Вони не оновили правильні методи використання, тому залишили невелику помилку в документації. Щоб додати або видалити значок, виконайте такі дії:
// to remove
bottomNavigationView.removeBadge(R.id.action_settings)
// to add
bottomNavigationView.getOrCreateBadge(R.id.action_settings).apply {
//if you want to change other attributes, like badge color, add a number, maximum number (a plus sign is added, e.g. 99+)
number = 100
maxCharactersCount = 3
backgroundColor = ContextCompat.getColor(context, R.color.color_red)
}
Використання бібліотеки підтримки BottomNavigationView важко. Просте рішення - використання зовнішніх компонентів. Одним із простих впорань є: https://github.com/roughike/BottomBar Перевірка його документації така ж проста, як:
BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);
// Remove the badge when you're done with it.
nearby.removeBadge/();
Ви можете спробувати таким чином:
Помістіть TextView всередину BottomNavigationView для підрахунку ( BottomNavigationView - це FrameLayout ):
<android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
<TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
</android.support.design.widget.BottomNavigationView>
І оформити їх так:
<style name="bottomMenu">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/toolbarHeight</item>
<item name="android:layout_gravity">center|bottom</item>
<item name="android:background">@color/colorThird</item>
<item name="itemBackground">@drawable/tabs_ripple</item>
<item name="itemIconTint">@drawable/bottom_menu_item_color</item>
<item name="itemTextColor">@drawable/bottom_menu_item_color</item>
<item name="menu">@menu/bottom_menu</item>
</style>
<style name="bottomMenuSelectionsNumber">
<item name="android:text">@string/bottomMenuSelectionsNumber</item>
<item name="android:textSize">@dimen/appSecondFontSize</item>
<item name="android:textColor">@color/white</item>
<item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
<item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
<item name="android:layout_gravity">right|bottom</item>
<item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
<item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
<item name="android:gravity">center</item>
<item name="android:includeFontPadding">false</item>
<item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>
І нижнє_меню_вибір_номера_bg :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/colorAccent"/>
<corners android:radius="@dimen/cornerRadius"/>
</shape>
я вніс зміни у відповідь @ilbose, який я зробив таким чином, і протестував малий та великий розміри екрану
../drawable/badge_circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/solid_red_base" />
та ../layout/notifcation_badge.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="11dp"
android:layout_gravity="center_horizontal">
<TextView
android:id="@+id/badge_text_view"
android:layout_width="12dp"
android:layout_height="12dp"
android:textSize="11sp"
android:textColor="@android:color/white"
android:background="@drawable/message_badge"
android:layout_gravity="top"
android:layout_centerHorizontal="true"
android:padding="2dp"/> </RelativeLayout>
і в коді Java
public static void showBadge(Context context, BottomNavigationView
bottomNavigationView, @IdRes int itemId, String value) {
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
View badge = LayoutInflater.from(context).inflate(R.layout.message_notification_badge, bottomNavigationView, false);
TextView text = badge.findViewById(R.id.badge_text_view);
text.setText(value);
itemView.addView(badge);
}
public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
if (itemView.getChildCount() == 4) {
itemView.removeViewAt(4);
}
}