BottomNavigationView 的使用及遇到的坑

BottomNavigationView 的使用

布局中设置

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

BottomNavigationView 是通过 menu 来设置item，文件如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
    <item
        android:id="@+id/navigation_person"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="@string/title_person" />
</menu>

Activity 中使用

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_bottom_navigation);
    BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    return true;
                case R.id.navigation_dashboard:
                    return true;
                case R.id.navigation_notifications:
                    return true;
                case R.id.navigation_person:
                    return true;
            }
            return false;
        }

    };

遇到的坑

问题一：使用的时候 item 数大于 3 个时会有位移

原回答
请先确认你使用库的版本 >= 28 请看该问题的第二种方法
使用下面的类通过反射来修改

public class BottomNavigationViewHelper {
    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);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

使用：

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
BottomNavigationViewHelper.disableShiftMode(navigation);

感谢DejaVu_85fc
如果你现在使用的版本在 28-alpha 之后上面的方法将无法使用。但官方有更好的方法解决位移的问题
我们可以直接在 xml 中设置属性

app:labelVisibilityMode="[labeled, unlabeled, selected, auto]"

或者代码中

navigation.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);

labeled : 保持所有文字便签显示
unlabeled ：只显示图标
selected ：在选中的时候显示文字标签，有动画效果
auto : 在 1-3 个按钮时使用 labeled ，大于 3 个按钮使用 selected

问题二：

图是网上找到

要实现上面的这样的效果：

我们把 app:menu="@menu/navigation" 指向的 navigation 修改为

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_center"
        android:icon="@null"
        android:title="" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

    <item
        android:id="@+id/navigation_person"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="@string/title_person" />

</menu>

即中间第三个 menu 不给设置图片和文字

然后我们修改布局文件（即用一个LinearLayout (只是正中间有一个Image), 覆盖在 BottomNavigation 之上）

如果中间的按钮需要的是替换当前页面的fragment的话我们那么我们的 image 只用作显示使用，如果需要按钮的功能是打开一个新页面，那么我们需要给这个 imageVIew 设置一个点击事件，这样 BottomNavigation 就不会拿到点击事件，把中间的 item 标记为选中

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:clipToPadding="true">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="16dp">

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

        <ImageView
            android:id="@+id/navigation_center_image"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

    </LinearLayout>
</FrameLayout>

问题三：选中 item 时 item 的文本会有一个动画，那么如何取消动画。icon 也会上移一点。

原回答

design_bottom_navigation_active_text_size

design_bottom_navigation_text_size

上面的参数是item选中没有选中的文本大小，我们把它设置成一样的话就没有动画了

design_bottom_navigation_margin

是图标的 margin bottom 的值我们可以调整他让 icon 垂直居中

<!--http://www.jianshu.com/p/7b2d842267ab-->
<!--BottomNavigationView 的选中没有选中的字体大小-->
<dimen name="design_bottom_navigation_active_text_size">10sp</dimen>
<dimen name="design_bottom_navigation_text_size">10sp</dimen>


<!--BottomNavigationView 只放图标时的设置-->
<dimen name="design_bottom_navigation_active_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_text_size">0sp</dimen>
<dimen name="design_bottom_navigation_margin">16dp</dimen>

把上面的根据需要 copy 到 res/values/dimens 中就行