Android Design Library之二: BottomNavigationView

http://blog.magicer.xyz/2017/...

BottomNavitagionView出现之前，我们首先底部的导航栏大多是使用RadioGroup+RadioButton的特性来实现。现在官方为我们提供了另外的一条路。先来尝试下。

Demo

打开官方文档里面就有示例程序，比着敲一遍，看下效果。

 <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:gravity="center"
        app:itemIconTint="#009877"
        app:itemTextColor="#009877"
        app:paddingStart="10dp"
        app:paddingEnd="10dp"
        app:itemBackground="@color/white"
        app:menu="@menu/bottom_nav"/>

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

    <item
        android:id="@+id/menu_nav_android"
        android:icon="@drawable/ic_android_black_36dp"
        app:showAsAction="ifRoom"
        android:title="Android"/>
    <item
        android:id="@+id/menu_nav_lock"
        android:icon="@drawable/ic_lock_black_36dp"
        app:showAsAction="ifRoom"
        android:title="Lock"/>
    <item
        android:id="@+id/menu_nav_group_work"
        android:icon="@drawable/ic_group_work_black_36dp"
        app:showAsAction="ifRoom"
        android:title="Work"/>

</menu>

效果如下

嗯。效果还是不错的。但是有时候我们需要的是颜色的变化，这个时候我们需要一个color。在res下的color文件夹下创建一个文件名为bottom_nav的文件内容如下。

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

    <item
        android:color="@color/nav_checked"
        android:state_checked="true"/>

    <item
        android:color="@color/nav_unchecked"
        android:state_checked="false"/>
</selector>

之后为BottomNavitagionView设置上就可以了。
效果如下

        app:itemIconTint="@color/bottom_nav"
        app:itemTextColor="@color/bottom_nav"

问题

真的就这么就完了么？ too young，too simple。我们底部的菜单项肯定不一定是3个。如果是4个。我们试一下，再加菜单项。很简单为menu再添加个item。来看下效果：

WTF

来看下源码看看到底发生了什么？
BottomNavigationView的源码

    private final MenuBuilder mMenu;
    private final BottomNavigationMenuView mMenuView;
    private final BottomNavigationPresenter mPresenter = new BottomNavigationPresenter();
    private MenuInflater mMenuInflater;
    //.....省略代码
    public void inflateMenu(int resId) {
        mPresenter.setUpdateSuspended(true);
        getMenuInflater().inflate(resId, mMenu);
        mPresenter.setUpdateSuspended(false);
        mPresenter.updateMenuView(true);
    }

我们看到。其中主要有这几个属性，通过查看代码我们可以看到。BottomNavigationPresenter来连接Menu和BottomNavigationMenuView的。
BottomNavigationPresenter的部分代码

    private MenuBuilder mMenu;
    private BottomNavigationMenuView mMenuView;
    
    @Override
    public void initForMenu(Context context, MenuBuilder menu) {
        mMenuView.initialize(mMenu);
        mMenu = menu;
    }
    ....省略...
    @Override
    public void updateMenuView(boolean cleared) {
        if (mUpdateSuspended) return;
        if (cleared) {
            mMenuView.buildMenuView();
        } else {
            mMenuView.updateMenuView();
        }
    }

我们可以看到。更新MenuView的方法是通过Presenter来调用的。其内部的代码

  public void buildMenuView() {
        mShiftingMode = mMenu.size() > 3;
        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);
        }
        mActiveButton = Math.min(mMenu.size() - 1, mActiveButton);
        mMenu.getItem(mActiveButton).setChecked(true);
    }

这里我们应该就看出来端倪了。mShiftingMode是个boolean值，当menu的长度大于三时，就为true。也就为每一个BottomNavigationItemView 设置上了child.setShiftingMode(mShiftingMode); true。在这里每一个BottomNavigationItemView就是一个tab。
在BottomNavigationItemView的代码中我们可以看到。其填充的布局为R.layout.design_bottom_navigation_item布局中有两个TextView(smallLabel和largeLabel) 和一个ImageView(icon),详细的代码自己搜一下吧。在design包中，这里就不贴出来了。

if (mShiftingMode) {
            if (checked) {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                mLargeLabel.setVisibility(VISIBLE);
                ViewCompat.setScaleX(mLargeLabel, 1f);
                ViewCompat.setScaleY(mLargeLabel, 1f);
            } else {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                mLargeLabel.setVisibility(INVISIBLE);
                ViewCompat.setScaleX(mLargeLabel, 0.5f);
                ViewCompat.setScaleY(mLargeLabel, 0.5f);
            }
            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.setVisibility(VISIBLE);
                mSmallLabel.setVisibility(INVISIBLE);

                ViewCompat.setScaleX(mLargeLabel, 1f);
                ViewCompat.setScaleY(mLargeLabel, 1f);
                ViewCompat.setScaleX(mSmallLabel, mScaleUpFactor);
                ViewCompat.setScaleY(mSmallLabel, mScaleUpFactor);
            } else {
                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
                iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
                iconParams.topMargin = mDefaultMargin;
                mIcon.setLayoutParams(iconParams);
                mLargeLabel.setVisibility(INVISIBLE);
                mSmallLabel.setVisibility(VISIBLE);

                ViewCompat.setScaleX(mLargeLabel, mScaleDownFactor);
                ViewCompat.setScaleY(mLargeLabel, mScaleDownFactor);
                ViewCompat.setScaleX(mSmallLabel, 1f);
                ViewCompat.setScaleY(mSmallLabel, 1f);
            }
        }

啊哈。看了这么多终于找到原因了。 这就是问题所在。我们见到如果我们吧mShiftingMode设置为false那么就不会出现那种效果。怎么设置呢。我们可以使用反射的机制来进行设置。
代码如下

 public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }