我已经在我的应用程序中实现了底部导航视图,并且我已经搜索了所有地方来显示像这样在图标上方显示徽章。 我想知道是否有可能实现。任何帮助都将不胜感激。 谢谢。
我已经在我的应用程序中实现了底部导航视图,并且我已经搜索了所有地方来显示像这样在图标上方显示徽章。 我想知道是否有可能实现。任何帮助都将不胜感激。 谢谢。
@Abel的答案是最好的,除非您已经有一套复杂的主题,并且没有时间更改它们所有的。
但是,如果a)您时间紧迫并且正在使用Google Material库BottomNavigationView Bar或者b)您想添加自己的自定义视图徽章,则接受的答案将无法在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版本(及更高版本)。 <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>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/colorAccent"/>
<corners android:radius="@dimen/cornerRadius"/>
</shape>
请查看文档页面:https://material.io/develop/android/components/bottom-navigation-view/
简述: 他们没有更新正确的使用方法,所以文档中留下了一个小错误。要添加或删除标记,请按以下步骤操作:
// 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)
}
com.google.android.material.bottomnavigation.BottomNavigationView
创建底部导航,然后在Java中使用。BottomNavigationView mBtmView = (BottomNavigationView) findViewById(R.id.bottom_navigatin_view);
mBtmView.setOnNavigationItemSelectedListener(this);
mBtmView.getOrCreateBadge(R.id.chatFragment).setBackgroundColor(getResources().getColor(R.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/();
BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(2);
View messageBadgeView = LayoutInflater.from(this).inflate(R.layout.message_badge_view, menuView, false);
TextView textView = messageBadgeView.findViewById(R.id.counter_badge);
textView.setText("15");
itemView.addView(messageBadgeView);`
我对@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);
}
}