#BottomNavigationView使用及源碼分析

BottomNavigationView是design包提供的底部導航欄，樣子跟市面上常見的底欄差很少，可是點選的時候會帶有一點動畫效果，放張圖：

三個選項的底欄

BottomNavigationView是構建在系統的menu模塊之上的，因此能夠經過配置menu文件的方式使用它，可是，BottomNavigationView最多隻支持五個選項，當選項數量爲四個或五個時，表現出的效果是與三個不一樣的，看圖：

四個選項的底欄

圖標在點選的時候會有漂移動畫，沒有被選中的菜單項是沒有標題文字的。若是你想讓他的表現的像是三個選項時那樣，能夠參考 這篇文章來操做一下，其間用到了一次反射，因此你們自行斟酌。下面講解使用方式。

BottomNavigationView使用方式

首先保證design包被項目引入

compile 'com.android.support:design:26.0.0-alpha1'複製代碼

以後創建menu資源文件，以上圖爲例：
在/res/menu/bottom_navigation.xml中加入以下代碼

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="camera"
        android:icon="@drawable/ic_camera_black_24dp"
        android:id="@+id/menu_camera"/>

    <item android:title="palette"
        android:icon="@drawable/ic_palette_black_24dp"
        android:id="@+id/menu_palette"/>

    <item android:title="security"
        android:icon="@drawable/ic_security_black_24dp"
        android:id="@+id/menu_security"/>

    <item android:title="setting"
        android:icon="@drawable/ic_settings_black_24dp"
        android:id="@+id/menu_setting"/>
</menu>複製代碼

在佈局文件中使用BottomNavigationView：

<android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation"
        android:background="?android:attr/windowBackground"
        android:id="@+id/bottom_navigation_view"/>複製代碼

只須要使用app:menu="@menu/bottom_navigation"把菜單配置進來就能夠看到gif中的效果了。BottomNavigationView爲咱們提供了幾個自定義屬性

• itemIconTint 圖標着色，圖標選中/未選中時的顏色
• itemTextColor 文字着色，選項文字選中/未選中時的顏色
• itemBackground 選項背景，就是gif中的ripple效果

以圖標着色爲例，在res/color/bottom_nav_icon_color.xml中添加以下代碼：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true"
        android:color="@color/colorAccent"/>
    <item android:state_checked="false"
        android:color="@android:color/black"/>
</selector>複製代碼

selector中只須要定義state_checked爲true/false的item就能夠了，BottomNavigationView只會用到這兩種狀態，因此上述代碼會將選中的圖標染爲colorAccent，未選中染爲黑色。itemTextColor 與他的定義方式徹底同樣，就不貼代碼了。若是對選項的background不滿意，能夠自行定義drawable，舉個例子：
在res/drawable-v21/item_background.xml中加入以下代碼

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"  
        android:color="@android:color/holo_red_light">
    </ripple>複製代碼

在res/drawable/item_background.xml中加入以下代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/holo_red_light" />
</shape>複製代碼

什麼，你問我爲何寫兩套drawable？哈哈哈哈哈哈哈哈哈...嗝

以後咱們把寫過的資源都配置進去，就能夠看到下面這個小可愛啦！

app:itemIconTint="@color/bottom_nav_icon_color"
    app:itemTextColor="@color/bottom_nav_text_color"
    app:itemBackground="@drawable/item_background"複製代碼

小可愛

好了我認可這一點也不可愛，並且配置很麻煩，因此這裏給出一種稍微簡單點的配置方式，但不能像上面那種能夠控制那麼多細節，大概是這個樣子：

就醬

若是你能接受每一個Item的圖標與文字顏色時刻保持一致的話，能夠考慮以下配置：
在 res/values/styles.xml中添加一個style

<style name="MyBottomNavigationStyle" parent="Widget.Design.BottomNavigationView">
        //ripple的顏色
        <item name="colorControlHighlight">@android:color/holo_red_light</item>
        //選中時的顏色
        <item name="colorPrimary">@android:color/holo_green_dark</item>
        //未選中的顏色
        <item name="android:textColorSecondary" >@android:color/black</item>
    </style>複製代碼

以後將這個style配置進去就行了，代碼以下：

<android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation"
        android:theme="@style/MyBottomNavigationStyle"
        android:background="?android:attr/windowBackground"
        android:id="@+id/bottom_navigation_view"/>複製代碼

以後就是點擊監聽的問題了，看代碼

BottomNavigationView navigationView = findViewById(R.id.bottom_navigation_view);
        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_camera:
                        break;
                    case R.id.menu_palette:
                        break;
                }
                return true;
            }
        });複製代碼

被點擊的menuItem會在onNavigationItemSelected方法中回調，以後根據id作操做就行了，注意，若是此方法返回true，則認爲事件被處理，BottomNavigationView將播放選項切換動畫，若是返回false，點擊以後是沒有效果的。
BottomNavigationView 還提供了一個OnNavigationItemReselectedListener用於監聽已選中的Item被重複點擊的狀況，在這種狀況下，若是設置了此監聽，BottomNavigationView 將不回調OnNavigationItemSelectedListener，好比咱們可使用一個OnNavigationItemReselectedListener的空實現來屏蔽item被重複點擊的狀況。
最後須要說明的是，BottomNavigationView 支持經過代碼的方式切換菜單選項，以上圖舉例，若是咱們想切換到palette菜單的話：

navigationView.setSelectedItemId(R.id.menu_palette);複製代碼

傳入選項id便可。

好了下面進入正題。

BottomNavigationView源碼分析

BottomNavigationView基於Android的Menu框架構建，因此，視圖方面，主要角色爲MenuView、ItemView兩個接口，對應的實現分別是BottomNavigationMenuView、BottomNavigationItemView，一個負責選項視圖，一個負責總體佈局。數據及交互處理方面，主要角色爲Menu（MenuBuilder）、MenuItem、MenuPresenter三個接口，實現類分別爲BottomNavigationMenu、MenuItemImpl、BottomNavigationPresenter。他們之間的依賴關係見UML圖

UML圖

至於這究竟是不是MVP模式，見仁見智，也不能僅就類圖加以判斷。有幾個類的職責須要先說明一下，MenuBuilder負責存儲item數據以及對外暴露操做接口，Presenter幫助MenuBuilder操做視圖。好比咱們經過MenuBuilder獲取一個MenuItem，而後調用他的setChecked方法，此時MenuItem會通知MenuBuilder數據更新，以後MenuBuilder就會經過MenuPresenter來操做MenuView，而後MenuView再根據具體狀況去操做ItemView完成視圖刷新。因此BottomNavigationMenuView會維護和操做BottomNavigationItemView，BottomNavigationPresenter會幫助BottomNavigationMenu更新視圖。相信這樣你們就會對總體架構有一個宏觀的瞭解。

BottomNavigationView

其實剛剛並無提到BottomNavigationView，因此咱們從這個類入手，瞭解一下整個源碼的細節。BottomNavigationView的工做很少，主要用於爲使用者暴露交互api，好比設置着色、設置背景等等，另一個做用就是建立上面提到的各類角色。咱們來看一下他的構造函數：

public BottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        ThemeUtils.checkAppCompatTheme(context);

        //一、建立MenuBuilder
        mMenu = new BottomNavigationMenu(context);

        //二、建立MenuView
        mMenuView = new BottomNavigationMenuView(context);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER;
        //wrapContent並居中(BottomNavigationView自己是一個FrameLayout)
        mMenuView.setLayoutParams(params);

        //三、進行注入
        mPresenter.setBottomNavigationMenuView(mMenuView);
        mPresenter.setId(MENU_PRESENTER_ID);
        mMenuView.setPresenter(mPresenter);
        mMenu.addMenuPresenter(mPresenter);
        mPresenter.initForMenu(getContext(), mMenu);

        // 四、解析xml屬性並設置
        TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs,
                R.styleable.BottomNavigationView, defStyleAttr,
                R.style.Widget_Design_BottomNavigationView);

        //省略設置各類屬性的代碼...
        //大概操做就是若是沒有在xml中配置，就建立默認的

        if (a.hasValue(R.styleable.BottomNavigationView_menu)) {
            //加載菜單並建立相應View
            inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0));
        }
        a.recycle();

        addView(mMenuView, params);
        if (Build.VERSION.SDK_INT < 21) {
            //5.0之前的在頂部加一個灰色的View當作陰影
            addCompatibilityTopDivider(context);
        }
        //五、監聽菜單點擊並向外傳遞事件
        mMenu.setCallback(new MenuBuilder.Callback() {...});
    }複製代碼

代碼不復雜，但有幾個細節須要注意一下。第一部分中建立的BottomNavigationMenu是MenuBuilder的子類，繼承的目的是爲了控制選項數量及設置item的屬性，他覆寫了父類的addInternal方法：

@Override
    protected MenuItem addInternal(int group, int id, int categoryOrder, CharSequence title) {
        //數量限制
        if (size() + 1 > MAX_ITEM_COUNT) {
            throw new IllegalArgumentException(
                    "Maximum number of items supported by BottomNavigationView is " + MAX_ITEM_COUNT
                            + ". Limit can be checked with BottomNavigationView#getMaxItemCount()");
        }
        stopDispatchingItemsChanged();
        final MenuItem item = super.addInternal(group, id, categoryOrder, title);
        if (item instanceof MenuItemImpl) {
            //設爲惟一可點擊
            ((MenuItemImpl) item).setExclusiveCheckable(true);
        }
        startDispatchingItemsChanged();
        return item;
    }複製代碼

此方法在解析menu文件時被調用。第一句的MAX_ITEM_COUNT是5，限制選項個數，多了就拋異常，以後注意這一句
((MenuItemImpl) item).setExclusiveCheckable(true);
將這個Item設置爲惟一可選中的，能夠理解爲將這個選項設置爲單選的。舉個例子，對於一個menu group來講，當某個帶有Exclusive標記的Item被點選時，menu框架會自動取消選中其餘的帶有Exclusive標記的選項，從而達到單選的目的。對應的咱們的BottomNavigationView其實就是這種狀況，他在這個方法裏將每一個Item設置爲ExclusiveCheckable，這樣就很方便的實現一個item被checked，另外一個就unchecked的效果了。
你們可能注意到源碼中的stopDispatchingItemsChanged()、startDispatchingItemsChanged()兩個方法了，坦率的講，我是實在沒看出有什麼用，你們也不要糾結了，這鍋26-alpha版原本背。
而後咱們回來看第三部分，一通注入，不跟源碼了，直接解釋一下：
mPresenter.setBottomNavigationMenuView(mMenuView);將MenuView注入到presenter中
mMenuView.setPresenter(mPresenter);將presenter注入到MenuView中
這樣二者互相持有了。以後是mMenu.addMenuPresenter(mPresenter)將presenter注入到menu中，最後調用
mPresenter.initForMenu(getContext(), mMenu)將menu注入到presenter中，這樣他倆也互相持有了，同時presenter會將menu注入到MenuView中，這樣整個流程就結束了，你們能夠對照uml圖再捋一遍。
第四部分中傳入的默認style爲R.style.Widget_Design_BottomNavigationView，源碼位置爲sdk/extra/android/m2repository/com/android/support/design/26.0.0-alpha1。解壓aar文件後能夠在res/values/values.xml中找到以下定義：

<style name="Widget.Design.BottomNavigationView" parent="">
        <item name="itemBackground">?attr/selectableItemBackgroundBorderless</item>
        <item name="elevation">@dimen/design_bottom_navigation_elevation</item>
    </style>複製代碼

因此其實安卓幫咱們默認定義了background和elevation，咱們才能夠直接看到陰影和使用colorControlHighlight來改變ripple的顏色。關於elevation這裏在說一句，源碼中使用的是ViewCompat的setElevation方法設置的，但在5.0以前的版本，對應的方法是空實現的，因此纔會有addCompatibilityTopDivider(context);手動作一步兼容處理。在5.0以後的版本，記得必定要給BottomNavigationView設置背景色，不然elevation就無效了。
最後關於inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0));這句，涉及的內容比較多，除了加載菜單以外，還包括了建立視圖等操做，後面會再提到。
到此爲止，BottomNavigationView比較主線的工做就完成了，下面再來看一下BottomNavigationMenuView。

BottomNavigationMenuView

其實它纔是咱們真正看到的底欄，繼承自ViewGroup，完成對底欄中每個選項視圖(BottomNavigationItemView)的建立、測量、佈局、更新等操做。下面給出幾個全局變量的含義：

private final int mInactiveItemMaxWidth;    //未選中ItemView最大寬度
    private final int mInactiveItemMinWidth;    //未選中ItemView的最小寬度
    private final int mActiveItemMaxWidth;      //選中的ItemView的最大寬度
    private final int mItemHeight;              //ItemView高度
    private final Pools.Pool<BottomNavigationItemView> mItemPool //ItemView回收池
    private boolean mShiftingMode               //是否爲漂移模式
    private BottomNavigationItemView[] mButtons;    //存儲ItemView數組複製代碼

不出意外的話，前四個變量是設計師給出的參數。從這幾個參數中咱們能夠大概推斷出設計師的意圖：ItemView的高度是定死的，而寬度的話會比較靈活。因爲只給出了選中的ItemView的最大寬度，因此，在漂移模式的狀況下，算法上應儘可能讓選中的Item越大越好，但不要超過maxWidth，有些狀況下（如橫屏）底欄的空間會很充足，這時候也要對未選中的選項的最大寬度加以限制，避免圖標間距過大。固然這也只是我的的猜想，你們權當參考。咱們直接來看一下onMeasure方法：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //父佈局寬度
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        //Item個數
        final int count = getChildCount();
        //Item高度佈局參數
        final int heightSpec = MeasureSpec.makeMeasureSpec(mItemHeight, MeasureSpec.EXACTLY);
        //若是爲漂移模式
        if (mShiftingMode) {
            final int inactiveCount = count - 1;
            final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
            final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
            final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
            final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
            int extra = width - activeWidth - inactiveWidth * inactiveCount;
            for (int i = 0; i < count; i++) {
                mTempChildWidths[i] = (i == mSelectedItemPosition) ? activeWidth : inactiveWidth;
                if (extra > 0) {
                    mTempChildWidths[i]++;
                    extra--;
                }
            }
        //非漂移模式
        } else {
            final int maxAvailable = width / (count == 0 ? 1 : count);
            final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
            int extra = width - childWidth * count;
            for (int i = 0; i < count; i++) {
                mTempChildWidths[i] = childWidth;
                if (extra > 0) {
                    mTempChildWidths[i]++;
                    extra--;
                }
            }
        }
        //調用每個子View的measure確立子佈局寬高
        int totalWidth = 0;
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            child.measure(MeasureSpec.makeMeasureSpec(mTempChildWidths[i], MeasureSpec.EXACTLY),
                    heightSpec);
            ViewGroup.LayoutParams params = child.getLayoutParams();
            params.width = child.getMeasuredWidth();
            totalWidth += child.getMeasuredWidth();
        }
        //確立本身的寬高
        setMeasuredDimension(
                View.resolveSizeAndState(totalWidth,
                        MeasureSpec.makeMeasureSpec(totalWidth, MeasureSpec.EXACTLY), 0),
                View.resolveSizeAndState(mItemHeight, heightSpec, 0));
    }複製代碼

你們能夠看到，漂移模式跟非漂移模式的寬度測量方式是不一樣的，經過mShiftingMode控制。有沒有很疑惑mShiftingMode在什麼時機被賦值的？坦率的講，mShiftingMode必定在onMeasure以前就被賦值了，並且觸發的時機就是前面沒有詳細解釋的inflate方法。但按照咱們正常的編碼思路，mShiftingMode徹底能夠在onMeasure方法中根據參數count來決定，並且有很高的安全性，但Google爲何沒有這樣作？還記得開頭提到的修改樣式的那篇文章嗎，有沒有想過憑什麼簡簡單單的反射一個變量就能把樣式改了？爲何那波操做看似驚心動魄卻又穩如狗？細思極恐了吧。扯遠了，下面咱們來分析一下寬度計算的算法，以漂移模式爲例，我把代碼摘出來：

//未選中的item的數量
    final int inactiveCount = count - 1;
    //先根 據未選中的item 的最小寬度來計算一個 選中的item 的寬度
    final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
    //若是這個寬度太大，則限制爲mActiveItemMaxWidth
    final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
    //選中的item的 寬度 確立下來以後，平分剩餘寬度做爲 未選中的item的 寬度
    final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
    //但這個寬度可能過大，限制爲mInactiveItemMaxWidth
    final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
    //extra部分
    int extra = width - activeWidth - inactiveWidth * inactiveCount;
    for (int i = 0; i < count; i++) {
      mTempChildWidths[i] = (i == mSelectedItemPosition) ? activeWidth : inactiveWidth;
      if (extra > 0) {
        mTempChildWidths[i]++;
        extra--;
        }
    }複製代碼

前幾行的註釋已經寫的很是清楚了，至於爲何會出現一個extra部分，我想是在作除法的過程當中，可能會產生精度損失，因此理想狀況下，extra的值應該爲零。你們能夠看到，在for循環中，每一趟循環都會從extra中拿出一個像素（若是extra一直大於0的話）來彌補這個損失，至關於把不能整除的餘數一個個的分給子View，送完即止。
非漂移的狀況下算法更爲簡單，這裏就再也不分析了，通過measure以後會在onLayout方法中橫向排列他們，測量和佈局的流程就結束了。下面來看一下buildMenuView方法：

public void buildMenuView() {
        //移除全部子View
        removeAllViews();
        //回收移除的View
        if (mButtons != null) {
            for (BottomNavigationItemView item : mButtons) {
                mItemPool.release(item);
            }
        }
        if (mMenu.size() == 0) {
            mSelectedItemId = 0;
            mSelectedItemPosition = 0;
            mButtons = null;
            return;
        }
        mButtons = new BottomNavigationItemView[mMenu.size()];
        //在這裏設置ShiftingMode
        mShiftingMode = mMenu.size() > 3;
        for (int i = 0; i < mMenu.size(); i++) {
            //掛起presenter
            mPresenter.setUpdateSuspended(true);
            mMenu.getItem(i).setCheckable(true);
            //激活presenter
            mPresenter.setUpdateSuspended(false);
            //從緩衝池中獲取或直接new一個BottomNavigationItemView
            BottomNavigationItemView child = getNewItem();
            mButtons[i] = child;
            child.setIconTintList(mItemIconTint);
            child.setTextColor(mItemTextColor);
            child.setItemBackground(mItemBackgroundRes);
            child.setShiftingMode(mShiftingMode);
            //根據MenuItem的數據設置BottomNavigationItemView的顯示效果
            child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
            child.setItemPosition(i);
            //添加點擊監聽
            child.setOnClickListener(mOnClickListener);
            addView(child);
        }
        mSelectedItemPosition = Math.min(mMenu.size() - 1, mSelectedItemPosition);
        //將mSelectedItemPosition位置的MenuItem設置爲選中狀態，這將會引發視圖更新
        mMenu.getItem(mSelectedItemPosition).setChecked(true);
    }複製代碼

buildMenuView的主要做用是建立多個BottomNavigationItemView並經過addView添加爲本身的子View。與之對應的一個方法是updateMenuView，他會一次性更新全部的BottomNavigationItemView。注意，更新有多是菜單項的添加或刪除引發的，因此每當出現這種狀況，他的作法是把全部View都刪掉，重建菜單，因而你會看到開頭的第一句。但重建菜單很粗暴，會影響性能，因而這裏又引入了一個回收池。這個回收池是v4包提供的一個工具類，仍是很是實用的，你們能夠嘗試用起來。可能你們注意到了下面這段代碼：

//掛起presenter
    mPresenter.setUpdateSuspended(true);
    //設置爲可選中的
    mMenu.getItem(i).setCheckable(true);
    //激活presenter
    mPresenter.setUpdateSuspended(false);複製代碼

這個掛起顯得很是扎眼，畢竟安卓的UI操做是單線程的。並且這個所謂的掛起，只是設置一個Boolean類型的變量mUpdateSuspended：

public void setUpdateSuspended(boolean updateSuspended) {
        mUpdateSuspended = updateSuspended;
    }複製代碼

那這就顯得很蹊蹺，讓咱們看一下「臨界區」中都作了些什麼：

@Override
    public MenuItem setCheckable(boolean checkable) {
        final int oldFlags = mFlags;
        //根據checkable設置標誌位，位與取反是清空，或操做是設置標誌位
        mFlags = (mFlags & ~CHECKABLE) | (checkable ? CHECKABLE : 0);
        if (oldFlags != mFlags) {
            //看這裏，傳入了false
            mMenu.onItemsChanged(false);
        }

        return this;
    }複製代碼

在checkable發生變化的狀況下會調用到mMenu.onItemsChanged，跟進之：

public void onItemsChanged(boolean structureChanged) {
        if (!mPreventDispatchingItemsChanged) {
            if (structureChanged) {
                mIsVisibleItemsStale = true;
                mIsActionItemsStale = true;
            }
            //structureChanged此時爲false
            dispatchPresenterUpdate(structureChanged);
        } else {
            mItemsChangedWhileDispatchPrevented = true;
            if (structureChanged) {
                mStructureChangedWhileDispatchPrevented = true;
            }
        }
    }複製代碼

在onItemsChanged方法中會調用到dispatchPresenterUpdate方法：

private void dispatchPresenterUpdate(boolean cleared) {
        if (mPresenters.isEmpty()) return;

        stopDispatchingItemsChanged();
        for (WeakReference<MenuPresenter> ref : mPresenters) {
            final MenuPresenter presenter = ref.get();
            if (presenter == null) {
                mPresenters.remove(ref);
            } else {
                //看這裏！此時cleared爲false
                presenter.updateMenuView(cleared);
            }
        }
        startDispatchingItemsChanged();
    }複製代碼

以後會調用到presenter.updateMenuView(cleared);，繼續跟進

@Override
    public void updateMenuView(boolean cleared) {
        //由於我恰好碰見你？
        if (mUpdateSuspended) return;
        if (cleared) {
            //mMenuView就是BottomNavigationMenuView
            mMenuView.buildMenuView();
        } else {
            //若是沒有第一句的話，按照clear的值應該會走這裏
            mMenuView.updateMenuView();
        }
    }複製代碼

咱們終於發現了mUpdateSuspended的做用，你應該還沒亂吧？從新梳理一下，在setCheckable()以前，首先調用了presenter的setUpdateSuspended()將mUpdateSuspended置爲false，以後的setCheckable()會展轉調用到presenter的updateMenuView(),此時由於mUpdateSuspended爲false，函數直接return了，並無執行，不然可能會調用到BottomNavigationMenuView的updateMenuView方法，也就是那個一次性更新全部ItemView的方法，這是咱們不肯意看到的，畢竟setCheckable()出如今一個循環之中，咱們徹底有理由讓這個循環結束再統一更新他們。
再從新回過頭來看這個函數的命名，就顯得頗有意思了，雖然不是真的操做進程，但presenter確實不工做了，等到mUpdateSuspended設置爲true的時候再激活它。值得一說的是，有的時候掛起presenter不是爲了性能，而是不掛起presenter代碼就會死循環。。好比咱們在mMenuView的updateMenuView方法中調用setCheckable(),就會展轉調用回updateMenuView。。具體我就很少說了，把代碼寫成這樣也是沒誰了。。
再回到buildMenuView，其中的最後一句mMenu.getItem(mSelectedItemPosition).setChecked(true);跟setCheckable()有差很少的調用鏈，但由於沒有掛起，因此會展轉調用到mMenuView.updateMenuView();，咱們仍是看一下吧：

public void updateMenuView() {
        final int menuSize = mMenu.size();
        if (menuSize != mButtons.length) {
            // The size has changed. Rebuild menu view from scratch.
            buildMenuView();
            return;
        }
        int previousSelectedId = mSelectedItemId;
        for (int i = 0; i < menuSize; i++) {
            mPresenter.setUpdateSuspended(true);
            MenuItem item = mMenu.getItem(i);
            if (item.isChecked()) {
                mSelectedItemId = item.getItemId();
                mSelectedItemPosition = i;
            }
            //根據MenuItem更新BottomNavigationItemView
            mButtons[i].initialize((MenuItemImpl) item, 0);
            mPresenter.setUpdateSuspended(false);
        }
        if (previousSelectedId != mSelectedItemId) {
            //經過TransitionManager執行動畫
            TransitionManager.beginDelayedTransition(this);
        }
    }複製代碼

你可能會注意到，這裏也有presenter的掛起，但我能夠負責任的告訴你們，這裏的掛起並有什麼做用，這口鍋26-alpha必須背！這徹底就是版本迭代的時候忘記刪除這段代碼了！不信你們能夠去看25版本的源碼，他確定是忘記刪了！別問我花了多久才弄明白的！動畫切換部分使用的是support包中的TransitionManager，支持到4.0.3，不是那個5.0的TransitionManager，因此兼容性上沒有問題。可是！BottomNavigationMenuView的全局變量中有一個private final TransitionSet mSet;，並且還有這個

mSet = new AutoTransition();
        mSet.setOrdering(TransitionSet.ORDERING_TOGETHER);
        mSet.setDuration(ACTIVE_ANIMATION_DURATION_MS);
        mSet.setInterpolator(new FastOutSlowInInterpolator());
        mSet.addTransition(new TextScale());複製代碼

而後我就找啊，這個mSet在哪用的啊？我就想把那個寫源碼的人叫過來，問問這個mSet在哪用的？恩？在哪？是否是在25版本里用的？心累。

BottomNavigationItemView

還剩下最後一個，BottomNavigationItemView，負責MenuItem的顯示工做，自己是個FrameLayout，經過佈局文件加載子View：
sdk/extra/android/m2repository/com/android/support/design/26.0.0-alpha1/res/layout/design_bottom_navigation_item.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/design_bottom_navigation_margin" android:layout_marginBottom="@dimen/design_bottom_navigation_margin" android:duplicateParentState="true" />
    <android.support.design.internal.BaselineLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:clipToPadding="false" android:paddingBottom="10dp" android:duplicateParentState="true">
        <TextView android:id="@+id/smallLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/design_bottom_navigation_text_size" android:singleLine="true" android:duplicateParentState="true" />
        <TextView android:id="@+id/largeLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:textSize="@dimen/design_bottom_navigation_active_text_size" android:singleLine="true" android:duplicateParentState="true" />
    </android.support.design.internal.BaselineLayout>
</merge>複製代碼

文字部分經過BaseLineLayout展現，這個Layout的做用是將子View對齊BaseLine排布在一塊兒。構造函數沒什好說的，咱們重點關注一下setChecked方法：

@Override
    public void setChecked(boolean checked) {
        //旋轉中心，用於scale
        mLargeLabel.setPivotX(mLargeLabel.getWidth() / 2);
        mLargeLabel.setPivotY(mLargeLabel.getBaseline());
        mSmallLabel.setPivotX(mSmallLabel.getWidth() / 2);
        mSmallLabel.setPivotY(mSmallLabel.getBaseline());
        if (mShiftingMode) {
            if (checked) {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                //被選中狀況下將Gravity設置爲TOP，由於未被選中下只是居中，因此TransitionManager會施加縱向的位移動畫
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin;
                //此方法會引發父佈局從新測量，寬度增長，從而觸發橫向的位移動畫
                mIcon.setLayoutParams(iconParams);
                //無論是checked仍是unchecked，都是經過改變mLargeLabel的scale實現
                mLargeLabel.setVisibility(VISIBLE);
                mLargeLabel.setScaleX(1f);
                mLargeLabel.setScaleY(1f);
            } else {
                //...
            }
            mSmallLabel.setVisibility(INVISIBLE);
        } else {
            if (checked) {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin + mShiftAmount;
                mIcon.setLayoutParams(iconParams);
                //經過mLargeLabel、mSmallLabel的輪番顯示來實現
                mLargeLabel.setVisibility(VISIBLE);
                mSmallLabel.setVisibility(INVISIBLE);

                mLargeLabel.setScaleX(1f);
                mLargeLabel.setScaleY(1f);
                //雖然mSmallLabel被隱藏了，但將其放大到mLargeLabel的大小以便設置爲unchecked時能夠得到天然的過渡動畫
                mSmallLabel.setScaleX(mScaleUpFactor);
                mSmallLabel.setScaleY(mScaleUpFactor);
            } else {
                //...
            }
        }

        refreshDrawableState();
    }複製代碼

此方法根據參數checked切換視圖狀態。經過註釋能夠發現，因爲TransitionManager的存在，BottomNavigationItemView並不須要處理動畫過渡，仍是很是方便的。最後一句話refreshDrawableState();使得BottomNavigationItemView也不須要親自處理顏色切換，這纔是正確的編碼姿式。關於drawable狀態切換，你們能夠參考洋神的這篇文章。

當咱們在談論初始化的時候咱們在談論些什麼

回到文章開頭跳過的inflateMenu方法，咱們從這裏入手，研究一下BottomNavigationView是如何初始化的。

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

在調用inflater的inflate方法以前，presenter就掛起了，這是由於inflate方法會出觸發圖更新，簡單的跟蹤一下：

public void inflate(@MenuRes int menuRes, Menu menu) {
        XmlResourceParser parser = null;
        try {
            //...
            parseMenu(parser, attrs, menu);
        } catch (XmlPullParserException e) {
            //...
        }
    }複製代碼

會調用parseMenu解析menu文件：

private void parseMenu(XmlPullParser parser, AttributeSet attrs, Menu menu) throws XmlPullParserException, IOException {
        MenuState menuState = new MenuState(menu);
        //。。。

        boolean reachedEndOfMenu = false;
        while (!reachedEndOfMenu) {
            switch (eventType) {
                case XmlPullParser.START_TAG:
                    //...
                    break;

                case XmlPullParser.END_TAG:
                    tagName = parser.getName();
                    //...
                    else if (tagName.equals(XML_ITEM)) {
                        if (!menuState.hasAddedItem()) {
                            //if...
                            else {
                                //看這裏！
                                registerMenu(menuState.addItem(), attrs);
                            }
                        }
                    } 
                    break;
            }
            eventType = parser.next();
        }
    }複製代碼

此方法會將解析出來的數據放置在menu對象中，從而完成inflate操做。看一眼menuState.addItem()方法：

public MenuItem addItem() {
        itemAdded = true;
        MenuItem item = menu.add(groupId, itemId, itemCategoryOrder, itemTitle);
        setItem(item);
        return item;
    }複製代碼

menu.add()會展轉調用到BottomNavigationMenu的addInternal方法,就是前面講到的限制item個數以及設置exclusive的地方。下面的一句setItem：

private void setItem(MenuItem item) {
            item.setChecked(itemChecked)
                .setXXX...
                .setXXX...
                ...
            //...
        }複製代碼

就會調用到setchecked了：

@Override
    public MenuItem setChecked(boolean checked) {
        if ((mFlags & EXCLUSIVE) != 0) {
            mMenu.setExclusiveItemChecked(this);
        } else {
            setCheckedInt(checked);
        }
        return this;
    }複製代碼

由於咱們設置過標誌位，因此執行mMenu.setExclusiveItemChecked(this)

void setExclusiveItemChecked(MenuItem item) {
        final int group = item.getGroupId();

        final int N = mItems.size();
        stopDispatchingItemsChanged();
        for (int i = 0; i < N; i++) {
            MenuItemImpl curItem = mItems.get(i);
            if (curItem.getGroupId() == group) {
                if (!curItem.isExclusiveCheckable()) continue;
                if (!curItem.isCheckable()) continue;
                curItem.setCheckedInt(curItem == item);
            }
        }
        startDispatchingItemsChanged();
    }
`複製代碼

注意這個for循環，對於menu中的每個item，檢查其是否與參數item的引用一致，只有一致的，纔會將checked設置爲true，其餘只能是false，因此，對於那些帶有Exclusive標記的item，只能使用item.setChecked(true)來選中它,別想着傳入false進行進行反向操做，由於這與傳入true的結果是同樣的。在for循環中，會調用到curItem.setCheckedInt(curItem == item)，跟進之：

void setCheckedInt(boolean checked) {
        final int oldFlags = mFlags;
        //根據checked設置標誌位，位與取反是清空，或操做是設置標誌位
        mFlags = (mFlags & ~CHECKED) | (checked ? CHECKED : 0);
        if (oldFlags != mFlags) {
            mMenu.onItemsChanged(false);
        }
    }複製代碼

當checked發生變化就會調用mMenu.onItemsChanged(false);，而後就與以前提到的調用鏈一致了。因而在inflate操做以前，必須掛起presenter，不然將致使視圖屢次更新。再回到inflate方法：

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

菜單文件加載完畢，數據被存放在mMenu對象中，以後就會調用mPresenter.updateMenuView(true);：

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

而後是mMenuView.buildMenuView();：

public void buildMenuView() {
        removeAllViews()
        //...
        mButtons = new BottomNavigationItemView[mMenu.size()];
        mShiftingMode = mMenu.size() > 3;
        for (int i = 0; i < mMenu.size(); i++) {
            //...
            BottomNavigationItemView child = getNewItem();
            mButtons[i] = child;
            //...
            child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
            child.setItemPosition(i);
            child.setOnClickListener(mOnClickListener);
            addView(child);
        }
        mSelectedItemPosition = Math.min(mMenu.size() - 1, mSelectedItemPosition);
        mMenu.getItem(mSelectedItemPosition).setChecked(true);
    }複製代碼

到這裏你們就很熟悉了，mShiftingMode也是在這裏賦值的，BottomNavigationMenuView的子View也是在這個地方建立的，他們都發生在BottomNavigationView的構造函數中，最後一句mMenu.getItem(mSelectedItemPosition).setChecked(true);將當前記錄的選項設置爲選中狀態，由於是初始化，因此是0。後面的步驟已經講解過了:因爲setChecked，
MenuItem#setChecked => MenuBuilder#setExclusiveItemChecked=>MenuItem#setCheckedInt => MenuBuilder#onItemsChanged => MenuBuilder#dispatchPresenterUpdate =>MenuPresenter#updateMenuView => MenuView#updateMenuView => BottomNavigationView#initialize
以後通過measure、layout、draw的操做，咱們就能夠看到這些小可愛了...

點擊事件的傳遞及處理流程

很差意思，廢話太多，文章很長，最後一部分，分析一下點擊事件的傳遞及處理流程。在BottomNavigationMenuView的buildMenuView方法中，爲每個BottomNavigationItemView設置了點擊監聽，onclick方法以下：

mOnClickListener = new OnClickListener() {
            @Override
            public void onClick(View v) {
                final BottomNavigationItemView itemView = (BottomNavigationItemView) v;
                MenuItem item = itemView.getItemData();
                if (!mMenu.performItemAction(item, mPresenter, 0)) {
                    item.setChecked(true);
                }
            }
        };複製代碼

會首先調用mMenu.performItemAction：

public boolean performItemAction(MenuItem item, MenuPresenter preferredPresenter, int flags) {
        MenuItemImpl itemImpl = (MenuItemImpl) item;
        if (itemImpl == null || !itemImpl.isEnabled()) {
            return false;
        }
        boolean invoked = itemImpl.invoke();
        //...
        return invoked;
    }複製代碼

會進入被點擊的這個item的invoke方法：

public boolean invoke() {
        //...
        if (mMenu.dispatchMenuItemSelected(mMenu.getRootMenu(), this)) {
          return true;
        }
        //...
        return false;
    }複製代碼

而後又會回到MenuBuilder中去，調用他的dispatchMenuItemSelected方法：

boolean dispatchMenuItemSelected(MenuBuilder menu, MenuItem item) {
        return mCallback != null && mCallback.onMenuItemSelected(menu, item);
    }複製代碼

咱們能夠看到事件跑到callback中去了，那callback在哪呢？其實咱們在BottomNavigationView的構造函數中設置過他：

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) {}
        });複製代碼

如今事件的處理權回到了BottomNavigationView中，他的處理方式就是讓咱們本身處理，也就是傳遞給mReselectedListener或mSelectedListener，若是咱們在外部的監聽中返回了true，則callback返回false，則MenuItem的invoke方法返回false，則MenuBuilder的performItemAction返回false，則BottomNavigationItemView的點擊監聽中的條件判斷成立：

if (!mMenu.performItemAction(item, mPresenter, 0)) {
            item.setChecked(true);
        }複製代碼

因而會調用MenuItem的setChecked方法更新視圖，不然將不作處理。

寫在最後

安卓的源碼老是有不少值得咱們學習的地方，好比Transition的運用和Drawable狀態的處理。但此次的BottomNavigationView看得我很心累，多是alpha版本的緣由，總有一種施工現場的感受...Menu框架從API level 1 就已經被設計好，經歷了26個系統版本的變化，支撐着ActionBar、Toolbar、PopupMenu、NavigationView、BottomNavigationView等上層設計，基本上已經修煉成精，因此此次加入的suspend，也是無奈之舉修修補補又一年吧 :)