Android官方BottomNavigationView添加Badge(角标)

Google在Android API24添加了实现底部导航的BottomNavigationView，还算是比较良心的，相信做过类似功能的老铁对开源的BottomNavigationBar一定不会感到陌生，这个开源项目很好的实现了我们所需要的功能，包括我今天重点要说的添加角标Badge,它添加Badge的方式是在创建底部导航按钮的时候就设置了Badge:

bottomNavigationBar .addItem(new BottomNavigationItem(R.drawable.ic_error, "主页").setBadgeItem(faultBadgeItem)) .addItem(new BottomNavigationItem(R.drawable.ic_assignment, "通知").setBadgeItem(maintainBadgeItem)) .addItem(new BottomNavigationItem(R.drawable.ic_notifications, "消息").setBadgeItem(announcementBadgeItem)) .addItem(new BottomNavigationItem(R.drawable.ic_forum, "我的").setBadgeItem(imBadgeItem)) .initialise();

但是API24的BottomNavigationView是通过Menu的形式创建的，我们无法在它创建的时候就设置Badge,必须获取到每一个导航按钮Item所在的View,才能够添加上去。当然方法不是绝对的，之前看过看到一篇文章是通过在顶级容器上加入小红点，调整位置，伪装成和控件一体的方式实现，我还是觉得太过复杂，然后就看了一下BottomNavigationView的源码还是有所发现。

1.由于是通过Menu的方式创建，所以要把得到的MenuView添加进去，在构造方法中发现：

public BottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); ThemeUtils.checkAppCompatTheme(context); // Create the menu mMenu = new BottomNavigationMenu(context); mMenuView = new BottomNavigationMenuView(context); FrameLayout.LayoutParams params = new FrameLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER; mMenuView.setLayoutParams(params); mPresenter.setBottomNavigationMenuView(mMenuView); mPresenter.setId(MENU_PRESENTER_ID); mMenuView.setPresenter(mPresenter); mMenu.addMenuPresenter(mPresenter); mPresenter.initForMenu(getContext(), mMenu); // Custom attributes TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs, R.styleable.BottomNavigationView, defStyleAttr, R.style.Widget_Design_BottomNavigationView); if (a.hasValue(R.styleable.BottomNavigationView_itemIconTint)) { mMenuView.setIconTintList( a.getColorStateList(R.styleable.BottomNavigationView_itemIconTint)); } else { mMenuView.setIconTintList( createDefaultColorStateList(android.R.attr.textColorSecondary)); } if (a.hasValue(R.styleable.BottomNavigationView_itemTextColor)) { mMenuView.setItemTextColor( a.getColorStateList(R.styleable.BottomNavigationView_itemTextColor)); } else { mMenuView.setItemTextColor( createDefaultColorStateList(android.R.attr.textColorSecondary)); } if (a.hasValue(R.styleable.BottomNavigationView_elevation)) { ViewCompat.setElevation(this, a.getDimensionPixelSize( R.styleable.BottomNavigationView_elevation, 0)); } int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0); mMenuView.setItemBackgroundRes(itemBackground); if (a.hasValue(R.styleable.BottomNavigationView_menu)) { inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0)); } a.recycle(); addView(mMenuView, params); if (Build.VERSION.SDK_INT < 21) { addCompatibilityTopDivider(context); } mMenu.setCallback(new MenuBuilder.Callback() { @Override public boolean onMenuItemSelected(MenuBuilder menu, MenuItem item) { if (mReselectedListener != null && item.getItemId() == getSelectedItemId()) { mReselectedListener.onNavigationItemReselected(item); return true; // item is already selected } return mSelectedListener != null && !mSelectedListener.onNavigationItemSelected(item); } @Override public void onMenuModeChange(MenuBuilder menu) {} }); }

上边有两句关键代码：mMenuView = new BottomNavigationMenuView(context); addView(mMenuView, params);因而我们可以获取到BottomNavigationView的子View，类型为BottomNavigationMenuView：

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);

2.拿到BottomNavigationMenuView，我基本就确定了底部导航的几个按钮就是它的子VIew，不放心，再看BottomNavigationMenuView的源码，看了OnLayout就100%确定了，so我们可以拿到每个导航按钮所在的View了：

View view1 = menuView.getChildAt(0); View view1 = menuView.getChildAt(0); View view1 = menuView.getChildAt(0); ...

拿到各个ItemView就So easy了，那不就是在它上边添加文字嘛：

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0); BadgeView.Builder.newBuilder() .setTargetView(menuView.getChildAt(0)) .setBadgeCount(10) .setMargin(new Integer[]{0, 8, 24, 0}) .build(this); BadgeView.Builder.newBuilder() .setTargetView(menuView.getChildAt(1)) .setBadgeCount(2) .setMargin(new Integer[]{0, 8, 24, 0}) .build(this); BadgeView.Builder.newBuilder() .setTargetView(menuView.getChildAt(2)) .setBadgeCount(8) .setMargin(new Integer[]{0, 8, 24, 0}) .build(this);

代码比较简单，就不上了，最后贴个图