BottomNavigationView

要点：本文主要写使用 BottomNavigationView 和遇到的一些问题的解决办法

引言

作为谷歌 Material Design Components 新控件 BottomNavigationView，提供应用底部导航栏的实现。没有这个控件之前，Android 底部导航栏一般通过 LinearLayout 包裹几个 Button 或使用 RadioGroup 和 RadioButton 来实现。使用 BottomNavigationView 这个控件，可以提供更好的用户体验和开发更容易。此文主要介绍在使用 BottomNavigationView 过程中遇到的几个问题。

如何使用

添加依赖

这个没有什么好说的

compile 'com.android.support:design:25.0.0'

添加布局

布局分两个部分，首先是总的布局：

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

其次，配置导航项。在 res 的 menu 目录下创建上面代码中 app:menu="@menu/bottom_menu" 要引用到的文件：

<?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"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_category"
        android:icon="@drawable/ic_category"
        android:title="@string/title_category" />

    <item
        android:id="@+id/navigation_activity"
        android:icon="@drawable/ic_activity"
        android:title="@string/title_activity" />

    <item
        android:id="@+id/navigation_cart"
        android:icon="@drawable/ic_cart"
        android:title="@string/title_cart" />

    <item
        android:id="@+id/navigation_mine"
        android:icon="@drawable/ic_mine"
        android:title="@string/title_mine" />

</menu>

事件处理

主要是点击事件的处理，代码如下：

navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.navigation_home:
                        return true;
                    case R.id.navigation_category:
                        setTitle(R.string.title_category);
                        return true;
                    case R.id.navigation_activity:
                        setTitle(R.string.title_activity);
                        return true;
                    case R.id.navigation_cart:
                        setTitle(R.string.title_cart);
                        return true;
                    case R.id.navigation_mine:
                        setTitle(R.string.title_mine);
                        return true;
                }
                return false;
            }
        });

通过以上的代码，我们的代码就能运行起来，效果图如下:[图片上传失败...(image-7e3f7a-1512980965647)]：

没那么简单

很快你会发现，接入简单，但是真正符合我们的设计要求，我们还需要捣腾捣腾。

下面列举一下我遇到的问题：

当导航项大于三个的时候，选中项变大，其它文字被隐藏
当我们自定义默认和选中图之后，选中的效果图变色了

问题来了，我们怎么解决呢？

针对第一个问题，在网上查资料后，发现是 mShiftingMode 的问题，默认是开启的且谷歌没有开放修改接口。既然谷歌不给修改接口，那么我们就硬来，用反射来解决。实现代码如下：

BottomNavigationViewHelper.disableShiftMode(navigation);

BottomNavigationViewHelper 代码如下：

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);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BottomNavigationViewHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BottomNavigationViewHelper", "Unable to change value of shift mode", e);
        }
    }

}

针对第二个问题，各种谷歌百度后，发现是控件默认着色器的问题。知道问题所在，解决起来就简单了。只需一行代码禁 tint 就好了

 navigation.setItemIconTintList(null);

默认和选中文字的颜色，只需要添加颜色 selector 就可以了

app:itemTextColor="@color/tab_home"

另外，BottomNavigationView 支持的导航项数量是3-5个。

总结

谷歌 BottomNavigationView 效果是挺好的，使用很方便，特效也很不错，唯一不足就是接口不太友善。总的来说，这个控件使用容易且效果很赞，建议使用。

源文地址

http://ihongqiqu.com/2017/06/14/BottomNavigationView/

作者为

Zhenguo

BottomNavigationView