開(kāi)篇

??在開(kāi)發(fā)Android應(yīng)用中，為應(yīng)用添加BottomNavigationBar是一件司空見(jiàn)慣的事情卒茬。為此沿癞，google團(tuán)隊(duì)在android.support.design包中就專門提供了快速實(shí)現(xiàn)BottomNavigationBar的控件:BottomNavigationView，而BottomNavigationView并沒(méi)有提供顯示未讀消息紅點(diǎn)提示功能霹抛。本文主要講解如何在BottomNavigationView上實(shí)現(xiàn)顯示未讀消息紅點(diǎn)提示功能谴咸。當(dāng)然轮听，市面上很多大神開(kāi)源了第三方的BottomNavigationBar框架，這里暫不展開(kāi)討論岭佳。不過(guò)這里還是推薦一個(gè)優(yōu)秀的BottomNavigationBar開(kāi)源項(xiàng)目：https://github.com/Ashok-Varma/BottomNavigation血巍！

效果截屏

立即體驗(yàn)

掃描以下二維碼下載體驗(yàn)App(從0.2.3版本開(kāi)始，體驗(yàn)App內(nèi)嵌版本更新檢測(cè)功能)：

實(shí)施步驟

在添加未讀消息紅點(diǎn)提示之前珊随，分析BottomNavigationView源碼

• 1述寡、從構(gòu)造函數(shù)著手

public BottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        ...
        mMenuView = new BottomNavigationMenuView(context);
        ...
        mPresenter.setBottomNavigationMenuView(mMenuView);
        ...
        if (a.hasValue(R.styleable.BottomNavigationView_menu)) {
            inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0));
        }
        ...
    }

a柿隙、創(chuàng)建BottomNavigationMenuView實(shí)例：mMenuView
b、 BottomNavigationPresenter綁定mMenuView
c鲫凶、 調(diào)用方法inflateMenu(int resId)解析xml菜單文件

• 2禀崖、inflateMenu(int resId)方法：

    public void inflateMenu(int resId) {
        mPresenter.setUpdateSuspended(true);
        getMenuInflater().inflate(resId, mMenu);
        mPresenter.setUpdateSuspended(false);
        mPresenter.updateMenuView(true);
    }

從方法字面上不難看出updateMenuView就是用來(lái)更新菜單視圖的。

• 3螟炫、updateMenuView(boolean cleared)方法:

    @Override
    public void updateMenuView(boolean cleared) {
        if (mUpdateSuspended) return;
        if (cleared) {
            mMenuView.buildMenuView();
        } else {
            mMenuView.updateMenuView();
        }
    }

它調(diào)用了mMenuView.buildMenuView()構(gòu)建菜單視圖波附，而mMenuView就是在BottomNavigationView構(gòu)造函數(shù)中BottomNavigationPresenter綁定的BottomNavigationMenuView的實(shí)例。

• 4昼钻、buildMenuView()方法：

    public void buildMenuView() {
        ...
        for (int i = 0; i < mMenu.size(); i++) {
            mPresenter.setUpdateSuspended(true);
            mMenu.getItem(i).setCheckable(true);
            mPresenter.setUpdateSuspended(false);
            BottomNavigationItemView child = getNewItem();
            mButtons[i] = child;
            child.setIconTintList(mItemIconTint);
            child.setTextColor(mItemTextColor);
            child.setItemBackground(mItemBackgroundRes);
            child.setShiftingMode(mShiftingMode);
            child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
            child.setItemPosition(i);
            child.setOnClickListener(mOnClickListener);
            addView(child);
        }
    }

到這里掸屡，我們不難看出，每一個(gè)menu就是一個(gè)BottomNavigationItemView示例：

public class BottomNavigationItemView extends FrameLayout implements MenuView.ItemView {
}

所以然评，整個(gè)流程看下來(lái)仅财，我們知道：
BottomNavigationView添加了一個(gè)BottomNavigationMenuView實(shí)例，而BottomNavigationMenuView實(shí)例添加了N個(gè)BottomNavigationItemView實(shí)例沾瓦。
很明顯满着，我們要給每個(gè)menu添加未讀消息紅點(diǎn)提示其實(shí)就是在BottomNavigationItemView實(shí)例上添加一個(gè)顯示未讀消息的view。

在BottomNavigationItemView上添加未讀消息紅點(diǎn)提示view

• 1贯莺、找到BottomNavigationMenuView：

        private BottomNavigationView navigation;

        BottomNavigationMenuView menuView = null;
        for (int i = 0; i < navigation.getChildCount(); i++) {
            View child = navigation.getChildAt(i);
            if (child instanceof BottomNavigationMenuView) {
                menuView = (BottomNavigationMenuView) child;
                break;
            }
        }

• 2风喇、找到BottomNavigationItemView并添加未讀消息紅點(diǎn)view

      if (menuView != null) {
            int dp8 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());
            dotViews = new DotView[menuView.getChildCount()];
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView.LayoutParams params = new BottomNavigationItemView.LayoutParams(i == menuView.getChildCount() - 1 ? dp8 : dp8 * 2, 0);
                params.gravity = Gravity.CENTER_HORIZONTAL;
                params.leftMargin = dp8 * 3;
                params.topMargin = dp8 / 2;
                BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                DotView dotView = new DotView(this);
                itemView.addView(dotView, params);
                if (i < menuView.getChildCount() - 1) {
                    dotView.setUnReadCount(new Random().nextInt(20));
                }
                dotViews[i] = dotView;
            }
        }

運(yùn)行后看效果。

這里是詳細(xì)實(shí)現(xiàn)實(shí)例：
https://github.com/JustinRoom/JSCKit/blob/master/app/src/main/java/jsc/exam/jsckit/ui/BottomNavigationViewActivity.java

篇尾

??原創(chuàng)不易缕探，給個(gè)愛(ài)心魂莫，謝謝！QQ:1006368252爹耗。

勿問(wèn)成功的秘訣為何耙考，且盡全力做你應(yīng)該做的事吧√妒蓿——美華納